以前都是说每逢佳节倍思亲,现在的工作状态是每到周末倍亲切,年底真的是加班加的没完没了的,也没时间写博客,也没时间学习,周末闲来无事看到一个比较有意思的旋转菜单,没事自己实战了一下感觉还不错,代码倒是没什么,主要是有两个技术点,一个就是布局文件,第二个就是动画旋转,关于布局文件是仁者见仁智者见智,只能自己研究,动画的话之前写过这方面的文章有兴趣的可以看下本人之前的博客,开始正题吧:
基础布局
先看下要实现的效果吧:
下面的主要是三个图片,一个半圆,两个版圆环,最外面的是三级菜单,中间的是二级菜单;
一级菜单布局:
二级菜单布局:
三级菜单布局,这个布局的时候需要注意的是左边的三个图片设置完之后,设置的是对称方向的最底部的一个图片,以此为依据搞定其他两个图标:
实现Demo
主要实现的主要就是两个按钮,一个按钮式最底层的按钮,一个是二级菜单的按钮:
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);
两个按钮的点击事件:
@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; } }
两个按钮都有点击点击事件,封装一个可以主要就是淡入和淡出的效果:
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); }}
最后看下效果图:
链接: http://pan.baidu.com/s/1jGh3Qse 密码: wilw