模仿优酷菜单

来源：互联网发布：电动汽车行业前景知乎编辑：程序博客网时间：2024/06/06 03:01

1准备图片

这里写图片描述

2建立布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.youkumenu.MainActivity">    <RelativeLayout        android:id="@+id/rl_level1"        android:layout_width="100dp"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@mipmap/level1">        <ImageButton            android:id="@+id/ib_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@null"            android:src="@mipmap/icon_home"/>    </RelativeLayout>    <RelativeLayout        android:id="@+id/rl_level2"        android:layout_width="180dp"        android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@mipmap/level2">        <ImageButton            android:id="@+id/ib_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:background="@null"            android:layout_marginTop="5dp"            android:src="@mipmap/icon_menu"/>        <ImageButton            android:layout_alignParentBottom="true"            android:layout_alignParentLeft="true"            android:layout_marginLeft="10dp"            android:layout_marginBottom="5dp"            android:background="@null"            android:src="@mipmap/icon_search"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />        <ImageButton            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginRight="10dp"            android:layout_marginBottom="5dp"            android:background="@null"            android:src="@mipmap/icon_myyouku"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />    </RelativeLayout>    <RelativeLayout        android:id="@+id/rl_level3"        android:layout_width="280dp"        android:layout_height="140dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@mipmap/level3">        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentLeft="true"            android:layout_marginLeft="10dp"            android:layout_marginBottom="5dp"            android:background="@null"            android:src="@mipmap/channel1"/>        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="30dp"            android:layout_marginTop="60dp"            android:background="@null"            android:src="@mipmap/channel2"/>        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="65dp"            android:layout_marginTop="25dp"            android:background="@null"            android:src="@mipmap/channel3"/>        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="5dp"            android:layout_centerHorizontal="true"            android:background="@null"            android:src="@mipmap/channel4"/>        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:layout_marginRight="30dp"            android:layout_marginTop="60dp"            android:background="@null"            android:src="@mipmap/channel5"/>        <ImageButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentRight="true"            android:layout_marginRight="65dp"            android:layout_marginTop="25dp"            android:background="@null"            android:src="@mipmap/channel6"/>        <ImageButton            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="5dp"            android:background="@null"            android:src="@mipmap/channel7"/>    </RelativeLayout></RelativeLayout>

3建立AnimationUtils类实现逻辑处理

1旋转出图片处理

