Android simple disc menu

Today, I accidentally saw a menu in the disc shape, and it was quite interesting to turn it. Then I thought about it and made a simple effect.
The idea is this: Set an origin and a radius, and evenly distribute each menu around the circle. For easy calculation, the coordinates of the menu are expressed in degrees and then converted to polar coordinates.
Set a vertex as the starting point, and determine the degree of increase for each vertex based on the total number of menus. Then, determine the degree of each vertex in sequence, and then determine the coordinates.

Java code

1. Package chroya. Demo. roundspin;
   
3. Import Android. content. context;
   
4. Import Android. Graphics. Bitmap;
   
5. Import Android. Graphics. bitmapfactory;
   
6. Import Android. Graphics. Canvas;
   
7. Import Android. Graphics. color;
   
8. Import Android. Graphics. paint;
   
9. Import Android. util. log;
10. Import Android. View. motionevent;
    
11. Import Android. View. view;
13. /**
14. * Disc View
15. * @ Author chroya
16. *
17. */
18. Public class roundspinview
    Extends view {
19. Private paint mpaint = new paint ();
    
21. // Stone list
22. Private bigstone [] mstones;
    
23. // Number
24. Private Static
    Final int stone_count =
    6;
26. // Center Coordinate
27. Private int mpointx = 0, mpointy = 0;
    
28. // Radius
29. Private int mradius =
    0;
30. // Angle of interval between two points
31. Private int mdegreedelta;
    
33. Public roundspinview (context,
    Int PX, int py,
    Int radius ){
34. Super (context );
35. Mpaint. setcolor (color. Red );
36. Mpaint. setstrokewidth (2 );
    
37. Setbackgroundresource (R. drawable. menubkground );
39. Mpointx = px;
40. Mpointy = py;
41. Mradius = radius;
43. Setupstones ();
44. Computecoordinates ();
45. }
47. /**
48. * Initialize each vertex
49. */
50. Private void setupstones (){
    
51. Mstones = new bigstone [stone_count];
    
52. Bigstone stone;
53. Int angle = 0;
    
54. Mdegreedelta = 360/stone_count;
    
56. For (INT Index = 0; index <stone_count; index ++ ){
    
57. Stone = new bigstone ();
    
58. Stone. angle = angle;
59. Stone. Bitmap = bitmapfactory. decoderesource (getresources (), R. drawable. menu1 + index );
    
60. Angle + = mdegreedelta;
62. Mstones [Index] = stone;
63. }
64. }
66. /**
67. * Re-calculate the angle of each vertex
68. */
69. Private void resetstonesangle (float X,
    Float y ){
70. Int angle = computecurrentangle (x, y );
    
71. Log. D ("roundspinview ",
    "Angle:" + angle );
72. For (INT Index = 0; index <stone_count; index ++ ){
    
73. Mstones [Index]. angle = angle;
74. Angle + = mdegreedelta;
75. }
76. }
78. /**
79. * Calculate the coordinates of each vertex.
80. */
81. Private void computecoordinates (){
    
82. Bigstone stone;
83. For (INT Index = 0; index <stone_count; index ++ ){
    
84. Stone = mstones [Index];
85. Stone. x = mpointx + (float) (mradius * Math. Cos (stone. Angle * Math. PI/180 ));
    
86. Stone. Y = mpointy + (float) (mradius * Math. Sin (stone. Angle * Math. PI/180 ));
    
87. }
88. }
90. /**
91. * Calculate the angle of the first vertex.
92. * @ Param x
93. * @ Param y
94. * @ Return
95. */
96. Private int computecurrentangle (float X,
    Float y ){
97. Float distance = (float) math. SQRT (X-mpointx) * (X-mpointx) + (Y-mpointy) * (Y-mpointy )));
    
98. Int degree = (INT) (math. ACOs (X-mpointx)/distance) * 180/Math. Pi );
    
99. If (Y <mpointy ){
100. Degree =-degree;
101. }
103. Log. D ("roundspinview ",
     "X:" + x + ", Y:" + Y + ", Degree:" + degree );
     
