模仿优酷菜单

转载注明出处:    http://blog.csdn.net/forwardyzk/article/details/42554691

在开发中，会使用菜单，现在模拟一下优酷的菜单效果。

其实效果都是由android基本的动画效果组成的，在合适的时间显示对应的动画，即可展示出不一样的效果。

思路:

1.自定义类RotateMenuView继承RelativeLayout。

2.在需要加载的布局文件中，添加对应的菜单View。

3.定义菜单进入和出去的动画效果，使用旋转动画，进来顺时针，出去的时候，为逆时针。

4.在为不同等级的菜单添加动画的时，设置合适时间间隔。

   同时进入时候，进入顺序，一级菜单，二级菜单，三级菜单，有动画间隔延迟加载。

   同时出去的时候，出去顺序，三级菜单，二级菜单，一级菜单，有动画间隔延迟加载。

5.一级菜单控制耳机菜单，二级菜单控制三级菜单，菜单的显示状态，每次都更新，初始化额时候，默认都是不现实。

6.对二级菜单和三级菜单的按钮增加点击事件。

菜单进入，出去，点击的效果

private static boolean isRunning = false;

	/**
	 * 菜单进入动画，顺时针，
	 * 
	 * @param viewGroup
	 * @param startOffset
	 *            延迟时间
	 */
	public static void startInRotateAnimation(ViewGroup viewGroup,
			long startOffset) {
		for (int i = 0; i < viewGroup.getChildCount(); i++) {
			viewGroup.getChildAt(i).setEnabled(true); // 设置VieGroup所有的孩子状态Endbled为True
		}

		RotateAnimation anim = new RotateAnimation(-180f, 0f,
				Animation.RELATIVE_TO_SELF, 0.5f, // x轴上的值
				Animation.RELATIVE_TO_SELF, 1.0f); // y轴上的值
		anim.setDuration(500); // 一次动画的事件
		anim.setStartOffset(startOffset);
		anim.setFillAfter(true); // 动画停止在最后状态
		anim.setAnimationListener(new AnimationListener() {

			@Override
			public void onAnimationStart(Animation animation) {
				isRunning = true;
			}

			@Override
			public void onAnimationEnd(Animation animation) {
				isRunning = false;
			}

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

			}
		});
		viewGroup.startAnimation(anim);
	}

	/**
	 * 菜单出去动画
	 * 
	 * @param viewGroup
	 * @param startOffset
	 *            延迟时间
	 */
	public static void startOutRotateAnimation(ViewGroup viewGroup,
			long startOffset) {
		for (int i = 0; i < viewGroup.getChildCount(); i++) {
			viewGroup.getChildAt(i).setEnabled(false);
		}

		RotateAnimation anim = new RotateAnimation(0f, -180f,
				Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
				1.0f);
		anim.setDuration(500);
		anim.setStartOffset(startOffset);
		anim.setFillAfter(true);

		anim.setAnimationListener(new AnimationListener() {

			/**
			 * 当动画开始时
			 */
			@Override
			public void onAnimationStart(Animation animation) {
				isRunning = true;
			}

			/**
			 * 当动画结束时
			 */
			@Override
			public void onAnimationEnd(Animation animation) {
				isRunning = false;
			}

			/**
			 * 当动画开始之前
			 */
			@Override
			public void onAnimationRepeat(Animation animation) {
				// TODO Auto-generated method stub

			}
		});
		viewGroup.startAnimation(anim);
	}

	/**
	 * 获取动画是否正在执行
	 * 
	 * @return
	 */
	public static boolean isRunningAnimation() {
		return isRunning;
	}

	/**
	 * @return 点击菜单按钮的效果，放大
	 */
	public static ScaleAnimation normalToBig(View view) {
		ScaleAnimation animation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f,
				ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
				ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
		animation.setDuration(2000);
		animation.setFillAfter(false);
		view.startAnimation(animation);
		return animation;
	}

设置菜单显示和隐藏

