Android UI-底部旋转菜单栏
以前都是说每逢佳节倍思亲,现在的工作状态是每到周末倍亲切,年底真的是加班加的没完没了的,也没时间写博客,也没时间学习,周末闲来无事看到一个比较有意思的旋转菜单,没事自己实战了一下感觉还不错,代码倒是没什么,主要是有两个技术点,一个就是布局文件,第二个就是动画旋转,关于布局文件是仁者见仁智者见智,只能自己研究,动画的话之前写过这方面的文章有兴趣的可以看下本人之前的博客,开始正题吧: 基础布局 先看下要实现的效果吧: 下面的主要是三个图片,一个半圆,两个版圆环,最外面的是三级菜单,中间的是二级菜单; 一级菜单布局: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout android:id= "@+id/menuFirst" android:layout_width= "100dp" android:layout_height= "50dp" android:layout_alignParentBottom= "true" android:layout_centerHorizontal= "true" android:background= "@drawable/menu1" > <ImageView android:id= "@+id/icon_home" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_centerInParent= "true" android:background= "@drawable/icon_home" /> </RelativeLayout> 二级菜单布局: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <RelativeLayout android:id= "@+id/menuSecond" android:layout_width= "170dp" android:layout_height= "90dp" android:layout_alignParentBottom= "true" android:layout_centerHorizontal= "true" android:background= "@drawable/menu2" > <ImageView android:id= "@+id/icon_search" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignParentBottom= "true" android:layout_margin= "8dp" android:background= "@drawable/icon_search" /> <ImageView android:id= "@+id/icon_menu" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_centerHorizontal= "true" android:layout_marginTop= "5dp" android:background= "@drawable/icon_menu" /> <ImageView android:id= "@+id/icon_center" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignParentBottom= "true" android:layout_alignParentRight= "true" android:layout_margin= "8dp" android:background= "@drawable/icon_center" /> </RelativeLayout> 三级菜单布局,这个布局的时候需要注意的是左边的三个图片设置完之后,设置的是对称方向的最底部的一个图片,以此为依据搞定其他两个图标: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <RelativeLayout android:id= "@+id/menuThird" android:layout_width= "270dp" android:layout_height= "140dp" android:layout_alignParentBottom= "true" android:layout_centerHorizontal= "true" android:background= "@drawable/menu3" > <ImageView android:id= "@+id/channel1" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignParentBottom= "true" android:layout_marginBottom= "8dp" android:layout_marginLeft= "8dp" android:background= "@drawable/channel1" /> <ImageView android:id= "@+id/channel2" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_above= "@id/channel1" android:layout_alignLeft= "@id/channel1" android:layout_marginBottom= "8dp" android:layout_marginLeft= "16dp" android:background= "@drawable/channel2" /> <ImageView android:id= "@+id/channel3" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_above= "@id/channel2" android:layout_alignLeft= "@id/channel2" android:layout_marginBottom= "8dp" android:layout_marginLeft= "30dp" android:background= "@drawable/channel3" /> <ImageView android:id= "@+id/channel4" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_centerHorizontal= "true" android:layout_marginTop= "5dp" android:background= "@drawable/channel4" /> <ImageView android:id= "@+id/channel7" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_alignParentBottom= "true" android:layout_alignParentRight= "true" android:layout_marginBottom= "8dp" android:layout_marginRight= "8dp" android:background= "@drawable/channel7" /> <ImageView android:id= "@+id/channel6" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_above= "@id/channel7" android:layout_alignRight= "@id/channel7" android:layout_marginBottom= "8dp" android:layout_marginRight= "20dp" android:background= "@drawable/channel6" /> <ImageView android:id= "@+id/channel5" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_above= "@id/channel6" android:layout_alignRight= "@id/channel6" android:layout_marginBottom= "8dp" android:layout_marginRight= "30dp" android:background= "@drawable/channel5" /> </RelativeLayout> 实现Demo 主要实现的主要就是两个按钮,一个按钮式最底层的按钮,一个是二级菜单的按钮: 1 2 3 4 5 6 7 homeView = (ImageView) findViewById(R.id.icon_home); menuView = (ImageView) findViewById(R.id.icon_menu); menuFirst = (RelativeLayout) findViewById(R.id.menuFirst); menuSecond = (RelativeLayout) findViewById(R.id.menuSecond); menuThird = (RelativeLayout) findViewById(R.id.menuThird); homeView.setOnClickListener( this ); menuView.setOnClickListener( this ); 两个按钮的点击事件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.icon_home: if (isSecond) { MyHelper.StartAninationOut(menuSecond, 500 , 200 ); if (isThird) { MyHelper.StartAninationOut(menuThird, 500 , 300 ); isThird= false ; } } else { MyHelper.StartAninationIn(menuSecond, 500 , 300 ); } isSecond=!isSecond; break ; case R.id.icon_menu: if (isThird) { MyHelper.StartAninationOut(menuThird, 500 , 200 ); isThird= false ; } else { MyHelper.StartAninationIn(menuThird, 500 , 200 ); isThird= true ; } break ; default : break ; } } 两个按钮都有点击点击事件,封装一个可以主要就是淡入和淡出的效果: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 public class MyHelper { public static void StartAninationIn(RelativeLayout layout, long duratoin, long offset) { // TODO Auto-generated method stub RotateAnimation rotateAnimation= new RotateAnimation( 180 , 360 , layout.getWidth()/ 2 , layout.getHeight()); rotateAnimation.setDuration(duratoin); rotateAnimation.setFillAfter( true ); //保持旋转之后的状态 rotateAnimation.setStartOffset(offset); //延迟加载时间 layout.startAnimation(rotateAnimation); } public static void StartAninationOut(RelativeLayout layout, long duratoin, long offset) { // TODO Auto-generated method stub RotateAnimation rotateAnimation= new RotateAnimation( 0 , 180 , layout.getWidth()/ 2 , layout.getHeight()); rotateAnimation.setDuration(duratoin); rotateAnimation.setFillAfter( true ); rotateAnimation.setStartOffset(offset); layout.startAnimation(rotateAnimation); } } 最后看下效果图: 本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/4162283.html,如需转载请自行联系原作者