2

I am interested in implementing a user interface navigation control mechanism based on a wheel shaped device (or pie chart shaped or circle shaped) in my Android app.

I would like only half of the wheel to be visible at any time. That is, only the top half of the wheel should be visible since the bottom half should be below the border of the screen. The user can then turn the 'half wheel' to show options hidden by the screen border. The visible top half should then be divided into three parts like a pie chart, so the user can press either one of them to invoke some action. The following pic should explain (it is an example with seven (A-G) options).

https://i.stack.imgur.com/BZF3x.jpg

The rotation itself should not be hard, but I am having a hard time understanding how to position the wheel so that half of it is outside the actual screen. I am thinking that loading the entire wheel (but hiding half of it) is best, since that is that graphics I have and it will also allow a smooth animation when the user swipes to show some other options. How can I make Android show the wheel in this way?

Also. Any comment on how to implement the 'swipe along the wheel shape' would be appreciated.

Thank you.

AHaahr
  • 409
  • 1
  • 4
  • 16
  • 1
    You don't need to do anything. Just draw the entire wheel wherever you want it. If the parent view has clipping for it's children set to it's bounds (http://developer.android.com/guide/topics/ui/how-android-draws.html), then the pixels you draw just "disappear". If you don't clip, then they're drawn to the backing bitmap but dont' show because they're injected into the user's hand. Or, you could draw to a bitmap, then clip the bitmap, then draw the bitmap on the view's canvas in onDraw() – Simon Oct 02 '12 at 16:43
  • Thank you, Simon. Finally had some time to look more at this. – AHaahr Oct 04 '12 at 15:03
  • 1
    "...then they're drawn to the backing bitmap but don't show because they're injected into the user's hand." This was exactly what I had in mind. "You don't need to do anything. Just draw the entire wheel wherever you want it." I was thinking that would be easy to do, but given a View (I made a WheelView that extends ImageView), how would you move it on the screen? With myWheelView.left() and myWheelView.top? That does not seem right (especially since .left() and .top() takes pixels as arguments. I would much prefer to use dp. – AHaahr Oct 04 '12 at 15:09

1 Answers1

1

So for the wheel - you are hving trouble knowing how to position the wheel because you are using XML to align you objects and would like to use something like "Align Object Center To Bottom" which does not exist. Here is one approach that might work fine: Mask the wheel view.

Is it possible to mask a View in android?

As for swipe the wheel along, I would register the wheel to take touche events, and use only the horizontal componenet of move events to apply to the rotation of the wheel. This setup is common in audio software that uses knobs.

However if you want to have it stick to the users finger in a more realistic fashion, you will need to do the following:

  1. When the user first touches the wheel, calculate the angle from the wheel center to the finger.

  2. Every time the finger moves, check the angle from the wheel center to the finger - and rotate the wheel the amount that the angle has changed from the last touch event.

The formula for getting the angle between two points is this:

Float angleInRadians = Math.atan2(point1.y-point2.y, point1.x-point2.x);
Community
  • 1
  • 1
Plastic Sturgeon
  • 12,527
  • 4
  • 33
  • 47