How To Create a Rotating Wheel Control?

Question

I am trying to implement the Rotatory wheel in android, just like the image displayed below.I came across the tutorial from this link. But i want to implement just as shown in the below image.The wheel consists of individual images.Does anybody have any idea regarding this implementation?? Any help would be appreciated.

Thanks in advance.

Akash

Answer 1

To do this from scratch, you would need a way to transform your touch coordinates, into polar coordinates (to have the rotation angle). This can be done easily like this:

private float cartesianToPolar(float x, float y) {
  return (float) -Math.toDegrees(Math.atan2(x - 0.5f, y - 0.5f));
}

To rotate the imageview, or the element you are using to display your knob, you can use a matrix like this:

Matrix matrix=new Matrix();
ivRotor.setScaleType(ScaleType.MATRIX);   
matrix.postRotate((float) deg, m_nWidth/2, m_nHeight/2);//getWidth()/2, getHeight()/2);
ivRotor.setImageMatrix(matrix);

Where deg is the angle and ivRobor is the knob imageview.

A complete working sample for Android, is available on Google code at: https://code.google.com/p/android-rotaryknob-view/

Answer 2

Applied on OnTouchListener on the imageView through which i got three events namely:

1. MotionEvent.ACTION_DOWN,
2. MotionEvent.ACTION_MOVE &
3. MotionEvent.ACTION_UP.

On MotionEvent.ACTION_DOWN got the angle where the users touches and on MotionEvent.ACTION_UP got the angle where user releases.

After getting difference of the two angles,rotated the image of that angle.

After rotating the image checked the quadrant through angle and maintained int variable which incremented according to the quadrant and by fulfilling the condition set the new image(the desired one).

Maintained the click event according to the value of the int variable.