Android简易实战教程--第二十三话《绚丽的菜单项》

转载本博客请注明出处：点击打开链接  http://blog.csdn.net/qq_32059827/article/details/52327456

今天这篇稍微增强点代码量，可能要多花上5分钟喽。

本篇完成一个稍微显得绚丽的菜单项，模仿优酷选择菜单。如果想对其中的任意一项实现点击功能，自行加入即可。

现在就一步一步做出这个小案例：

在实现功能前，先看一下完成的结果，可能能对代码更好的理解。

效果演示：

PS:由于代码中做出了详细的解释，不再做过多的赘述。

首先自定义组合控件布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" >

    <RelativeLayout
        android:id="@+id/rl_level3"
        android:layout_width="320dip"
        android:layout_height="160dip"
        android:layout_alignParentBottom="true"
        android:background="@drawable/level3" >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dip"
            android:background="@drawable/channel4" />

        <ImageButton
            android:id="@+id/iv_channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dip"
            android:layout_marginLeft="12dip"
            android:background="@drawable/channel1" />

        <ImageButton
            android:id="@+id/iv_channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel1"
            android:layout_marginBottom="16dip"
            android:layout_marginLeft="35dip"
            android:background="@drawable/channel2" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel2"
            android:layout_marginBottom="16dip"
            android:layout_marginLeft="70dip"
            android:background="@drawable/channel3" />

        <ImageButton
            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_marginBottom="5dip"
            android:layout_marginRight="12dip"
            android:background="@drawable/channel7" />

        <ImageButton
            android:id="@+id/iv_channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel7"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="16dip"
            android:layout_marginRight="35dip"
            android:background="@drawable/channel6" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel6"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="16dip"
            android:layout_marginRight="70dip"
            android:background="@drawable/channel5" />
    </RelativeLayout>

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

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

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dip"
            android:layout_marginLeft="12dip"
            android:background="@drawable/icon_search" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="5dip"
            android:layout_marginRight="12dip"
            android:background="@drawable/icon_myyouku" />
    </RelativeLayout>

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

        <ImageButton
            android:id="@+id/ib_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_home" />
    </RelativeLayout>

</RelativeLayout>

因为动画不断地使用，选择定义一个动画效果的utils类：

package com.itydl.yukudemo.Utils;

import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

/**
 * 这是专门设置动画操作的工具类
 * @author lenovo
 *
 */

public class MyAnimationUtils {

	private static int runningAnimation = 0;//是否存在动画播放的标志位

	public static boolean isRunningAnimation(){
		return runningAnimation!=0;
	}

	/**
	 * 开始旋转隐藏的动画
	 * @param v
	 * 		要给哪个view加动画
	 */
	public static void startRotateHindeAnimation(RelativeLayout v){
		//复用动画方法，这里是不延时动画

		startRotateHindeAnimation(v,0);
	}

	/**
	 * 带有延时效果的动画
	 * @param v
	 * 			要给哪个组件加入动画
	 * @param startOffset
	 * 			延时时间，传递过来
	 */
	public static void startRotateHindeAnimation(RelativeLayout v,long startOffset){
		//如果当前的动画隐藏了，该view动画上边的控件的事件也要阉割掉
		for(int i = 0 ;i< v.getChildCount(); i ++){
			v.getChildAt(i).setEnabled(false);//view.getChildAt(i)获取索引位置的子控件实例；setEnabled(false);禁用事件
		}
		RotateAnimation ra = new RotateAnimation(
				0, -180,
				Animation.RELATIVE_TO_SELF, 0.5f,
				Animation.RELATIVE_TO_SELF, 1f);
		ra.setDuration(500);
		ra.setFillAfter(true);//设置动画执行完毕，控件状态停留在结束状态
		//设置动画监听状态
		ra.setAnimationListener(animationListener);
		//加入延时
		ra.setStartOffset(startOffset);
		//给哪个view加动画，传递过来这个view
		v.startAnimation(ra);

	}

	/**
	 * 旋转显示的动画
	 * @param v
	 * 		要给哪个view加动画
	 */
	public static void startRotateShowAnimation(RelativeLayout v){
		startRotateShowAnimation(v, 0);
	}

	/**
	 * 延时显示动画
	 * @param v
	 * 		要给哪个view加动画
	 * @param startOffset
	 * 		设置动画延时时间，传递过来
	 */
    public static void startRotateShowAnimation(RelativeLayout v,int startOffset){

		//设置如果当前的view显示，让该view子控件也都重新获取事件
		for(int i = 0 ;i< v.getChildCount(); i ++){
			v.getChildAt(i).setEnabled(true);//view.getChildAt(i)获取索引位置的子控件实例；setEnabled(true);启动事件
		}
		RotateAnimation ra = new RotateAnimation(
				-180, 0,
				Animation.RELATIVE_TO_SELF, 0.5f,
				Animation.RELATIVE_TO_SELF, 1f);
		ra.setDuration(500);
		ra.setFillAfter(true);//设置动画执行完毕，控件状态停留在结束状态
		//设置动画监听状态
		ra.setAnimationListener(animationListener);
		//延时播放动画
		ra.setStartOffset(startOffset);
		//给哪个view加动画，传递过来这个view
		v.startAnimation(ra);
	}