/**
	 * 优酷菜单是否显示
	 * 
	 * @return
	 */
	public boolean showMeun() {
		if (MenuAnimationUtils.isRunningAnimation())
			return true;
		if (isDisplayMenu) {
			long startOffset = 0;
			// 隐藏菜单
			if (isDisplayLevel2) { // 二级菜单显示状态, 隐藏

				if (isDisplayLevel3) { // 三级菜单显示状态, 隐藏它
					MenuAnimationUtils.startOutRotateAnimation(rlLevel3,
							startOffset);
					startOffset = 200;
					isDisplayLevel3 = !isDisplayLevel3;
				}

				MenuAnimationUtils.startOutRotateAnimation(rlLevel2,
						startOffset);
				startOffset += 200;
				isDisplayLevel2 = !isDisplayLevel2;
			}

			// 隐藏一级菜单
			MenuAnimationUtils.startOutRotateAnimation(rlLevel1, startOffset);
		} else {
			// 显示菜单
			// 判断菜单是否是为View.GONE的状态
			if (rlLevel1.getVisibility() == View.GONE
					&& rlLevel2.getVisibility() == View.GONE
					&& rlLevel3.getVisibility() == View.GONE) {
				// 设置菜单显示
				rlLevel1.setVisibility(View.VISIBLE);
				rlLevel2.setVisibility(View.VISIBLE);
				rlLevel3.setVisibility(View.VISIBLE);
			}

			MenuAnimationUtils.startInRotateAnimation(rlLevel1, 0);
			MenuAnimationUtils.startInRotateAnimation(rlLevel2, 200);
			MenuAnimationUtils.startInRotateAnimation(rlLevel3, 400);

			isDisplayLevel2 = !isDisplayLevel2;
			isDisplayLevel3 = !isDisplayLevel3;
		}

		return isDisplayMenu = !isDisplayMenu;
	}

控制按钮的点击事件

		if (MenuAnimationUtils.isRunningAnimation())
			return;
		switch (v.getId()) {
		case R.id.ib_home:// 主菜单按钮

			if (isDisplayLevel2) {

				long startOffset = 0;
				if (isDisplayLevel3) {
					MenuAnimationUtils.startOutRotateAnimation(rlLevel3,
							startOffset);
					isDisplayLevel3 = !isDisplayLevel3;
					startOffset = 200;
				}

				// 隐藏二级菜单
				MenuAnimationUtils.startOutRotateAnimation(rlLevel2,
						startOffset);
			} else {
				// 显示二级菜单
				MenuAnimationUtils.startInRotateAnimation(rlLevel2, 0);
			}
			isDisplayLevel2 = !isDisplayLevel2;
			break;
		case R.id.ib_menu:// 二级菜单控制三级菜单的按钮
			if (isDisplayLevel3) {
				// 隐藏三级菜单
				MenuAnimationUtils.startOutRotateAnimation(rlLevel3, 0);
			} else {
				// 显示三级菜单
				MenuAnimationUtils.startInRotateAnimation(rlLevel3, 0);
			}
			isDisplayLevel3 = !isDisplayLevel3;
			break;
		default:
			break;
		}
	

非控制菜单按钮的点击事件。

private OnClickListener clickListener = new OnClickListener() {

		@Override
		public void onClick(View v) {
			if (clickMenuListener == null) {
				return;
			}
			switch (v.getId()) {
			case R.id.ib_level2_1:
				clickMenuListener.click(v, LEVEL2_21);
				break;
			case R.id.ib_level2_3:
				clickMenuListener.click(v, LEVEL2_23);
				break;
			case R.id.ib_level3_1:
				clickMenuListener.click(v, LEVEL3_31);
				break;
			case R.id.ib_level3_2:
				clickMenuListener.click(v, LEVEL3_32);
				break;
			case R.id.ib_level3_3:
				clickMenuListener.click(v, LEVEL3_33);
				break;
			case R.id.ib_level3_4:
				clickMenuListener.click(v, LEVEL3_34);
				break;
			case R.id.ib_level3_5:
				clickMenuListener.click(v, LEVEL3_35);
				break;
			case R.id.ib_level3_6:
				clickMenuListener.click(v, LEVEL3_36);
				break;
			case R.id.ib_level3_7:
				clickMenuListener.click(v, LEVEL3_37);
				break;

			default:
				break;
			}
			MenuAnimationUtils.normalToBig(v);

		}
	};

