首页 > 代码库 > Android仿优酷菜单效果

Android仿优酷菜单效果

一、效果图

二、主要的技术点

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

 

Android仿优酷菜单效果