104. Return degree;
105. }
107. @ Override
108. Public Boolean dispatchtouchevent (motionevent event ){
     
109. Resetstonesangle (event. getx (), event. Gety ());
110. Computecoordinates ();
111. Invalidate ();
112. Return true;
     
113. }
115. @ Override
116. Public void ondraw (canvas ){
     
117. Canvas. drawpoint (mpointx, mpointy, mpaint );
119. For (INT Index = 0; index <stone_count; index ++ ){
     
120. If (! Mstones [Index]. isvisible)
     Continue;
121. Drawincenter (canvas, mstones [Index]. bitmap, mstones [Index]. X, mstones [Index]. y );
     
122. // Skip the following sentence if you do not want a red line
     
123. // Canvas. drawline (mpointx, mpointy, mstones [Index]. X, mstones [Index]. Y, mpaint );
     
124. }
125. }
127. /**
128. * Place the center point in the center
129. * @ Param canvas
130. * @ Param bitmap
131. * @ Param left
132. * @ Param top
133. */
134. Void drawincenter (canvas, Bitmap bitmap,
     Float left, float top ){
     
135. Canvas. drawpoint (left, top, mpaint );
136. Canvas. drawbitmap (bitmap, left-bitmap.getWidth ()/2, top-bitmap.getHeight ()/2,
     Null );
137. }
139. Class bigstone {
141. // Image
142. Bitmap bitmap;
144. // Angle
145. Int angle;
147. // X coordinate
148. Float X;
150. // Y coordinate
151. Float y;
153. // Visible
154. Boolean isvisible = true;
     
155. }
156. }

Package chroya. demo. roundspin; import android. content. context; import android. graphics. bitmap; import android. graphics. bitmapfactory; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. util. log; import android. view. motionevent; import android. view. view;/*** disc view * @ author chroya **/public class roundspinview extends view {private paint mpaint = New paint (); // stone list private bigstone [] mstones; // Number of Private Static final int stone_count = 6; // center coordinate private int mpointx = 0, mpointy = 0; // radius private int mradius = 0; // The angle between each two points Private int mdegreedelta; Public roundspinview (context, int PX, int py, int radius) {super (context); mpaint. setcolor (color. red); mpaint. setstrokewidth (2); setbackgroundresource (R. drawable. menubkground); mpointx = px; mpointy = PY; mradius = radius; setupstones (); computecoordinates ();}/*** initialize each vertex */private void setupstones () {mstones = new bigstone [stone_count]; bigstone stone; int angle = 0; mdegreedelta = 360/stone_count; For (INT Index = 0; index <stone_count; index ++) {stone = new bigstone (); stone. angle = angle; stone. bitmap = bitmapfactory. decoderesource (getresources (), R. drawable. menu1 + index); angle + = mdegreedelta; mstones [I Ndex] = stone ;}}/*** recalculate the angle of each vertex */private void resetstonesangle (float X, float y) {int angle = computecurrentangle (x, y ); log. D ("roundspinview", "angle:" + angle); For (INT Index = 0; index <stone_count; index ++) {mstones [Index]. angle = angle; angle + = mdegreedelta;}/*** calculate the coordinates of each vertex */private void computecoordinates () {bigstone stone; For (INT Index = 0; index <stone_count; index ++) {stone = mstones [Index]; ston E. X = mpointx + (float) (mradius * Math. cos (stone. angle * Math. PI/180); stone. y = mpointy + (float) (mradius * Math. sin (stone. angle * Math. PI/180);}/*** calculate the angle of the first vertex * @ Param x * @ Param y * @ return */private int computecurrentangle (float X, float y) {float distance = (float) math. SQRT (X-mpointx) * (X-mpointx) + (Y-mpointy) * (Y-mpointy); int degree = (INT) (math. ACOs (X-mpointx)/distance) * 180/math. pi); If (Y <Mpointy) {degree =-degree;} log. D ("roundspinview", "X:" + x + ", Y:" + Y + ", Degree:" + degree); Return degree ;} @ overridepublic Boolean dispatchtouchevent (motionevent event) {resetstonesangle (event. getx (), event. gety (); computecoordinates (); invalidate (); Return true ;}@ overridepublic void ondraw (canvas) {canvas. drawpoint (mpointx, mpointy, mpaint); For (INT Index = 0; index <stone_count; index ++) {If (! Mstones [Index]. isvisible) continue; drawincenter (canvas, mstones [Index]. bitmap, mstones [Index]. x, mstones [Index]. y); // if you do not want to have a red line, delete the following sentence: // canvas. drawline (mpointx, mpointy, mstones [Index]. x, mstones [Index]. y, mpaint) ;}}/*** place the central point to the center * @ Param canvas * @ Param bitmap * @ Param left * @ Param top */void drawincenter (canvas, bitmap bitmap, float left, float top) {canvas. drawpoint (left, top, mpaint); canvas. drawbitmap (bitmap, left-bitmap.getWidth ()/2, top-bitmap.getHeight ()/2, null);} class bigstone {// picture Bitmap bitmap; // angle int angle; // X coordinate float X; // y coordinate float y; // Boolean isvisible = true ;}}

The comments in the Code are also clear. Stone_count indicates the number of menus, which can be set to 1 to 7. A larger number must be supported by images. I only put seven images.

If the touch point is not on the circumference, the intersection of the straight line from the point to the center of the circle is automatically calculated and mapped.

The following figure shows the effect of the five menus:

Effects of the six menus:

OK, and the code is also contributed.

 

Zhuanzi: http://chroya.iteye.com/blog/830682