关于这个菜单应该在很多播放器应用里面可以看见,直接先上两张效果图吧,一张是该Demo的效果图,一张是优酷手机客户端的效果图。
DEMO的效果图 优酷手机客户端界面
因为没有时间去自己制作图标,所以Demo里面采用的就是优酷手机客户端里的图标了。
一、布局
首先从效果图中可以看出来,该菜单界面分成了三层,所以,我们采用RelativeLayout布局方式来排列这三层菜单背景。
其次,在每一层菜单中,每一个图标也是相对于自己菜单级有固定位置的,所以每一个菜单级也采用RelativeLayout布局方式。
既然布局方式都分析清楚了,那么就可以直接开始写布局文件了。需要注意的就是,每一个图标之间相对位置的摆放,这样才能使整体效果更好。
二、MainActivity加载布局文件
在MainActivity.java中,通过onCreate()方法,来加载出布局文件。
三、实现动画效果和点击事件
首先分析可以得出,每一级菜单消失和出现的动画都是相似的,所以可以在此建立一个工具类,来统一编写动画效果的代码,在此建立MyUtils.java
整体的动画效果就分为,消失和出现,所以只用实现这两个方法就好了。
/** * 出现的动画效果* @param view 需要动画效果的view* @startOffset 需要延时执行的时间 */ public static void startAnimIn(RelativeLayout view, int startOffset) { RotateAnimation animation = new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight()); animation.setDuration(500); // 设置运行的时间 animation.setFillAfter(true); // 动画执行完以后保持最后的状态 animation.setStartOffset(startOffset); // 设置延时执行的时间 view.startAnimation(animation); }在代码中,采用了RotateAnimation这个类,来控制view的动画效果。我们需要的是一个旋转的动画效果,所以我们需要知道默认圆心为 view的左上角,在此需要设置为 view的中心,即(view.getWidth()/2, view.getHeight())根据同样的道理,只需要修改一样动画效果的旋转角度,就可以写出消失动画的效果/** * 让指定view 延时执行旋转离开的动画 * @param view * @param i 延时时间 */ public static void startAnimOut(RelativeLayout view, int startOffset) { RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight()); animation.setDuration(500); // 设置运行的时间 animation.setFillAfter(true); // 动画执行完以后保持最后的状态 animation.setStartOffset(startOffset); // 设置延时执行的时间 view.startAnimation(animation); }动画效果的类完成之后,就可以返回MainActivity中去监听按键的点击事件了。@Override public void onClick(View v) { switch (v.getId()) { case R.id.icon_menu: // 处理menu图标的点击事件 // 如果第三级菜单是显示状态,则将其隐藏 if(isLevel3Show) { // 隐藏 MyUtils.startAnimOut(level3,0); } else { // 显示 MyUtils.startAnimIn(level3,0); } isLevel3Show = !isLevel3Show; break; case R.id.icon_home: // 处理home图标的点击事件 // 如果二级菜单是显示状态,那么就隐藏2,3级菜单 if(isLevel2Show ) { MyUtils.startAnimOut(level2,0); isLevel2Show = false; if(isLevel3Show) { MyUtils.startAnimOut(level3,200); isLevel3Show = false; } } else { // 如果二级菜单是隐藏状态,那么就显示2级菜单 MyUtils.startAnimIn(level2,0); isLevel2Show = true; } break; default: break; } }最后就是修改Menu按键的事件,使按下Menu可以隐藏或显示全部菜单的效果。