android仿老式优酷菜单

来源：互联网发布：人民币通货膨胀知乎编辑：程序博客网时间：2024/05/16 23:56

1.2 自定义组合控件之优酷菜单

1.2.1 项目概述
1.2.2 优酷菜单 UI
1.2.3 优酷菜单业务逻辑实现
1.2.4 AnimUtil工具类的逻辑实现
1.2.5 知识点总结

1.2 自定义组合控件之优酷菜单

1.2.1 项目概述

首先，我们学习如何自定义一个组合控件，其中，优酷菜单是一个典型的自定义组合控件，它的效果图如图 1-1 所示：
这里写图片描述
图中由中间往外，分别是一级菜单、二级菜单、三级菜单。
其基本用法是:点击一级菜单后加载二级菜单，再点击二级菜单加载三级菜单
再点击一级菜单分别隐藏三级、二级菜单。
并且点击手机菜单键，让菜单根据状态来显示和隐藏。

1.2.2 优酷菜单 UI

优酷菜单的整体布局采用 RelativeLayout，每一级菜单都是一个 RelativeLayout。优酷菜单的布局文件activity_main.xml，具体的代码如文件【1-1】所示：
【文件 1-1】 activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <!-- 三级菜单 -->    <RelativeLayout        android:id="@+id/level3"        android:layout_width="280dp"        android:layout_height="142dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3">        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="15dp"            android:layout_marginLeft="12dp"            android:background="@drawable/channel1" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="15dp"            android:layout_marginRight="12dp"            android:background="@drawable/channel5" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="55dp"            android:layout_marginLeft="32dp"            android:background="@drawable/channel2" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="55dp"            android:layout_marginRight="32dp"            android:background="@drawable/channel6" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="85dp"            android:layout_marginLeft="62dp"            android:background="@drawable/channel3" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="85dp"            android:layout_marginRight="62dp"            android:background="@drawable/channel7" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/channel4" />    </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:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="10dp"            android:layout_marginLeft="10dp"            android:background="@drawable/icon_search" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="10dp"            android:layout_marginRight="10dp"            android:background="@drawable/icon_myyouku" />        <ImageView            android:id="@+id/iv_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/icon_menu" />    </RelativeLayout>    <!-- 一级菜单 -->    <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/iv_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_home" />    </RelativeLayout></RelativeLayout>

1.2.3 优酷菜单业务逻辑实现

布局 UI 实现之后，我们需要实现优酷菜单的业务逻辑代码，具体代码如文件【1-2】所示：
【文件 1-2】 MainActivity

