一、效果图
二、主要的技术点
1.RelativeLayout布局
2.RotateAnimation旋转动画
三、需求
1.点击二级菜单中的“menu”键控制三级菜单的进入和退出动画效果；
2.点击一级菜单中的“home”键控制二级和三级菜单的进入和退出效果；
3.点击手机上的菜单键控制一级、二级和三级菜单的进入和退出效果。
四、实例代码
1.布局文件：activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> <RelativeLayout android:id="@+id/rl_level1" android:layout_width="100dp" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:background="@drawable/level1" > <ImageView android:id="@+id/iv_icon_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/icon_home" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl_level2" android:layout_width="180dp" android:layout_height="90dp" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:background="@drawable/level2" > <ImageView android:id="@+id/iv_icon_search" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_margin="3dp" android:src="@drawable/icon_search" /> <ImageView android:id="@+id/iv_icon_menu" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:src="@drawable/icon_menu" /> <ImageView android:id="@+id/iv_icon_myyouku" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignTop="@id/iv_icon_search" android:layout_marginRight="3dp" android:src="@drawable/icon_myyouku" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl_level3" android:layout_width="280dp" android:layout_height="140dp" android:layout_alignParentBottom="true" android:layout_centerInParent="true" android:background="@drawable/level3" > <ImageView android:id="@+id/iv_channel1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_margin="3dp" android:src="@drawable/channel1" /> <ImageView android:id="@+id/iv_channel2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:layout_marginLeft="25dp" android:src="@drawable/channel2" /> <ImageView android:id="@+id/iv_channel3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="75dp" android:layout_marginLeft="55dp" android:src="@drawable/channel3" /> <ImageView android:id="@+id/iv_channel4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:src="@drawable/channel4" /> <ImageView android:id="@+id/iv_channel5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="75dp" android:layout_marginRight="55dp" android:src="@drawable/channel5" /> <ImageView android:id="@+id/iv_channel6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="40dp" android:layout_marginRight="25dp" android:src="@drawable/channel6" /> <ImageView android:id="@+id/iv_channel7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_margin="3dp" android:src="@drawable/channel7" /> </RelativeLayout> </RelativeLayout>
2.设置旋转动画：MyUtils.java
package com.gnnuit.youkumenu; import android.view.animation.RotateAnimation; import android.widget.RelativeLayout; public class MyUtils { /** * 设置View退出时的旋转动画 * * @param offset * 动画执行的延迟时间 * @param view */ public static void startAnimationOut(RelativeLayout view, long offset) { // 旋转动画，（1）必须确定旋转圆心，默认是View的左上角；（2）设置旋转方向，右边是0度，左边是180度，上边是270度，下边是90度，顺时针是从0到180 // 设置顺时针退出，从0到180 RotateAnimation rotateAnimation = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight()); rotateAnimation.setDuration(300); rotateAnimation.setFillAfter(true);// 动画执行完后，保持最后的状态 rotateAnimation.setStartOffset(offset);// 设置延迟执行 view.startAnimation(rotateAnimation); } /** * 设置View进入时的旋转动画 * * @param offset * 动画执行的延迟时间 * @param view */ public static void startAnimationIn(RelativeLayout view, long offset) { // 设置顺时针进入，从180到360 RotateAnimation rotateAnimation = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight()); rotateAnimation.setDuration(300); rotateAnimation.setFillAfter(true); rotateAnimation.setStartOffset(offset); view.startAnimation(rotateAnimation); } }
3.主界面：MainActivity.java
package com.gnnuit.youkumenu; import android.os.Bundle; import android.app.Activity; import android.view.KeyEvent; import android.view.View; import android.view.View.OnClickListener; import android.widget.ImageView; import android.widget.RelativeLayout; public class MainActivity extends Activity implements OnClickListener { private ImageView iv_icon_home; private ImageView iv_icon_menu; private RelativeLayout rl_level1; private RelativeLayout rl_level2; private RelativeLayout rl_level3; private boolean isLevel3Show = true;// 控制三级菜单当前是否处于显示状态 private boolean isLevel2Show = true;// 控制二级菜单当前是否处于显示状态 private boolean isLevel1Show = true;// 控制一级菜单当前是否处于显示状态 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); iv_icon_home = (ImageView) findViewById(R.id.iv_icon_home); iv_icon_menu = (ImageView) findViewById(R.id.iv_icon_menu); rl_level1 = (RelativeLayout) findViewById(R.id.rl_level1); rl_level2 = (RelativeLayout) findViewById(R.id.rl_level2); rl_level3 = (RelativeLayout) findViewById(R.id.rl_level3); iv_icon_home.setOnClickListener(this); iv_icon_menu.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.iv_icon_menu:// 二级菜单Menu的点击事件 if (isLevel3Show) { // 三级菜单当前处于显示状态，关闭三级菜单 MyUtils.startAnimationOut(rl_level3, 0); isLevel3Show = false; } else { // 三级菜单当前处于关闭状态，显示三级菜单 MyUtils.startAnimationIn(rl_level3, 0); isLevel3Show = true; } break; case R.id.iv_icon_home:// 一级级菜单Home的点击事件 if (isLevel2Show && isLevel3Show) { // 二级和三级菜单当前都处于显示状态，则依次关闭三级菜单，二级菜单 MyUtils.startAnimationOut(rl_level3, 0); MyUtils.startAnimationOut(rl_level2, 200); isLevel2Show = false; isLevel3Show = false; } else if (isLevel2Show) { // 二级菜单当前处于显示状态，三级菜单当前处于关闭状态，关闭二级菜单 MyUtils.startAnimationOut(rl_level2, 0); isLevel2Show = false; } else { // 二级菜单当前处于关闭状态，显示二级菜单 MyUtils.startAnimationIn(rl_level2, 0); isLevel2Show = true; } break; default: break; } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_MENU) { if (isLevel1Show) { // 一级菜单当前处于显示状态，关闭一级，二级，三级菜单 if (isLevel3Show) {// 三级菜单当前处于显示状态，则一级，二级也处于显示状态 MyUtils.startAnimationOut(rl_level3, 0); MyUtils.startAnimationOut(rl_level2, 200); MyUtils.startAnimationOut(rl_level1, 300); isLevel1Show = false; isLevel2Show = false; isLevel3Show = false; } else if (isLevel2Show) {// 二级菜单当前处于显示状态，则一级也处于显示状态 MyUtils.startAnimationOut(rl_level2, 0); MyUtils.startAnimationOut(rl_level1, 200); isLevel1Show = false; isLevel2Show = false; } else { MyUtils.startAnimationOut(rl_level1, 0); isLevel1Show = false; } } else { // 一级菜单当前处于关闭状态，显示一级，二级菜单 MyUtils.startAnimationIn(rl_level1, 0); MyUtils.startAnimationIn(rl_level2, 200); isLevel1Show = true; isLevel2Show = true; } } return super.onKeyDown(keyCode, event); } }