仿优酷旋转菜单注意情况

---

截图


点击主页按钮，会有第二层圆环的旋转效果，再接着点击第二个圆环中的菜单选项，最外层的圆环便会旋转出现。再次点击主页按钮，外面两层圆环便会旋转隐藏
软件结构

一。类

MainActivity.java

package com.example.zwh.customview2;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener  {

    private ImageView ic_home;
    private ImageView icon_menu;
    private RelativeLayout level1;
    private RelativeLayout level2;
    private RelativeLayout level3;
    private boolean showLevel2=true;
    private boolean showLevel3=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_menu = (ImageView) findViewById(R.id.icon_menu);
        ic_home = (ImageView) findViewById(R.id.icon_home);
        ic_home.setOnClickListener(this);
        icon_menu.setOnClickListener(this);
    }
    
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.icon_home:
                if(showLevel2){
                    showLevel2=false;
                    Tool.hideView(level2, 0);
                    if(showLevel3){
                        showLevel3=false;
                        Tool.hideView(level3,200);
                    }
                }else{
                    showLevel2=true;
                    Tool.showView(level2);
                }
                break;
            case R.id.icon_menu:
                if(showLevel3){
                    showLevel3=false;
                    Tool.hideView(level3, 0);
                }else{
                    showLevel3=true;
                    Tool.showView(level3);
                }
                break;
        }
    }
}

2.Tool.java

package com.example.zwh.customview2;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener  {

    private ImageView ic_home;
    private ImageView icon_menu;
    private RelativeLayout level1;
    private RelativeLayout level2;
    private RelativeLayout level3;
    private boolean showLevel2=true;
    private boolean showLevel3=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_menu = (ImageView) findViewById(R.id.icon_menu);
        ic_home = (ImageView) findViewById(R.id.icon_home);
        ic_home.setOnClickListener(this);
        icon_menu.setOnClickListener(this);
    }


    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.icon_home:
                if(showLevel2){
                    showLevel2=false;
                    Tool.hideView(level2, 0);
                    if(showLevel3){
                        showLevel3=false;
                        Tool.hideView(level3,200);
                    }
                }else{
                    showLevel2=true;
                    Tool.showView(level2);
                }
                break;
            case R.id.icon_menu:
                if(showLevel3){
                    showLevel3=false;
                    Tool.hideView(level3, 0);
                }else{
                    showLevel3=true;
                    Tool.showView(level3);
                }
                break;
        }
    }
}

三。布局
activity_main.xml

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

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="0dp"
        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="8dp"
            android:layout_marginBottom="0dp"
            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="38dp"
            android:layout_marginBottom="6dp"
            android:src="@drawable/channel2" />

        <ImageView
            android:id="@+id/channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="68dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="85dp"
            android:src="@drawable/channel3" />

        <ImageView
            android:id="@+id/channel4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="4dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="104dp"
            android:layout_toEndOf="@+id/channel3"
            android:src="@drawable/channel4" />

        <ImageView
            android:id="@+id/channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="18dp"
            android:layout_toEndOf="@+id/channel4"
            android:src="@drawable/channel5" />

        <ImageView
            android:id="@+id/channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="53dp"
            android:layout_marginEnd="28dp"
            android:src="@drawable/channel6" />

        <ImageView
            android:id="@+id/channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="95dp"
            android:layout_marginEnd="5dp"
            android:src="@drawable/channel7" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/level2"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2"
        android:layout_width="180dp"
        android:layout_height="90dp">
        <ImageView
            android:id="@+id/icon_search"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="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_marginTop="1dp"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_menu"/>
        <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="8dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_myyouku"/>
    </RelativeLayout>

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

    </RelativeLayout>

</RelativeLayout>

=======================================------------过程注意问题-------------=
1.ViewGroup中的view注册监听，在类名中实现View.OnClickListener接口，各个组件都要。setOnClickListener（context);
2. view 与ViewGroup的差别
ViewGroup转换为view时，大量属性均已丢失。ViewGroup可以对子view进行属性的控制
通过ViewGroup来获取每个子View，然后再进行相应的操作。

补充：
使用安卓3.0之后引入的属性动画，具体使用情况请点击这里。
修改之后的Tool.java

package com.example.zwh.customview2;

import android.animation.ObjectAnimator;
import android.text.style.WrapTogetherSpan;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;

class Tool {
    /**
     * 旋转动画rotateanimation
     * @param view
     * @param startOff
     */
    public static void hideView(ViewGroup view, int startOff) {
//        RotateAnimation rotateAnimation=new RotateAnimation(0,180,view.getWidth()/2,view.getHeight());
//        rotateAnimation.setDuration(500);
//        rotateAnimation.setFillAfter(true);
//        rotateAnimation.setStartOffset(startOff);
//        view.startAnimation(rotateAnimation);
//        for(int i=0;i<view.getChildCount();i++){
//            view.getChildAt(i).setEnabled(false);
//        }
        ObjectAnimator animator=ObjectAnimator.ofFloat(view,"rotation",0,180);
        animator.setDuration(500);
        animator.setStartDelay(startOff);
        animator.start();
        view.setPivotX(view.getWidth()/2);
        view.setPivotY(view.getHeight());
    }

    public static void showView(ViewGroup view) {
//        RotateAnimation rotateAnimation=new RotateAnimation(180,360,view.getWidth()/2,view.getHeight());
//        rotateAnimation.setDuration(500);
//        rotateAnimation.setFillAfter(true);
//        view.startAnimation(rotateAnimation);
//        /**
//         * view 与viewgroup的差别
//         * viewgroup转换为view时，大量属性均已丢失。viewgroup可以对子view进行属性的控制
//         */
//        for(int i=0;i<view.getChildCount();i++){
//            view.getChildAt(i).setEnabled(true);
//        }
        ObjectAnimator animator=ObjectAnimator.ofFloat(view,"rotation",180,360);
        animator.setDuration(500);
        animator.start();
        view.setPivotX(view.getWidth()/2);
        view.setPivotY(view.getHeight());
    }
}