android仿老式优酷菜单

功能简述：
实现一个扇形的3级菜单，由内向外分别是一级菜单、二级菜单、三级菜单。

功能：
1. 点击一级菜单时显示二级菜单，当点击二级菜单时，显示三级菜单。
2. 当点击屏幕上的一个按钮时，会隐藏所有的控件。再次点击时，会显示所有的控件。

效果如图：
，
此图是从网上找的。

菜单UI

主要思路是：全部使用相对布局，以实现图片的叠加。主要用到了 android:layout_alignParentBottom=”true”和android:layout_alignParentRight=”true”
以及设置margin距离。我这上面没有找到menu键，就添加了一个按钮，表示是menu键。

<?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.customview.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button"
        android:id="@+id/button1"
        />

<!--第一级菜单-->
    <RelativeLayout
        android:id="@+id/rl_level1"
        android:layout_width="100dp"
        android:background="@drawable/level1"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <ImageView
            android:id="@+id/iv_home"
            android:layout_width="wrap_content"
            android:background="@drawable/icon_home"
            android:layout_centerInParent="true"
            android:layout_height="wrap_content" />
    </RelativeLayout>

<!--第二级菜单-->
    <RelativeLayout
        android:id="@+id/rl_level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:background="@drawable/level2"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            android:background="@drawable/icon_search"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_alignParentRight="true"
            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:background="@drawable/icon_menu"
            />
    </RelativeLayout>

    <!--第三级菜单-->
    <RelativeLayout
        android:id="@+id/rl_level3"
        android:layout_width="280dp"
        android:background="@drawable/level3"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_height="140dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="5dp"
            android:background="@drawable/channel1"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel2"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="40dp"
            android:layout_marginLeft="28dp"
             />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel3"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="80dp"
            android:layout_marginLeft="60dp"

            />

        <!--这个是最中间的-->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:layout_centerHorizontal="true"
            android:background="@drawable/channel4"
            />


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="0dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:background="@drawable/channel5"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel6"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="40dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="28dp"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel7"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="80dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="60dp"
            />

    </RelativeLayout>

</RelativeLayout>

控制逻辑

这个地方比较常规：

package com.example.customview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private static final String TAG = "MainActivity";

    private ImageView ivHome;
    private ImageView ivMenu;
    private Button button;


    private boolean isShowLevel2 = true;//是否显示2级菜单
    private boolean isShowLevel3 = true;//是否显示3级菜单
    private boolean isShowMenu = true;//是否显示整个菜单，包括1级，2级，3级的菜单

    private RelativeLayout rlLevel1;
    private RelativeLayout rlLevel2;
    private RelativeLayout rlLevel3;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initView();
        initListener();
    }

    //绑定监听器
    private void initListener() {
        ivHome.setOnClickListener(this);
        ivMenu.setOnClickListener(this);
        button.setOnClickListener(this);


    }

    //初始化视图
    private void initView() {
        setContentView(R.layout.activity_main);
        button = (Button) findViewById(R.id.button1);

        ivHome = (ImageView) findViewById(R.id.iv_home);
        ivMenu = (ImageView) findViewById(R.id.iv_menu);

        rlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);
        rlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);
        rlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);
    }



    //绑定事件
    @Override
    public void onClick(View v) {
        switch (v.getId()) {

            case R.id.iv_home:
                if (AnimUtil.animCount != 0) {
                    return;
                }
                if (isShowLevel2) {
                    Log.d(TAG, "onClick: iv_home 隐藏");
                    //先隐藏三级菜单，之后再隐藏二级菜单
                    int animaDelay = 0;
                    if (isShowLevel3) {
                        AnimUtil.closeMenu(rlLevel3, animaDelay);
                        animaDelay += 200;
                        isShowLevel3 = false;
                    }

                    AnimUtil.closeMenu(rlLevel2, animaDelay);
                } else {
                    Log.d(TAG, "onClick: iv_home 显示");
                    AnimUtil.showMenu(rlLevel2,0);
                }
                isShowLevel2 = !isShowLevel2;
                break;

            case R.id.iv_menu:
                if (AnimUtil.animCount != 0) {
                    return;
                }

                if (isShowLevel3) {
                    AnimUtil.closeMenu(rlLevel3, 0);
                } else {
                    AnimUtil.showMenu(rlLevel3,0);
                }
                isShowLevel3 = !isShowLevel3;
                break;

            case R.id.button1:
                if(isShowMenu){
                    int animDelay = 0;
                    if(isShowLevel3){
                        AnimUtil.closeMenu(rlLevel3,animDelay);
                        animDelay += 200;
                        isShowLevel3 = false;
                    }

                    if (isShowLevel2){
                        AnimUtil.closeMenu(rlLevel2,animDelay);
                        animDelay+=200;
                        isShowLevel2 = false;
                    }

                    AnimUtil.closeMenu(rlLevel1,animDelay);
                }else{
                    int animDelay = 0;
                    AnimUtil.showMenu(rlLevel1,animDelay);
                    animDelay += 200;

                    AnimUtil.showMenu(rlLevel2,animDelay);
                    animDelay += 200;
                    isShowLevel2 = true;

                    AnimUtil.showMenu(rlLevel3,animDelay);
                    isShowLevel3 = true;
                }
                isShowMenu = !isShowMenu;
                break;
        }
    }
}

动画播放工具类

public class AnimUtil {

//    问题1：为了解决快速连续双击按钮时动画播放不完，出现的抖动的效果，使用一个计数器animCount标记动画开始个数，
//    开始一个计数器加1，播放完一个计数器减1。在Activity中调用时，判断animCount的个数


    public static int animCount = 0;


    public static void closeMenu(RelativeLayout rl,long startOffset) {
        //让父控件内部的所有子控件禁用
        for (int i = 0; i < rl.getChildCount(); i++) {
            View v = rl.getChildAt(i);
            v.setEnabled(false);
        }
        //逆时针旋转180度
        RotateAnimation animation = new RotateAnimation(0, -180, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1.0f);
        animation.setDuration(500);
//        动画结束后保存原来的状态
        animation.setFillAfter(true);
        animation.setStartOffset(startOffset);
        animation.setAnimationListener(new MyAnimationListener());
        rl.startAnimation(animation);
    }


    public static void showMenu(RelativeLayout relativeLayout, long startOffset) {
        //让父控件内的所有子控件启用
        for (int i = 0; i < relativeLayout.getChildCount(); i++) {
            View v = relativeLayout.getChildAt(i);
            v.setEnabled(true);
        }

        //顺时针旋转180度
        RotateAnimation animation = new RotateAnimation(-180, 0, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1.0f);
        animation.setDuration(500);
        //动画结束后保存原来的状态
        animation.setFillAfter(true);
        animation.setStartOffset(startOffset);
        animation.setAnimationListener(new MyAnimationListener());
        relativeLayout.startAnimation(animation);
    }


//    自定义动画监听器
    static class MyAnimationListener implements Animation.AnimationListener{
        @Override
        public void onAnimationStart(Animation animation) {
            animCount++;
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            animCount--;
        }
        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }

}

难点：

1. 当点击第一级菜单时隐藏了二级菜单，但是点击空白区域，还是可以响应用户的输入。解决办法，在closeMenu()函数中将该布局的所有自控件将其设置为不可用。同时在showMenum()中将所有子控件设置为可用。
2. 当用户快速连续点击时，会出现隐藏动画没有执行完，就开始执行显示动画。通过在AnimUtil中，设置一个计数器animCount,当播放一个动画时，animCount++,播放完毕，animCount–,在MainActivity中，判断animCount是否等于0，来判断动画是否播放结束。

参考

—android仿老式优酷菜单