旋转菜单按钮

功能描述：

实现旋转菜单按钮，效果图如下：

功能分析：

1. 内侧的home按钮的点击
2. 中间的menu按钮的点击
3. 解决动画频繁出现
4. 硬件菜单的实现
5. 动画后点击的bug

动画:

1. View Animation: 补间动画，（旋转，位移，缩放，透明度，set）
    1. 原理: 通过父容器来绘制自己动画时的样子

2. Property Animation: 属性动画（补间动画可以做到的，都可以做到，做不到的也可以做到）
    1. 原理: 通过改变自身的属性来显示动画的

3. Drawable Animation: 帧动画

• 布局界面

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.cdw.archedmenu.MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <!--外测-->
        <RelativeLayout
            android:id="@+id/rl_level3"
            android:layout_width="280dp"
            android:layout_height="140dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/level3">

            <ImageView
                android:id="@+id/channel1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="6dp"
                android:src="@drawable/channel1"/>

            <ImageView
                android:id="@+id/channel2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel1"
                android:layout_marginLeft="30dp"
                android:src="@drawable/channel2"/>

            <ImageView
                android:id="@+id/channel3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel2"
                android:layout_marginBottom="-8dp"
                android:layout_marginLeft="64dp"
                android:src="@drawable/channel3"/>

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

            <ImageView
                android:id="@+id/channel5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel2"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="-8dp"
                android:layout_marginRight="64dp"
                android:src="@drawable/channel5"/>

            <ImageView
                android:id="@+id/channel6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@id/channel1"
                android:layout_alignParentRight="true"
                android:layout_marginRight="30dp"
                android:src="@drawable/channel6"/>

            <ImageView
                android:id="@+id/channel7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="6dp"
                android:src="@drawable/channel7"/>
        </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="@drawable/level2">
            <!--搜索-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginLeft="2dp"
                android:src="@drawable/icon_search"/>
            <!--菜单按钮-->
            <ImageView
                android:id="@+id/leve2_iv_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:src="@drawable/icon_menu"/>
            <!--优酷按钮-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginRight="2dp"
                android:src="@drawable/icon_myyouku"/>
        </RelativeLayout>

        <!--内测-->
        <RelativeLayout
            android:id="@+id/rl_level1"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:background="@drawable/level1">
            <!--home的菜单按钮-->
            <ImageView
                android:id="@+id/level1_iv_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/icon_home"/>
        </RelativeLayout>
    </RelativeLayout>
</RelativeLayout>

• mainActivity页面