package com.fighting.youku;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.view.View;import android.widget.ImageView;import android.widget.RelativeLayout;/** * 描述： * 作者 mjd * 日期：2016/1/10 10:35 */public class MainActivity extends Activity implements View.OnClickListener {    private RelativeLayout level1, level2, level3;    private ImageView ivHome, ivMenu;    private boolean isShowLevel1 = true;//是否显示1级菜单    private boolean isShowLevel2 = true;//是否显示2级菜单    private boolean isShowLevel3 = true;//是否显示3级菜单    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        initView();        initListener();    }    private void initView() {        setContentView(R.layout.activity_main);        level1 = (RelativeLayout) findViewById(R.id.level1);        level2 = (RelativeLayout) findViewById(R.id.level2);        level3 = (RelativeLayout) findViewById(R.id.level3);        ivMenu = (ImageView) findViewById(R.id.iv_menu);        ivHome = (ImageView) findViewById(R.id.iv_home);    }    private void initListener() {        ivHome.setOnClickListener(this);        ivMenu.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.iv_home:                if (AnimUtil.animCount != 0) {                    return;                }                if (isShowLevel2) {                    AnimUtil.hindMenu(level2, 0);                    if (isShowLevel3) {                        AnimUtil.hindMenu(level3, 200);                        isShowLevel3 = false;                    }                } else {                    AnimUtil.showMenu(level2, 0);                }                isShowLevel2 = !isShowLevel2;                break;            case R.id.iv_menu:                if (AnimUtil.animCount != 0) {                    return;                }                if (isShowLevel3) {                    AnimUtil.hindMenu(level3, 0);                } else {                    AnimUtil.showMenu(level3, 0);                }                isShowLevel3 = !isShowLevel3;                break;        }    }    @Override    public boolean onKeyDown(int keyCode, KeyEvent event) {        if (keyCode == KeyEvent.KEYCODE_MENU) {            if (AnimUtil.animCount != 0) {                return true;            }            if (isShowLevel1) {                AnimUtil.hindMenu(level1, 0);                isShowLevel1 = false;                if (isShowLevel2) {                    AnimUtil.hindMenu(level2, 200);                    isShowLevel2 = false;                }                if (isShowLevel3) {                    AnimUtil.hindMenu(level3, 400);                    isShowLevel3 = false;                }            } else {                AnimUtil.showMenu(level1, 0);                AnimUtil.showMenu(level2, 200);                AnimUtil.showMenu(level3, 400);                isShowLevel1 = true;                isShowLevel2 = true;                isShowLevel3 = true;            }            return true;        }        return super.onKeyDown(keyCode, event);    }}

1.2.4 AnimUtil工具类的逻辑实现

为了隐藏 View 和显示 View，在工具类 AnimUtil.java 中定义了两个方法，具体代码如文件【】所示：
【文件 1-3】 AnimUtil

package com.fighting.youku;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.RotateAnimation;/** * 描述： * 作者 mjd * 日期：2016/1/10 11:10 */public class AnimUtil {    public static int animCount = 0;    public static void hindMenu(ViewGroup view, int startOffset) {        for (int i = 0; i < view.getChildCount(); i++) {            view.getChildAt(i).setEnabled(false);        }        RotateAnimation animation = new RotateAnimation(0, -180,                Animation.RELATIVE_TO_SELF, 0.5f,                Animation.RELATIVE_TO_SELF, 1.0f);        animation.setDuration(500);        animation.setFillAfter(true);//动画结束后保持当时的状态        animation.setStartOffset(startOffset);// 延迟多长时间后才运行动画        animation.setAnimationListener(new MyAnimListener());        view.startAnimation(animation);    }    public static void showMenu(ViewGroup view, int startOffset) {        for (int i = 0; i < view.getChildCount(); i++) {            view.getChildAt(i).setEnabled(true);        }        RotateAnimation animation = new RotateAnimation(-180, 0,                Animation.RELATIVE_TO_SELF, 0.5f,                Animation.RELATIVE_TO_SELF, 1.0f);        animation.setDuration(500);        animation.setFillAfter(true);//动画结束后保持当时的状态        animation.setStartOffset(startOffset);// 延迟多长时间后才运行动画        animation.setAnimationListener(new MyAnimListener());        view.startAnimation(animation);    }    static class MyAnimListener implements Animation.AnimationListener {        @Override        public void onAnimationStart(Animation animation) {            animCount++;        }        @Override        public void onAnimationEnd(Animation animation) {            animCount--;        }        @Override        public void onAnimationRepeat(Animation animation) {        }    }}

1.2.5 知识点总结

1． 补间动画不能改变控件的实际位置，控件还是能够响应原先的事件。 在菜单隐藏后还会响应点击事件，因此在隐藏菜单时，通过遍历相对布局的子控件，设置其为不可用来解决此 bug，在显示菜单时，通过遍历相对布局的子控件，设置为可用。
2． 连续点击菜单时，优酷菜单动画会直接执行，产生一个隐藏动画还没执行完，就执行显示动画的 bug，因此在 Tools.java 的隐藏和显示动画中都设置了动画监听 MyAnimationListener，在点击菜单时，先判断 AnimUtil的动画数量 animCount是否为 0，再执行下一个动画，来解决 bug。

0 0