布局文件:

<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" >

    <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/icon_youku_level1" >

        <ImageButton
            android:id="@+id/ib_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/icon_youku_home" />
    </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/icon_youku_level2" >

        <ImageButton
            android:id="@+id/ib_level2_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="5dip"
            android:layout_marginLeft="10dip"
            android:background="@drawable/icon_youku_search" />

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

        <ImageButton
            android:id="@+id/ib_level2_3"
            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="10dip"
            android:background="@drawable/icon_youku_myyouku" />
    </RelativeLayout>

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

        <ImageButton
            android:id="@+id/ib_level3_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dip"
            android:layout_marginLeft="15dip"
            android:background="@drawable/icon_youku_channel1" />

        <ImageButton
            android:id="@+id/ib_level3_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/ib_level3_1"
            android:layout_marginBottom="20dip"
            android:layout_marginLeft="40dip"
            android:background="@drawable/icon_youku_channel2" />

        <ImageButton
            android:id="@+id/ib_level3_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/ib_level3_2"
            android:layout_marginBottom="10dip"
            android:layout_marginLeft="10dip"
            android:layout_toRightOf="@id/ib_level3_2"
            android:background="@drawable/icon_youku_channel3" />

        <ImageButton
            android:id="@+id/ib_level3_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dip"
            android:background="@drawable/icon_youku_channel4" />

        <ImageButton
            android:id="@+id/ib_level3_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="10dip"
            android:layout_marginRight="15dip"
            android:background="@drawable/icon_youku_channel5" />

        <ImageButton
            android:id="@+id/ib_level3_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/ib_level3_7"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="20dip"
            android:layout_marginRight="40dip"
            android:background="@drawable/icon_youku_channel6" />

        <ImageButton
            android:id="@+id/ib_level3_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/ib_level3_6"
            android:layout_marginBottom="10dip"
            android:layout_marginRight="10dip"
            android:layout_toLeftOf="@id/ib_level3_6"
            android:background="@drawable/icon_youku_channel7" />
    </RelativeLayout>

</RelativeLayout>

使用步骤:

activity_main1.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" >

    <com.example.view.RotateMenuView
        android:id="@+id/menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom" >
    </com.example.view.RotateMenuView>

    <Button
        android:id="@+id/bt_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="87dp"
        android:background="@drawable/bt_pay_selector"
        android:text="显示菜单"
        android:textColor="@android:color/white" />

</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {

	private RotateMenuView menu;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main1);
		menu = (RotateMenuView) findViewById(R.id.menu);
		final Button bt_show = (Button) findViewById(R.id.bt_show);
		bt_show.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				if (!menu.showMeun()) {
					bt_show.setText("显示菜单");
				} else {
					bt_show.setText("隐藏菜单");
				}

			}
		});
		menu.setClickMenuListener(new ClickMenuListener() {

			@Override
			public void click(View view, int position) {
				switch (position) {
				case RotateMenuView.LEVEL2_21:
					showShortToast("搜索");
					break;
				case RotateMenuView.LEVEL2_23:
					showShortToast("关注");
					break;
				case RotateMenuView.LEVEL3_31:

					showShortToast("音乐");
					break;
				case RotateMenuView.LEVEL3_32:

					showShortToast("播放器");
					break;
				case RotateMenuView.LEVEL3_33:

					showShortToast("熊猫");
					break;
				case RotateMenuView.LEVEL3_34:

					showShortToast("排名");
					break;
				case RotateMenuView.LEVEL3_35:

					showShortToast("麦克风");
					break;
				case RotateMenuView.LEVEL3_36:

					showShortToast("视频");
					break;
				case RotateMenuView.LEVEL3_37:

					showShortToast("收音机");
					break;

				default:
					break;
				}

			}
		});

	}

	public void showShortToast(String message) {
		Toast.makeText(getApplicationContext(), message, 0).show();
	}
}

源码下载:   http://download.csdn.net/detail/forwardyzk/8344663

效果图: