Android 高仿【優酷】圓盤旋轉菜單 的實現

目前，用戶對安卓應用程序的UI設計要求越來越高,因此，掌握一些新穎的設計很有必要.

比如菜單，傳統的菜單已經不能滿足用戶的需求. 其中優酷中圓盤旋轉菜單的實現就比較好.

該菜單共分裡外三層導航菜單.可以依次從外向裡關閉三層菜單，也可以反向打開，並且伴有圓盤旋轉的動畫效果。

首先，看下效果：

以下是具體的代碼及解釋:

1. 菜單布局文件:

大家看到主要有三個RalativeLayout，就是大家看到的三層，但是關於圖片的傾斜 是怎樣實現的呢？實際上是個假象，圖片是正放的，裡面圖像是傾斜的。

1. <RelativeLayout xmlns:Android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent" >
6. <RelativeLayout
7. android:layout_width="100dip"
8. android:layout_height="50dip"
9. android:layout_alignParentBottom="true"
10. android:layout_centerHorizontal="true"
11. android:background="@drawable/level1" >
13. <ImageButton
14. android:id="@+id/home"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_centerInParent="true"
18. android:background="@drawable/icon_home" />
19. </RelativeLayout>
21. <RelativeLayout
22. android:layout_width="180dip"
23. android:layout_height="90dip"
24. android:layout_alignParentBottom="true"
25. android:layout_centerHorizontal="true"
26. android:id="@+id/level2"
27. android:background="@drawable/level2" >
29. <ImageButton
30. android:id="@+id/search"
31. android:layout_width="wrap_content"
32. android:layout_height="wrap_content"
33. android:layout_alignParentBottom="true"
34. android:layout_margin="10dip"
35. android:background="@drawable/icon_search" />
37. <ImageButton
38. android:id="@+id/menu"
39. android:layout_width="wrap_content"
40. android:layout_height="wrap_content"
41. android:layout_centerHorizontal="true"
42. android:layout_margin="6dip"
43. android:background="@drawable/icon_menu" />
45. <ImageButton
46. android:id="@+id/myyouku"
47. android:layout_width="wrap_content"
48. android:layout_height="wrap_content"
49. android:layout_alignParentBottom="true"
50. android:layout_alignParentRight="true"
51. android:layout_margin="10dip"
52. android:background="@drawable/icon_myyouku" />
53. </RelativeLayout>
55. <RelativeLayout
56. android:layout_width="280dip"
57. android:layout_height="140dip"
58. android:layout_alignParentBottom="true"
59. android:layout_centerHorizontal="true"
60. android:id="@+id/level3"
61. android:background="@drawable/level3" >
63. <ImageButton
64. android:id="@+id/c1"
65. android:layout_width="wrap_content"
66. android:layout_height="wrap_content"
67. android:layout_alignParentBottom="true"
68. android:layout_marginBottom="6dip"
69. android:layout_marginLeft="12dip"
70. android:background="@drawable/channel1" />
72. <ImageButton
73. android:id="@+id/c2"
74. android:layout_width="wrap_content"
75. android:layout_height="wrap_content"
76. android:layout_above="@id/c1"
77. android:layout_marginBottom="12dip"
78. android:layout_marginLeft="28dip"
79. android:background="@drawable/channel2" />
81. <ImageButton
82. android:id="@+id/c3"
83. android:layout_width="wrap_content"
84. android:layout_height="wrap_content"
85. android:layout_above="@id/c2"
86. android:layout_marginBottom="6dip"
87. android:layout_marginLeft="8dip"
88. android:layout_toRightOf="@id/c2"
89. android:background="@drawable/channel3" />
91. <ImageButton
92. android:id="@+id/c4"
93. android:layout_width="wrap_content"
94. android:layout_height="wrap_content"
95. android:layout_centerHorizontal="true"
96. android:layout_margin="6dip"
97. android:background="@drawable/channel4" />
99. <ImageButton
100. android:id="@+id/c5"
101. android:layout_width="wrap_content"
102. android:layout_height="wrap_content"
103. android:layout_above="@+id/c6"
104. android:layout_marginBottom="6dip"
105. android:layout_marginRight="8dip"
106. android:layout_toLeftOf="@+id/c6"
107. android:background="@drawable/channel5" />
109. <ImageButton
110. android:id="@+id/c6"
111. android:layout_width="wrap_content"
112. android:layout_height="wrap_content"
113. android:layout_above="@+id/c7"
114. android:layout_marginBottom="12dip"
115. android:layout_marginRight="28dip"
116. android:layout_alignParentRight="true"
117. android:background="@drawable/channel6" />
120. <ImageButton
121. android:id="@+id/c7"
122. android:layout_width="wrap_content"
123. android:layout_height="wrap_content"
124. android:layout_alignParentBottom="true"
125. android:layout_marginBottom="6dip"
126. android:layout_marginRight="12dip"
127. android:layout_alignParentRight="true"
128. android:background="@drawable/channel7" />
129. </RelativeLayout>
131. </RelativeLayout>

