自定義菜單，仿優(yōu)酷菜單

效果圖如下：點(diǎn)擊主頁(yè)后，上面2個(gè)圓環(huán)旋轉(zhuǎn)消失與出現(xiàn)，點(diǎn)擊中間圓環(huán)的中間那個(gè)菜單按鈕，最外圍的圓環(huán)旋轉(zhuǎn)消失于出現(xiàn)

利用了自定義控件技術(shù)，以及圖片的旋轉(zhuǎn)和布局時(shí)各個(gè)控件的相對(duì)關(guān)系。

1、acitivity_main.xml的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.yuanlp.youkudemo.MainActivity">


    <RelativeLayout
        android:id="@+id/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_marginLeft="8dp"
            android:layout_marginBottom="8dp"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:src="@drawable/channel1"/>

        <ImageView
            android:id="@+id/channel2"
            android:layout_above="@+id/channel1"
            android:layout_marginLeft="34dp"
            android:layout_marginBottom="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:src="@drawable/channel2"/>


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

        <ImageView
            android:id="@+id/channel4"
            android:layout_marginTop="8dp"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:src="@drawable/channel4"/>

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

        <ImageView
            android:id="@+id/channel6"
            android:layout_above="@+id/channel7"
            android:layout_marginRight="27dp"
            android:layout_marginBottom="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/channel6"/>

        <ImageView
            android:id="@+id/channel7"
            android:layout_marginRight="9dp"
            android:layout_marginBottom="8dp"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/channel7"/>

    </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_marginLeft="8dp"
            android:layout_marginBottom="8dp"
           android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:src="@drawable/icon_search"/>

        <ImageView
            android:id="@+id/icon_menu"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:src="@drawable/icon_menu"/>

        <ImageView
            android:layout_marginLeft="8dp"
            android:layout_marginBottom="8dp"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:src="@drawable/icon_myyouku"/>
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/level1"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@drawable/level1">

        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/icon_home"/>
    </RelativeLayout>


</RelativeLayout>

2、Tools.java 工具類，具體實(shí)現(xiàn)了消失與出現(xiàn)的方法，利用了圖片的旋轉(zhuǎn)消失

package com.yuanlp.youkudemo;

import android.view.View;
import android.view.animation.RotateAnimation;

/**
 * Created by 原立鵬 on 2017/7/3.
 * 控制level的指定的看控件
 */

class Tools {
    public static void hideView(View view){
        //參數(shù)解釋：第一個(gè)蠶食是從多少開始，第二個(gè)是旋轉(zhuǎn)多少度，第三個(gè)以及第四個(gè)是相對(duì)于控件來說，旋轉(zhuǎn)中心的位置，即控件寬度的一半以及高度
        RotateAnimation ra=new RotateAnimation(0,180,view.getWidth()/2,view.getHeight());
        ra.setDuration(500);  //設(shè)置動(dòng)畫的時(shí)間，不然的話直接就沒了，沒有視覺效果
        ra.setFillAfter(true);  //動(dòng)畫停留在完成的狀態(tài)

        view.startAnimation(ra);  //啟動(dòng)動(dòng)畫

    }

    public static void showView(View view) {

        //參數(shù)解釋：第一個(gè)蠶食是從多少開始，第二個(gè)是旋轉(zhuǎn)多少度，第三個(gè)以及第四個(gè)是相對(duì)于控件來說，旋轉(zhuǎn)中心的位置，即控件寬度的一半以及高度
        RotateAnimation ra=new RotateAnimation(180,360,view.getWidth()/2,view.getHeight());
        ra.setDuration(500);  //設(shè)置動(dòng)畫的時(shí)間，不然的話直接就沒了，沒有視覺效果
        ra.setFillAfter(true);  //動(dòng)畫停留在完成的狀態(tài)

        view.startAnimation(ra);  //啟動(dòng)動(dòng)畫

    }
}

3、MainActivity.java

package com.yuanlp.youkudemo;

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

public class MainActivity extends AppCompatActivity {

    private ImageView icon_home;
    private ImageView icon_menu;
    private RelativeLayout level1;
    private RelativeLayout level2;
    private RelativeLayout level3;

    //定義一個(gè)狀態(tài)，來控制level3是否顯示
    private boolean isShowLevel3=true;

    //定義一個(gè)狀態(tài)，來控制level2是否顯示
    private boolean isShowLevel2=true;

    //定義一個(gè)狀態(tài)，來控制level1是否顯示
    private boolean isShowLevel1=true;


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

        level1= (RelativeLayout) findViewById(R.id.level1);
        level2= (RelativeLayout) findViewById(R.id.level2);
        level3= (RelativeLayout) findViewById(R.id.level3);

        icon_home= (ImageView) findViewById(R.id.icon_home);
        icon_menu= (ImageView) findViewById(R.id.icon_menu);

        MyOnClickListener myOnClickListener=new MyOnClickListener();

        icon_home.setOnClickListener(myOnClickListener);
        icon_menu.setOnClickListener(myOnClickListener);
    }

    class MyOnClickListener implements View.OnClickListener {

        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.icon_home:
                    //如果三級(jí)菜單和二級(jí)菜單都是現(xiàn)實(shí)的，那么把2個(gè)都設(shè)置隱藏
                    if (isShowLevel2){
                        isShowLevel2=false;
                        Tools.hideView(level2);
                        if (isShowLevel3){
                            isShowLevel3=false;
                            Tools.hideView(level3);
                        }
                    }else{
                        isShowLevel2=true;
                        Tools.showView(level2);

                    }

                    //如果三級(jí)菜單和二級(jí)菜單都是隱藏的，就顯示二級(jí)菜單

                    break;
                case R.id.icon_menu:
                    if (isShowLevel3){
                        //隱藏
                        isShowLevel3=false;
                        Tools.hideView(level3);
                    }else{
                        isShowLevel3=true;
                        Tools.showView(level3);
                    }

                    break;
            }
        }
    }
}