package com.cdw.archedmenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements View.OnClickListener {

    private ImageView mIvHome;
    private RelativeLayout mRlLevel1;//一级菜单的容器
    private RelativeLayout mRlLevel2;//二级菜单的容器
    private RelativeLayout mRlLevel3;//三级菜单的容器
    private ImageView mIvMenu;
    private boolean isLevel1Display = true;//一级菜单是否显示的标记
    private boolean isLevel2Display = true;//二级菜单是否显示的标记
    private boolean isLevel3Display = true;//三级菜单是否显示的标记

    private int mAnimationCount;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        mRlLevel1 = (RelativeLayout) findViewById(R.id.rl_level1);
        mRlLevel2 = (RelativeLayout) findViewById(R.id.rl_level2);
        mRlLevel3 = (RelativeLayout) findViewById(R.id.rl_level3);

        mIvHome = (ImageView) findViewById(R.id.level1_iv_home);
        mIvMenu = (ImageView) findViewById(R.id.leve2_iv_menu);

        //设置点击事件
        mIvHome.setOnClickListener(this);
        mIvMenu.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == mIvHome) {
            clickLevel1Home();
        }else if (v == mIvMenu){
            clickLevel2Menu();
        }
    }

    private void clickLevel2Menu() {
        if (mAnimationCount > 0){
            return;
        }

        if (isLevel3Display){
            hideLevel(mRlLevel3, 0);
            isLevel3Display = false;
            return;
        }

        if (!isLevel3Display){
            showLevel(mRlLevel3, 0);
            isLevel3Display = true;
            return;
        }
    }

    private void clickLevel1Home() {
        if (mAnimationCount > 0){
            return;
        }

        //点击home按钮，二级菜单和三级菜单都显示的情况下，二级菜单和三级菜单隐藏
        if (isLevel2Display && isLevel3Display) {
            //隐藏二级菜单
            hideLevel(mRlLevel2, 100);

            //隐藏三级菜单
            hideLevel(mRlLevel3, 0);
            //状态改变
            isLevel2Display = false;
            isLevel3Display = false;
            return;
        }

        //点击home按钮，二级菜单和三级菜单都不显示的情况下，显示二级菜单
        if (!isLevel2Display && !isLevel3Display) {
            showLevel(mRlLevel2, 0);
            //状态改变
            isLevel2Display = true;
            return;
        }

        //点击home按钮，二级菜单显示三级菜单不显示的情况下，隐藏二级菜单
        if (isLevel2Display && !isLevel3Display) {
            hideLevel(mRlLevel2, 0);
            isLevel2Display = false;
            return;
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU){
            //点击menu按钮
            clickHardwareMenu();
            //消费menu点击事件
            return true;
        }

        return super.onKeyUp(keyCode, event);
    }

    private void clickHardwareMenu() {
        //如果三个菜单都可见，隐藏三个菜单
        if (isLevel1Display && isLevel2Display && isLevel3Display){
            hideLevel(mRlLevel3, 0);
            hideLevel(mRlLevel2, 100);
            hideLevel(mRlLevel1, 200);

            isLevel1Display = false;
            isLevel2Display = false;
            isLevel3Display = false;
            return;
        }

        //如果三个菜单不可见，显示三个菜单
        if (!isLevel1Display && !isLevel2Display && !isLevel3Display){
            showLevel(mRlLevel1, 0);
            showLevel(mRlLevel2, 100);
            showLevel(mRlLevel3, 200);

            isLevel1Display = true;
            isLevel2Display = true;
            isLevel3Display = true;
            return;
        }

        //如果三级菜单不可见，隐藏一二级菜单
        if (!isLevel3Display && isLevel1Display && isLevel2Display){
            hideLevel(mRlLevel1, 0);
            hideLevel(mRlLevel2, 100);

            isLevel1Display = false;
            isLevel2Display = false;
            return;
        }

        //如果二三级菜单不可见，隐藏一级菜单
        if (!isLevel3Display && isLevel1Display && !isLevel2Display){
            hideLevel(mRlLevel1, 0);

            isLevel1Display = false;
            return;
        }
    }

    /**
     * 隐藏菜单
     *
     * @param container
     */
    private void hideLevel(RelativeLayout container, long startOffset) {
        //container.setVisibility(View.GONE);

        int count = container.getChildCount();
        for (int i = 0; i < count; i++){
            container.getChildAt(i).setEnabled(false);
        }
        RotateAnimation animation = new RotateAnimation(0f, -180f, RotateAnimation
                .RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1f);
        animation.setDuration(400);
        animation.setFillAfter(true);
        animation.setStartOffset(startOffset);//设置动画延迟

        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mAnimationCount++;
            }

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

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        container.startAnimation(animation);
    }

    /**
     * 显示菜单
     * @param container
     * @param startOffset
     */
    private void showLevel(RelativeLayout container, long startOffset) {
        //container.setVisibility(View.VISIBLE);

        int count = container.getChildCount();
        for (int i = 0; i < count; i++){
            container.getChildAt(i).setEnabled(true);
        }
        RotateAnimation animation = new RotateAnimation(-180f, 0f, RotateAnimation
                .RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 1f);
        animation.setDuration(600);
        animation.setFillAfter(true);
        animation.setStartOffset(startOffset);//设置动画延迟

        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mAnimationCount++;
            }

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

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        container.startAnimation(animation);
    }
}

项目链接：https://github.com/ChenDongWei/Android/tree/master/archedmenu