Android仿优酷菜单效果

浏览数：20 / 时间：2015年06月11日

一、效果图

二、主要的技术点

　　1.RelativeLayout布局

　　2.RotateAnimation旋转动画

三、需求

　　1.点击二级菜单中的“menu”键控制三级菜单的进入和退出动画效果；

　　2.点击一级菜单中的“home”键控制二级和三级菜单的进入和退出效果；

　　3.点击手机上的菜单键控制一级、二级和三级菜单的进入和退出效果。

四、实例代码

　　1.布局文件：activity_main.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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

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

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

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

        <ImageView
            android:id="@+id/iv_icon_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_margin="3dp"
            android:src="@drawable/icon_search" />

        <ImageView
            android:id="@+id/iv_icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/icon_menu" />

        <ImageView
            android:id="@+id/iv_icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@id/iv_icon_search"
            android:layout_marginRight="3dp"
            android:src="@drawable/icon_myyouku" />
    </RelativeLayout>

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

        <ImageView
            android:id="@+id/iv_channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_margin="3dp"
            android:src="@drawable/channel1" />

        <ImageView
            android:id="@+id/iv_channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="25dp"
            android:src="@drawable/channel2" />

        <ImageView
            android:id="@+id/iv_channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="75dp"
            android:layout_marginLeft="55dp"
            android:src="@drawable/channel3" />

        <ImageView
            android:id="@+id/iv_channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/channel4" />
        
        <ImageView
            android:id="@+id/iv_channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="75dp"
            android:layout_marginRight="55dp"
            android:src="@drawable/channel5" />
        
        <ImageView
            android:id="@+id/iv_channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="40dp"
            android:layout_marginRight="25dp"
            android:src="@drawable/channel6" />
        
         <ImageView
            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_margin="3dp"
            android:src="@drawable/channel7" />
    </RelativeLayout>

</RelativeLayout>

　　2.设置旋转动画：MyUtils.java

package com.gnnuit.youkumenu;

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

public class MyUtils {

    /**
     * 设置View退出时的旋转动画
     * 
     * @param offset
     *            动画执行的延迟时间
     * @param view
     */
    public static void startAnimationOut(RelativeLayout view, long offset) {
        // 旋转动画，（1）必须确定旋转圆心，默认是View的左上角；（2）设置旋转方向，右边是0度，左边是180度，上边是270度，下边是90度，顺时针是从0到180
        // 设置顺时针退出，从0到180
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());
        rotateAnimation.setDuration(300);
        rotateAnimation.setFillAfter(true);// 动画执行完后，保持最后的状态
        rotateAnimation.setStartOffset(offset);// 设置延迟执行
        view.startAnimation(rotateAnimation);
    }

    /**
     * 设置View进入时的旋转动画
     * 
     * @param offset
     *            动画执行的延迟时间
     * @param view
     */
    public static void startAnimationIn(RelativeLayout view, long offset) {
        // 设置顺时针进入，从180到360
        RotateAnimation rotateAnimation = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight());
        rotateAnimation.setDuration(300);
        rotateAnimation.setFillAfter(true);
        rotateAnimation.setStartOffset(offset);
        view.startAnimation(rotateAnimation);
    }

}

　　3.主界面：MainActivity.java

package com.gnnuit.youkumenu;

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

public class MainActivity extends Activity implements OnClickListener {
    private ImageView iv_icon_home;
    private ImageView iv_icon_menu;

    private RelativeLayout rl_level1;
    private RelativeLayout rl_level2;
    private RelativeLayout rl_level3;

    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);

        iv_icon_home = (ImageView) findViewById(R.id.iv_icon_home);
        iv_icon_menu = (ImageView) findViewById(R.id.iv_icon_menu);

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

        iv_icon_home.setOnClickListener(this);
        iv_icon_menu.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.iv_icon_menu:// 二级菜单Menu的点击事件
            if (isLevel3Show) {
                // 三级菜单当前处于显示状态，关闭三级菜单
                MyUtils.startAnimationOut(rl_level3, 0);
                isLevel3Show = false;
            } else {
                // 三级菜单当前处于关闭状态，显示三级菜单
                MyUtils.startAnimationIn(rl_level3, 0);
                isLevel3Show = true;
            }
            break;
        case R.id.iv_icon_home:// 一级级菜单Home的点击事件
            if (isLevel2Show && isLevel3Show) {
                // 二级和三级菜单当前都处于显示状态，则依次关闭三级菜单，二级菜单
                MyUtils.startAnimationOut(rl_level3, 0);
                MyUtils.startAnimationOut(rl_level2, 200);
                isLevel2Show = false;
                isLevel3Show = false;
            } else if (isLevel2Show) {
                // 二级菜单当前处于显示状态，三级菜单当前处于关闭状态，关闭二级菜单
                MyUtils.startAnimationOut(rl_level2, 0);
                isLevel2Show = false;
            } else {
                // 二级菜单当前处于关闭状态，显示二级菜单
                MyUtils.startAnimationIn(rl_level2, 0);
                isLevel2Show = true;
            }
            break;

        default:
            break;
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU) {
            if (isLevel1Show) {
                // 一级菜单当前处于显示状态，关闭一级，二级，三级菜单
                if (isLevel3Show) {// 三级菜单当前处于显示状态，则一级，二级也处于显示状态
                    MyUtils.startAnimationOut(rl_level3, 0);
                    MyUtils.startAnimationOut(rl_level2, 200);
                    MyUtils.startAnimationOut(rl_level1, 300);
                    isLevel1Show = false;
                    isLevel2Show = false;
                    isLevel3Show = false;
                } else if (isLevel2Show) {// 二级菜单当前处于显示状态，则一级也处于显示状态
                    MyUtils.startAnimationOut(rl_level2, 0);
                    MyUtils.startAnimationOut(rl_level1, 200);
                    isLevel1Show = false;
                    isLevel2Show = false;
                } else {
                    MyUtils.startAnimationOut(rl_level1, 0);
                    isLevel1Show = false;
                }
            } else {
                // 一级菜单当前处于关闭状态，显示一级，二级菜单
                MyUtils.startAnimationIn(rl_level1, 0);
                MyUtils.startAnimationIn(rl_level2, 200);
                isLevel1Show = true;
                isLevel2Show = true;
            }
        }
        return super.onKeyDown(keyCode, event);
    }

}