自定义View（一）-ViewGroup实现优酷菜单

自定义View的第一个学习案例

　　ViewGroup是自动以View中比较常用也比较简单的一种方式，通过组合现有的UI控件，绘制出一个全新的View

效果如下：

主类实现如下：

package com.demo.youku;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.KeyEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    /**
     * False: hide
     * 是否显示圆环 默认显示
     * true:显示
     * false:隐藏
     */
    private Boolean showLevel1 = true;
    private Boolean showLevel2 = true;
    private Boolean showLevel3 = true;
    private ImageView iconHome;
    private ImageView iconMenu;
    private RelativeLayout level1;//第一层
    private RelativeLayout level2;//第二层
    private RelativeLayout level3;//第三层
    private Toolbar toolbar;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setTitle("优酷菜单");
        //设置导航图标要在setSupportActionBar方法之后
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.icon_menu);


        iconHome = (ImageView) findViewById(R.id.home);
        iconMenu = (ImageView) findViewById(R.id.icon_menu);
        level1 = (RelativeLayout) findViewById(R.id.level1);
        level2 = (RelativeLayout) findViewById(R.id.level2);
        level3 = (RelativeLayout) findViewById(R.id.level3);

        MyOnclickListener myOnclickListener = new MyOnclickListener();

        iconHome.setOnClickListener(myOnclickListener);
        iconMenu.setOnClickListener(myOnclickListener);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //如果一级二级三级菜单显示 则关闭
                if (showLevel1 || showLevel2 || showLevel3) {
                    showLevel1 = false;
                    showLevel2 = false;
                    if (showLevel3) {
                        showLevel3 = false;
                        Tools.hideView(level3);
                        Tools.hideView(level2, 400);
                        Tools.hideView(level1, 800);
                    } else {
                        Tools.hideView(level2);
                        Tools.hideView(level1, 300);
                    }
                } else {
                    //如果都未显示 则显示一级二级菜单
                    showLevel1 = true;
                    showLevel2 = true;

                    Tools.showView(level1);
                    Tools.showView(level2);
                }
            }
        });

    }

    class MyOnclickListener implements View.OnClickListener {

        @Override
        public void onClick(View view) {
            //
            switch (view.getId()) {
                case R.id.home:
                    if (showLevel2) {
                        showLevel2 = false;
                        Tools.hideView(level2);
                        if (showLevel3) {
                            showLevel3 = false;
                            Tools.hideView(level3, 400);
                        }
                    } else {
                        showLevel2 = true;
                        Tools.showView(level2);
                    }
                    break;
                case R.id.icon_menu:
                    if (showLevel3) {
                        showLevel3 = false;
                        Tools.hideView(level3);

                    } else {
                        showLevel3 = true;
                        Tools.showView(level3);
                    }
                    break;

            }
        }
    }

}

Tools类主要用于控制View的显示和隐藏动画，提供了属性动画，不补间动画两种实现方式

package com.demo.youku;

import android.animation.ObjectAnimator;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

public class Tools {

    /**
     * 顺时针旋转0-180度隐藏view
     *
     * @param view
     */
    public static void hideView(ViewGroup view) {
        hideView(view, 0);
    }

    /**
     * 顺时针旋转180-360度显示view
     *
     * @param view
     */
    public static void showView(ViewGroup view) {
/*        RotateAnimation ra = new RotateAnimation(180, 360, view.getWidth() / 2, view.getHeight());
        ra.setDuration(500);
        ra.setFillAfter(true);
        view.startAnimation(ra);

        //启动ViewGroup中所有子元素的点击事件
        for (int i = 0; i < view.getChildCount(); i++) {
            View childView = view.getChildAt(i);
            childView.setEnabled(true);
        }*/

        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "Rotation", 180, 360);
        animator.setDuration(500);
        animator.start();

        view.setPivotX(view.getWidth() / 2);
        view.setPivotX(view.getHeight());
    }

    /**
     * 延迟旋转
     *
     * @param view       需要旋转的view
     * @param setTimeOut 动画延迟时间
     */
    public static void hideView(ViewGroup view, int setTimeOut) {
        /*RotateAnimation ra = new RotateAnimation(0, 180, view.getWidth() / 2, view.getHeight());
        ra.setDuration(500);//动画时间
        ra.setFillAfter(true);//是否保留动画结束状态
        ra.setStartOffset(setTimeOut);//设置延迟时间
        view.startAnimation(ra);

        //禁用ViewGroup中错有元素的点击事件
        for (int i = 0; i < view.getChildCount(); i++) {
            View childView = view.getChildAt(i);
            childView.setEnabled(false);
        }*/

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

    <android.support.v7.widget.Toolbar
        android:background="?attr/colorPrimary"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

    </android.support.v7.widget.Toolbar>

    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/level3">

        <ImageView
            android:id="@+id/chanel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:background="@mipmap/channel1" />

        <ImageView
            android:id="@+id/chanel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/chanel1"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="30dp"
            android:background="@mipmap/channel2" />

        <ImageView
            android:id="@+id/chanel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/chanel2"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="60dp"
            android:background="@mipmap/channel3" />

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

        <ImageView
            android:id="@+id/chanel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="8dp"
            android:background="@mipmap/channel5" />

        <ImageView
            android:id="@+id/chanel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/chanel5"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="30dp"
            android:background="@mipmap/channel6" />

        <ImageView
            android:id="@+id/chanel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/chanel6"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="60dp"
            android:background="@mipmap/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="@mipmap/level2">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:background="@mipmap/icon_search" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:layout_marginRight="8dp"
            android:background="@mipmap/icon_myyouku" />

        <ImageView
            android:id="@+id/icon_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="4dp"
            android:background="@mipmap/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="@mipmap/level1">

        <ImageView
            android:id="@+id/home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@mipmap/icon_home" />

    </RelativeLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="ViewGrou之优酷菜单"
        android:textSize="24sp" />

</RelativeLayout>

        animator.setStartDelay(setTimeOut);
        animator.start();

        view.setPivotX(view.getWidth() / 2);
        view.setPivotY(view.getHeight());
    }
}

页面布局如下，布局中使用Toolbar代替ActionBar:主要需要更换默认主题：Theme.AppCompat.Light.NoActionBar