Search code examples
iphonexcode4ios4

Radial Dial in Xcode


I am trying to make an app that uses a radial dial. As an example the radial dial features as availabel in this app

http://itunes.apple.com/us/app/kitchen-dial/id448558628?mt=8&ign-mpt=uo%3D4

What I wanted to ask is what method should I use to accomplish this? Guys, I am not asking you to write the code for me what I am asking is how is this done conceptually? I mean when a user swipses left/right on the screen how does it know which radial dial to move and in which direction. I am sure there are multiple buttons and there is some image transition going on here. I need to understand the concept of making such a thing. If anyone know or has done something similar please do share your thoughts. Does apple has a sample code for this? Thank you.


Solution

  • The central concepts are:

    • Ability to rotate an image around a center point.

    • Ability to calculate an angle relative to the center point given an x,y coordinate.

    So, to move the wheel:

    • On touch began:
      • Calculate starting angle based on x,y
    • On touch moved:
      • Calculate new angle based on x,y and subtract starting angle. This is the angle delta (or how much more to rotate the image by).

    To register button taps on the wheel:

    • On tap:
      • Calculate angle based on x,y, add existing rotation, divide by the angle size of each segment to get an index.

    You asked for a high-level explanation of the concepts - and that's pretty much it.