public class AnimationUtils {// 旋转出去的动画    public static void rotateOutAnim(RelativeLayout layout, long delay) {        int childCount = layout.getChildCount();        // 如果隐藏. 则找到所有的子View, 禁用        for (int i = 0; i < childCount; i++) {            layout.getChildAt(i).setEnabled(false);        }        RotateAnimation ra = new RotateAnimation(                0f, -180f, // 开始, 结束的角度, 逆时针                Animation.RELATIVE_TO_SELF, 0.5f,  // 相对的x坐标点(指定旋转中心x值)                Animation.RELATIVE_TO_SELF, 1.0f); // 相对的y坐标点(指定旋转中心y值)        ra.setDuration(500);        ra.setFillAfter(true); // 设置动画停留在结束位置        ra.setStartOffset(delay); // 设置动画开始延时        ra.setAnimationListener(new MyAnimationListener()); // 添加监听        layout.startAnimation(ra);    }}

2旋转入处理

public class AnimationUtils {    public static int runningAnimationCount = 0;    ...    // 旋转进来的动画    public static void rotateInAnim(RelativeLayout layout, long delay) {        int childCount = layout.getChildCount();        // 如果隐藏. 则找到所有的子View, 启用        for (int i = 0; i < childCount; i++) {            layout.getChildAt(i).setEnabled(true);        }        RotateAnimation ra = new RotateAnimation(                -180f, 0f, // 开始, 结束的角度, 顺时针                Animation.RELATIVE_TO_SELF, 0.5f,  // 相对的x坐标点(指定旋转中心x值)                Animation.RELATIVE_TO_SELF, 1.0f); // 相对的y坐标点(指定旋转中心y值)        ra.setDuration(500);        ra.setFillAfter(true);        ra.setStartOffset(delay); // 设置动画开始延时        ra.setAnimationListener(new MyAnimationListener()); // 添加监听        layout.startAnimation(ra);    }    static class MyAnimationListener implements AnimationListener {        @Override        public void onAnimationStart(Animation animation) {            runningAnimationCount ++;        }        @Override        public void onAnimationEnd(Animation animation) {            runningAnimationCount -- ;        }        @Override        public void onAnimationRepeat(Animation animation) {        }    }}

4初始化控件

public class MainActivity extends Activity implements OnClickListener{        private RelativeLayout rl_level1;    private RelativeLayout rl_level2;    private RelativeLayout rl_level3;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        // 初始化控件        initViews();    }    private void initViews() {        // 添加点击事件        findViewById(R.id.ib_home).setOnClickListener(this);        findViewById(R.id.ib_menu).setOnClickListener(this);        rl_level1 = (RelativeLayout) findViewById(R.id.rl_level1);        rl_level2 = (RelativeLayout) findViewById(R.id.rl_level2);        rl_level3 = (RelativeLayout) findViewById(R.id.rl_level3);    }}

5按菜单键响应

public class MainActivity extends Activity implements OnClickListener{    ...    boolean isLevel3Display = true;    boolean isLevel2Display = true;    boolean isLevel1Display = true;    public boolean onKeyDown(int keyCode, KeyEvent event) {        // keyCode 事件码        if(keyCode == KeyEvent.KEYCODE_MENU){            if(AnimationUtils.runningAnimationCount > 0){                // 当前有动画正在执行, 取消当前事件                return true;            }//          如果按下的是菜单按钮            if(isLevel1Display){                long delay = 0;                // 隐藏三级菜单                if(isLevel3Display){                    AnimationUtils.rotateOutAnim(rl_level3, 0);                    isLevel3Display = false;                    delay += 200;                }                // 隐藏二级菜单                if(isLevel2Display){                    AnimationUtils.rotateOutAnim(rl_level2, delay);                    isLevel2Display = false;                    delay += 200;                }                // 隐藏一级菜单                AnimationUtils.rotateOutAnim(rl_level1, delay);            }else {                // 顺次转进来                AnimationUtils.rotateInAnim(rl_level1, 0);                AnimationUtils.rotateInAnim(rl_level2, 200);                AnimationUtils.rotateInAnim(rl_level3, 400);                isLevel3Display = true;                isLevel2Display = true;            }            isLevel1Display = !isLevel1Display;            return true;// 消费了当前事件        }        return super.onKeyDown(keyCode, event);    }}

6 图片按钮响应

public class MainActivity extends Activity implements OnClickListener{    public void onClick(View v) {        if(AnimationUtils.runningAnimationCount > 0){            // 当前有动画正在执行, 取消当前事件            return;        }        switch (v.getId()) {        case R.id.ib_home:            if(isLevel2Display){                long delay = 0;                // 如果当前三级菜单已经显示, 先转出去                if(isLevel3Display){                    AnimationUtils.rotateOutAnim(rl_level3, 0);                    isLevel3Display = false;                    delay += 200;                }                // 如果当前二级菜单已经显示, 转出去                AnimationUtils.rotateOutAnim(rl_level2, delay);            }else {                // 如果当前二级菜单没有显示, 转出来                AnimationUtils.rotateInAnim(rl_level2, 0);            }            // 置反            isLevel2Display = !isLevel2Display;            break;        case R.id.ib_menu:            if(isLevel3Display){                // 如果当前三级菜单已经显示, 转出去                AnimationUtils.rotateOutAnim(rl_level3, 0);            }else {                // 如果当前三级菜单没有显示, 转出来                AnimationUtils.rotateInAnim(rl_level3, 0);            }            // 置反            isLevel3Display = !isLevel3Display;            break;        default:            break;        }    }}

源码下载

阅读全文

0 0