Android自定义控件---优酷菜单

实现的效果图：

逻辑并不是很难，主要有三点：

1.他的布局

2.动画的原理

3.onkeydown监听menu按键的事件

第一个：

<span style="font-size:12px;"><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="${relativePackage}.${activityClass}" >
    
    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        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:layout_centerInParent="true"
            android:background="@drawable/icon_home" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        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:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:background="@drawable/icon_search" />
          <ImageView
            android:id="@+id/icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@drawable/icon_menu" />
           <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp"
            android:background="@drawable/icon_myyouku" />
        
        
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        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:layout_alignParentBottom="true"
             android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/channel1" />
          <ImageView
            android:id="@+id/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel1"
            android:layout_alignLeft="@id/channel1"
            android:layout_marginLeft="20dp"
            android:layout_marginBottom="6dp"
            android:background="@drawable/channel2" />
         <!--   android:layout_alignLeft="@id/channel1" 和channel1控件左边对齐-->
         <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:layout_marginLeft="30dp"
            android:layout_marginBottom="6dp"
            android:background="@drawable/channel3" />
           <ImageView
            android:id="@+id/channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@drawable/channel4" />
           
           <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:layout_marginRight="30dp"
            android:layout_marginBottom="6dp"
            android:background="@drawable/channel5" />
           
             <ImageView
            android:id="@+id/channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/channel7"
            android:layout_alignRight="@+id/channel7"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="6dp"
            android:background="@drawable/channel6" />
           
           <ImageView
            android:id="@+id/channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
             android:layout_marginRight="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/channel7" />
        
        
    </RelativeLayout>

</RelativeLayout></span>

第二个：

<span style="font-size:12px;font-weight: normal;">package com.dystu.youkudemo;

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

public class MyUtils {

	/**
	 * 
	 * 旋转离开的动画
	 * 
	 * @param view
	 */
	public static void startAnimationOut(RelativeLayout view) {

		/**
		 * 
		 * 默认圆心为View的左上角
		 * 
		 * 水平向右:0度 顺时针旋转度数增加
		 * 
		 * 
		 */
		RotateAnimation animation = new RotateAnimation(0, 180,
				view.getWidth() / 2, view.getHeight());

		animation.setDuration(500);

		//动画执行完以后，保持最后的状态
		animation.setFillAfter(true);

		view.startAnimation(animation);

	}

	/**
	 * 
	 * 旋转进入的动画
	 * 
	 * @param view
	 */
	public static void startAnimationIn(RelativeLayout view) {
		RotateAnimation animation = new RotateAnimation(180, 360,
				view.getWidth() / 2, view.getHeight());

		animation.setDuration(500);

		animation.setFillAfter(true);

		view.startAnimation(animation);
	}

	/**
	 * 
	 * 让指定view延时执行旋转离开的方法
	 * 
	 * @param level3
	 * @param i  延时的时间
	 */
	public static void startAnimationOut(RelativeLayout view, long offset) {
		/**
		 * 
		 * 默认圆心为View的左上角
		 * 
		 * 水平向右:0度 顺时针旋转度数增加
		 * 
		 * 
		 */
		RotateAnimation animation = new RotateAnimation(0, 180,
				view.getWidth() / 2, view.getHeight());

		animation.setDuration(500);

		//动画执行完以后，保持最后的状态
		animation.setFillAfter(true);
		//设置延时执行的动画
		animation.setStartOffset(offset);
		
		view.startAnimation(animation);
	}

}
</span>

3.

package com.dystu.youkudemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements OnClickListener {

	private ImageView icon_menu, icon_home;

	private RelativeLayout level1;
	private RelativeLayout level2;
	private RelativeLayout level3;

	// 用于判断第三级菜单是否显示 默认是显示的(true)
	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);

		icon_home = (ImageView) findViewById(R.id.icon_home);
		icon_menu = (ImageView) findViewById(R.id.icon_menu);

		level1 = (RelativeLayout) findViewById(R.id.level1);
		level2 = (RelativeLayout) findViewById(R.id.level2);
		level3 = (RelativeLayout) findViewById(R.id.level3);

		icon_home.setOnClickListener(this);
		icon_menu.setOnClickListener(this);

	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.icon_menu:

			// 如果第三级菜单是显示状态，则隐藏，反之，则显示；

			if (isLevel3Show) {
				// 隐藏第三级菜单

				MyUtils.startAnimationOut(level3);

			} else {

				// 显示

				MyUtils.startAnimationIn(level3);

			}
			isLevel3Show = !isLevel3Show;

			break;
		case R.id.icon_home:

			// 如果二级菜单是显示状态，那么就隐藏2,3级菜单；
			// 如果二级菜单是隐藏状态，那么就显示2级菜单。
			if (isLevel2Show) {
				MyUtils.startAnimationOut(level2);
				isLevel2Show = false;
				if (isLevel3Show) {
					// 如果第三级菜单也显示，那也将其隐藏

					MyUtils.startAnimationOut(level3);
					isLevel3Show = false;
				}

			} else {
				MyUtils.startAnimationIn(level2);

				isLevel2Show = true;

			}

			break;

		default:
			break;
		}
	}

	/**
	 * 
	 * 监听menu按键的事件
	 * 
	 */
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {

		if (keyCode == KeyEvent.KEYCODE_MENU) {
			changeLevel1State();
		}

		return super.onKeyDown(keyCode, event);
	}

	/**
	 * 
	 * 
	 * 改变第一级菜单的状态
	 * 
	 */
	private void changeLevel1State() {

		// 如果第一级菜单是显示状态 那么隐藏1,2,3级菜单
		// 如果第一级菜单是隐藏状态，那么显示1,2级菜单
		if (isLevel1Show) {

			MyUtils.startAnimationOut(level1);
			isLevel1Show = false;
			if (isLevel2Show) {
				MyUtils.startAnimationOut(level2);
				isLevel2Show = false;

				if (isLevel3Show) {

					MyUtils.startAnimationOut(level3);

					isLevel3Show = false;

				}

			}

		} else {

			MyUtils.startAnimationIn(level1);
			isLevel1Show = true;
			MyUtils.startAnimationIn(level2);
			isLevel2Show = true;

		}
	}

}