Learn Courses My Dashboard

Best method for creating wheel stepper that has momentum like scroll view?

App Development
#1

In SwiftUI, I’d like to be able to increment a state variable based on a user’s input. I envision the user swiping a wheel that rotates about a vertical axis. For example, a rotation3D effect on a “tic-like” view that rotates/animates based on swiping action. I’m imagining rotation is about the vertical axis but that doesn’t really matter, it could be about any axis and the problem remains. The swiping action should generate momentum that slows overtime exactly like ScrollView. The problem with scrollView is that it has a finite range and is linear. I’m looking for an endless rotation that just increments by 1 each time a tic moves.

I’ve tried to use the dragGesture.Value.PredictedEndLocation combined with a custom Animatable ViewModifier. I can share the code but it’s spaghetti-like and not concise so I first wanted to ask if anyone can share a more obvious path, API, or experience?

#2

Like the same UI that clock has for choosing a time? The picker wheel

#3

Yes! i think so. I hadn’t been able to identify a parallel feature in a native Apple app so thanks for that Mikaela.

I think the difference would be that the clock alarm is a picker wheel where the final selection is the only thing that matters. Whereas I’d be more interested in incrementing or decrementing an index for each tic representing a fraction of rotation. Eg the wheel is rotated for complete revolutions with 60 tics per revolution I would want my counter to increment by 240 counts.

#4

If you like the picker UI, you can change whatever the increments are and what they mean, the “final value” doesn’t have to matter

#5

Well then yes. That picker Ui is great. It has the dynamics and responsiveness and haptic feedback. And it finishes on one of the “tics” or integers or whatever like the wheel of fortune wheel. Meaning it won’t stop at some fraction in between. I envision being able to substitute whatever view I want in place of the apple clock numbers. And I envision rotating the wheels axis by 90 degrees so it is horizontal instead of vertical.

#6

Do you know how to configure a picker like that in Swiftui?

#7

It might take a lot of finagling to get it to work in SwiftUI.

But it is possible to rotate the picker and then rotate the content in it for a horizontal picker, and change all the content to what you want.

In UIKit usually people will recommend a UICollectionView rather than using a picker at this point, but in SwiftUI you may be able, instead, to achieve similar functionality with some kind of grid layout