Android簡易實戰教程--第二十三話《絢麗的菜單項》

今天這篇稍微增強點代碼量，可能要多花上5分鐘喽。

本篇完成一個稍微顯得絢麗的菜單項，模仿優酷選擇菜單。如果想對其中的任意一項實現點擊功能，自行加入即可。

現在就一步一步做出這個小案例：

在實現功能前，先看一下完成的結果，可能能對代碼更好的理解。

效果演示：

 

PS:由於代碼中做出了詳細的解釋，不再做過多的贅述。

首先自定義組合控件布局：

 

因為動畫不斷地使用，選擇定義一個動畫效果的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中把效果跑起來吧！