Android--简单的三级菜单

关于这个菜单应该在很多播放器应用里面可以看见，直接先上两张效果图吧，一张是该Demo的效果图，一张是优酷手机客户端的效果图。

                                                       

DEMO的效果图                                                                   优酷手机客户端界面

因为没有时间去自己制作图标，所以Demo里面采用的就是优酷手机客户端里的图标了。

一、布局

首先从效果图中可以看出来，该菜单界面分成了三层，所以，我们采用RelativeLayout布局方式来排列这三层菜单背景。

其次，在每一层菜单中，每一个图标也是相对于自己菜单级有固定位置的，所以每一个菜单级也采用RelativeLayout布局方式。

既然布局方式都分析清楚了，那么就可以直接开始写布局文件了。需要注意的就是，每一个图标之间相对位置的摆放，这样才能使整体效果更好。

<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"
    tools:context=".MainActivity" >

    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dip"
        android:layout_height="50dip"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_home"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dip"
        android:layout_height="90dip"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >

        <ImageView
            android:id="@+id/icon_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_search"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dip"/>

        <ImageView
            android:id="@+id/icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_menu"
            android:layout_marginTop="5dip"
            android:layout_centerHorizontal="true"/>

        <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_myyouku"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dip"/>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dip"
        android:layout_height="140dip"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3" >

        <ImageView
            android:id="@+id/channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel1"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="10dip"
            android:layout_marginBottom="10dip"/>

        <ImageView
            android:id="@+id/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel2"
            android:layout_above="@id/channel1"
            android:layout_alignLeft="@id/channel1"
            android:layout_marginLeft="18dip"
            android:layout_marginBottom="6dip"/>

        <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:background="@drawable/channel3"
            android:layout_marginLeft="30dip"
            android:layout_marginBottom="6dip"/>

        <ImageView
            android:id="@+id/channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dip"/>

        <ImageView
            android:id="@+id/channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel7"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dip"
            android:layout_marginBottom="10dip"/>

        <ImageView
            android:id="@+id/channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel6"
            android:layout_above="@id/channel7"
            android:layout_alignRight="@id/channel7"
            android:layout_marginRight="18dip"
            android:layout_marginBottom="6dip"/>

        <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:background="@drawable/channel5"
            android:layout_marginRight="30dip"
            android:layout_marginBottom="6dip"/>

    </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可以隐藏或显示全部菜单的效果。

四、Demo下载

点我下载Demo   o(︶︿︶)o