Android 高仿【优酷】圆盘旋转菜单 的实现

分类：android 2012-08-22 08:16 1393人阅读 评论(9) 收藏 举报

目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要.

比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.

该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果

首先，看下效果：

以下是具体的代码及解释:

1. 菜单布局文件:

大家看到主要有三个RalativeLayout，就是大家看到的三层，但是关于图片的倾斜 是怎样实现的呢？实际上是个假象，图片是正放的，里面图像是倾斜的

[java] view plain copy

1. <RelativeLayoutxmlns: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;

[java] view plain copy

1. importandroid.os.Bundle;
2. importandroid.app.Activity;
3. importandroid.view.Menu;
4. importandroid.view.View;
5. importandroid.view.View.OnClickListener;
6. importandroid.widget.ImageButton;
7. importandroid.widget.RelativeLayout;
9. publicclassMainActivityextendsActivity{
11. privateImageButtonhome;
12. privateImageButtonmenu;
13. privateRelativeLayoutlevel2;
14. privateRelativeLayoutlevel3;
16. privatebooleanisLevel2Show=true;
17. privatebooleanisLevel3Show=true;
19. @Override
20. publicvoidonCreate(BundlesavedInstanceState){
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(newOnClickListener(){
32. @Override
33. publicvoidonClick(Viewv){
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(newOnClickListener(){
48. @Override
49. publicvoidonClick(Viewv){
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:

[java] view plain copy

1. importandroid.view.View;
2. importandroid.view.ViewGroup;
3. importandroid.view.animation.Animation;
4. importandroid.view.animation.Animation.AnimationListener;
5. importandroid.view.animation.RotateAnimation;
7. publicclassMyAnimation{
8. //入动画
9. publicstaticvoidstartAnimationIN(ViewGroupviewGroup,intduration){
10. for(inti=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. Animationanimation;
17. /**
18. *旋转动画
19. *RotateAnimation(fromDegrees,toDegrees,pivotXType,pivotXValue,pivotYType,pivotYValue)
20. *fromDegrees开始旋转角度
21. *toDegrees旋转到的角度
22. *pivotXTypeX轴参照物
23. *pivotXValuex轴旋转的参考点
24. *pivotYTypeY轴参照物
25. *pivotYValueY轴旋转的参考点
26. */
27. animation=newRotateAnimation(-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. publicstaticvoidstartAnimationOUT(finalViewGroupviewGroup,intduration,intstartOffSet){
37. Animationanimation;
38. animation=newRotateAnimation(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(newAnimationListener(){
44. @Override
45. publicvoidonAnimationStart(Animationanimation){
46. //TODOAuto-generatedmethodstub
48. }
50. @Override
51. publicvoidonAnimationRepeat(Animationanimation){
52. //TODOAuto-generatedmethodstub
54. }
56. @Override
57. publicvoidonAnimationEnd(Animationanimation){
58. for(inti=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.

源代码下载地址

http://download.csdn.net/detail/t12x3456/4518220

更多相关文章

1. 改用 Android(安卓)之后 II
2. android：同时弹出顶部和底部菜单的做法
3. Android之framework修改底部导航栏NavigationBar动态显示和隐藏
4. Android菜单系统介绍
5. Android(安卓)解决android4.0系统中菜单(Menu)添加Icon无效问题
6. 【Android(安卓)开发】：UI控件之 ImageView 实现图片旋转和缩放功
7. Android仿人人客户端（v5.7.1）——有关滑动式左侧菜单实现过程中网
8. android动画的透明度渐变、旋转动画、缩放动画、评议动画
9. Android(安卓)实现底部导航切换的几种方式

随机推荐

1. android 记事本
2. Android Stdio实现简单计算器
3. Android实现录制视频
4. Android 使用内容解析者往短信数据库里插
5. android工程没有gen路径
6. 移植Busybox到Android平台
7. android 上传文件到服务器
8. android关机充电的奥妙所在（留着以后用）
9. 【Android】 dialog 设置maxHeight 最大
10. Android Handler不同界面发送数据