Group Group Group Group Group Group Group Group Group Forums

How To Create a Rotating Wheel Control with UIKit

This is a post whew you will learn how to build custom Rotating Wheel Control with UIKit, written by iOS Tutorial Team member Cesare Rocchi, a UX designer and developer specializing in web and mobile applications. There may be times you’ve downloaded a cool application with a new kind of user interface component, and you’ve […]

This is a companion discussion topic for the original entry at
1 Like

If possible could you please create a tutorial on Rotating Wheel Control with UIKit using Swift 3?
Thanks in advance

First of all, thank you sooo much for sharing your code and creating such a wonderful tutorial. I’ve ported it over to C# and am using it in one of my projects.

I have 2 things I am completely stumped on and would love to know to do it. I’ve tried several things but I’m not great at trig :).

  1. I’d like to be able to change where the “currentSector” is. For instance, if the imageview that is selected appears in the bottom center of the screen, then it is the currentSector.
  2. If I want the position of the actual images not to rotate. I’m going for the ferris wheel effect.

Any help, suggestions or direction would be greatly appreciated.

Hey @technified

  1. you need a “new zero” as a starting point, which would be 4.7 radians in the post (or -0.78).
    As for 2), you mean you’d like the frame of the wheel to spin and keep the slices fixed?
    In that case the logic of the stop point is still valid but you’ll apply the rotation to the external circle.
1 Like

Ah! Ok so I need to modify the midpoint when building the sectors. I’ll give that a try!

As for question #2, I’m trying to make a Ferris wheel effect. Based on your response, the container is the outer circle or would I need an additional? I’m at work now but will give your suggestions a try this evening.

Once again, thank you!

Ray, I’m so close but there is something I am failing to understand. I have 6 sectors that are 1.04 radians each.
Let’s say I set my midpoint to 5.20 (that should represent the bottom center sector, I believe). What I’m trying to do is put a check in place where whatever UIview is in the bottom center of the parent container is the only one that is selectable. I have a Gesture recognizer attached to the view that appears in the bottom center of the parent container so that I can open another view. If the bottom center view is not tapped then the control should spin otherwise it should open the view attached to the selected option.

I hope this makes sense and if you need a visual please let me know.
Thanks for all your help!

Honestly I didn’t understand what you are trying to achieve :frowning:

My apologies. Maybe this visual will help me explain it better.

On my initial rotation of the container, the Green circle should be the highlighted subview.
Once I rotate the 2nd time, the red subview should be the highlighted subview. I thought that by setting the midpoint, it would change which subview should be highlighted but that doesn’t seem to be the case.

Also, once I rotate the 2nd time my number 6 is now upside down.

The container is the parent view. Each of the spheres are UIViews that contain an ImageView. The ImageView contains the text.

If you want to keep the text oriented correctly you’ll need to compensate for the rotation.
For example, if you rotate the yellow container by 0.30 you should rotate the labels (and probably also the images) by -0.30

1 Like

What would be the best way to go further and after user action make forth animation like in the scroll view with slowing down movement according pan gesture velocity?

Thank you so much.
Just reworked all the code for Swift 4/XCode 9.
Excellent lesson with lots of guidance.

Feel free to check out Swift 4 code here:

This tutorial is more than six months old, so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]