	static AnimationListener animationListener = new AnimationListener() {

		//开始播放
		@Override
		public void onAnimationStart(Animation animation) {
			// 播放一个动画，说明存在一个动画在播放
			runningAnimation ++ ;

		}

		@Override
		public void onAnimationRepeat(Animation animation) {
			// TODO Auto-generated method stub

		}

		//播放结束
		@Override
		public void onAnimationEnd(Animation animation) {
			// 动画播放完毕
			runningAnimation -- ;

		}
	};

}

MainActivity的代码如下：

package com.itydl.yukudemo;

import com.itydl.yukudemo.Utils.MyAnimationUtils;

import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {

	private RelativeLayout mRl_Level1;
	private RelativeLayout mRl_Level2;
	private RelativeLayout mRl_Level3;
	private ImageButton mIb_Home;
	private ImageButton mIb_Menu;

	private boolean level3 = true;//设置标志位，对状态改变标记；三级菜单默认状态为显示。（注意这种编程思想）
	private boolean level2 = true;//设置标志位，对状态改变标记；二级菜单默认状态为显示。（注意这种编程思想）
	private boolean level1 = true;//设置标志位，对状态改变标记；一级菜单默认状态为显示。（注意这种编程思想）

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		initEvent();
	}

	/**
	 * 初始化事件
	 */
	private void initEvent() {

		// 对menu和home按钮加入点击事件
		OnClickListener listener = new OnClickListener() {

			@Override
			public void onClick(View v) {
				switch (v.getId()) {
				case R.id.ib_home:// 点击的是home键
					//解决连续点击按钮，动画播放不完
					if(MyAnimationUtils.isRunningAnimation()){
						return;
					}
					int longTime = 0;
					if(level2){
						if(level3){
							//如果三级菜单显示，点击home键，应该让其也消失
							MyAnimationUtils.startRotateHindeAnimation(mRl_Level3);
							level3 = false;
							//进入这里，说明开始三级菜单为显示状态。延时增加
							longTime = 200;
						}
						//显示，点击应该隐藏
						MyAnimationUtils.startRotateHindeAnimation(mRl_Level2,longTime);
						//修改状态值
						level2 = false;
					}else{
						//隐藏状态，应该显示
						MyAnimationUtils.startRotateShowAnimation(mRl_Level2);
						//修改状态值
						level2 = true;
					}

					break;
				case R.id.ib_menu:// 点击的是menu键
					if(MyAnimationUtils.isRunningAnimation()){
						//保证动画播放完毕再播放一次播放
						return;
					}
					//判断三级菜单的状态
					if(level3){
						//显示，点击应该隐藏
						MyAnimationUtils.startRotateHindeAnimation(mRl_Level3);
						//修改状态值
						level3 = false;
					}else{
						//隐藏状态，应该显示
						MyAnimationUtils.startRotateShowAnimation(mRl_Level3);
						//修改状态值
						level3 = true;
					}
					break;

				default:
					break;
				}

			}
		};

		mIb_Home.setOnClickListener(listener);
		mIb_Menu.setOnClickListener(listener);

	}

	//手机的menu键按下的时候调用事件
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if(level1){
			int longTime = 0;
			//判断二级菜单是否显示
			if(level2){
				//判断三级菜单是否显示
				if(level3){
					//隐藏三级菜单
					MyAnimationUtils.startRotateHindeAnimation(mRl_Level3);
					level3 = false;
					longTime = 200;//延时标记
				}
				//隐藏二级菜单
				MyAnimationUtils.startRotateHindeAnimation(mRl_Level2,longTime);
				level2 = false;
				longTime += 200;
			}
			//一级菜单显示状态
			//隐藏一级菜单
			MyAnimationUtils.startRotateHindeAnimation(mRl_Level1,longTime);
			level1 = false;
		}else{
			//一次显示
			MyAnimationUtils.startRotateShowAnimation(mRl_Level1);
			MyAnimationUtils.startRotateShowAnimation(mRl_Level2,200);
			MyAnimationUtils.startRotateShowAnimation(mRl_Level3,400);
			level1 = true;
			level2 = true;
			level3 = true;
		}
		// 交由父类去处理逻辑，自己不做处理
		return super.onKeyDown(keyCode, event);
	}

	/**
	 * 初始化界面
	 */
	private void initView() {

		mRl_Level1 = (RelativeLayout) findViewById(R.id.rl_level1);
		mRl_Level2 = (RelativeLayout) findViewById(R.id.rl_level2);
		mRl_Level3 = (RelativeLayout) findViewById(R.id.rl_level3);

		mIb_Home = (ImageButton) findViewById(R.id.ib_home);
		mIb_Menu = (ImageButton) findViewById(R.id.ib_menu);

	}
}

好啦，赶快把代码复制到您的IDE中把效果跑起来吧！

欢迎关注本博客点击打开链接  http://blog.csdn.net/qq_32059827，每天花上5分钟，阅读一篇有趣的安卓小文哦。