2. MainActivity;

1. import android.os.Bundle;
2. import android.app.Activity;
3. import android.view.Menu;
4. import android.view.View;
5. import android.view.View.OnClickListener;
6. import android.widget.ImageButton;
7. import android.widget.RelativeLayout;
9. public class MainActivity extends Activity {
11. private ImageButton home;
12. private ImageButton menu;
13. private RelativeLayout level2;
14. private RelativeLayout level3;
16. private boolean isLevel2Show = true;
17. private boolean isLevel3Show = true;
19. @Override
20. public void onCreate(Bundle savedInstanceState) {
21. super.onCreate(savedInstanceState);
22. setContentView(R.layout.activity_main);
24. home = (ImageButton) findViewById(R.id.home);
25. menu = (ImageButton) findViewById(R.id.menu);
27. level2 = (RelativeLayout) findViewById(R.id.level2);
28. level3 = (RelativeLayout) findViewById(R.id.level3);
30. menu.setOnClickListener(new OnClickListener() {
32. @Override
33. public void onClick(View v) {
34. if(isLevel3Show){
35. //隱藏3級導航菜單
36. MyAnimation.startAnimationOUT(level3, 500, 0);
37. }else {
38. //顯示3級導航菜單
39. MyAnimation.startAnimationIN(level3, 500);
40. }
42. isLevel3Show = !isLevel3Show;
43. }
44. });
46. home.setOnClickListener(new OnClickListener() {
48. @Override
49. public void onClick(View v) {
50. if(!isLevel2Show){
51. //顯示2級導航菜單
52. MyAnimation.startAnimationIN(level2, 500);
53. } else {
54. if(isLevel3Show){
55. //隱藏3級導航菜單
56. MyAnimation.startAnimationOUT(level3, 500, 0);
57. //隱藏2級導航菜單
58. MyAnimation.startAnimationOUT(level2, 500, 500);
59. isLevel3Show = !isLevel3Show;
60. }
61. else {
62. //隱藏2級導航菜單
63. MyAnimation.startAnimationOUT(level2, 500, 0);
64. }
65. }
66. isLevel2Show = !isLevel2Show;
67. }
68. });
70. }
72. }

3. 自定義動畫類MyAnimation:

1. import android.view.View;
2. import android.view.ViewGroup;
3. import android.view.animation.Animation;
4. import android.view.animation.Animation.AnimationListener;
5. import android.view.animation.RotateAnimation;
7. public class MyAnimation {
8. //入動畫
9. public static void startAnimationIN(ViewGroup viewGroup, int duration){
10. for(int i = 0; i < viewGroup.getChildCount(); i++ ){
11. viewGroup.getChildAt(i).setVisibility(View.VISIBLE);//設置顯示
12. viewGroup.getChildAt(i).setFocusable(true);//獲得焦點
13. viewGroup.getChildAt(i).setClickable(true);//可以點擊
14. }
16. Animation animation;
17. /**
18. * 旋轉動畫
19. * RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)
20. * fromDegrees 開始旋轉角度
21. * toDegrees 旋轉到的角度
22. * pivotXType X軸 參照物
23. * pivotXValue x軸 旋轉的參考點
24. * pivotYType Y軸 參照物
25. * pivotYValue Y軸 旋轉的參考點
26. */
27. animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
28. animation.setFillAfter(true);//停留在動畫結束位置
29. animation.setDuration(duration);
31. viewGroup.startAnimation(animation);
33. }
35. //出動畫
36. public static void startAnimationOUT(final ViewGroup viewGroup, int duration , int startOffSet){
37. Animation animation;
38. animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
39. animation.setFillAfter(true);//停留在動畫結束位置
40. animation.setDuration(duration);
41. animation.setStartOffset(startOffSet);
42. animation.setAnimationListener(new AnimationListener() {
44. @Override
45. public void onAnimationStart(Animation animation) {
46. // TODO Auto-generated method stub
48. }
50. @Override
51. public void onAnimationRepeat(Animation animation) {
52. // TODO Auto-generated method stub
54. }
56. @Override
57. public void onAnimationEnd(Animation animation) {
58. for(int i = 0; i < viewGroup.getChildCount(); i++ ){
59. viewGroup.getChildAt(i).setVisibility(View.GONE);//設置顯示
60. viewGroup.getChildAt(i).setFocusable(false);//獲得焦點
61. viewGroup.getChildAt(i).setClickable(false);//可以點擊
62. }
64. }
65. });
67. viewGroup.startAnimation(animation);
68. }
69. }

這樣，一個高仿優酷三級導航圓盤旋轉菜單就完成了.，以後完全可以借鑒這些優秀的UI設計，甚至根據新的需求,可以做出更好的UI。