自定义控件实现学习

1.优酷菜单的实现-利用现有的控件实现
实现优酷菜单的步骤分四步：
*在xml文件中进行布局设计
*给指定的控件添加点击事件
*执行动画（设定animationUtils类，里面完成动画类设计）–旋转动画–补间动画
*手机菜单按钮的捕获
主要代码如下
(1)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="com.youkumenu.MainActivity">

    <RelativeLayout
        android:id="@+id/rl_level1"
        android:layout_width="100dp"
        android:background="@mipmap/level1"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_height="50dp">
        <ImageButton
            android:id="@+id/ib_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_home"
            android:layout_centerInParent="true"
            android:background="@null"/>

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_level2"
        android:layout_width="180dp"
        android:background="@mipmap/level2"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_height="90dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_search"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="5dp"
            android:background="@null"
            />

        <ImageButton
            android:id="@+id/ib_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_menu"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@null"/>
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_myyouku"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="5dp"
            android:background="@null"/>

    </RelativeLayout>

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

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel1"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="5dp"
            android:background="@null"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel2"
           android:layout_marginLeft="30dp"
            android:layout_marginTop="60dp"
            android:background="@null"/>
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel3"
            android:layout_marginLeft="65dp"
            android:layout_marginTop="25dp"
            android:background="@null"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@null"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel5"
            android:layout_alignParentRight="true"
            android:layout_marginRight="65dp"
            android:layout_marginTop="25dp"
            android:background="@null"/>
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel6"
            android:layout_alignParentRight="true"
            android:layout_marginRight="30dp"
            android:layout_marginTop="60dp"
            android:background="@null"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel7"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="5dp"
            android:background="@null"/>
    </RelativeLayout>


</RelativeLayout>

(2)MainActivity.java

package com.youkumenu;

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

import com.youkumenu.utils.AnimationUtils;

public  class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private RelativeLayout rl_level1;
    private RelativeLayout rl_level2;
    private RelativeLayout rl_level3;
    boolean isLevel1Display=true;
    boolean isLevel2Display=true;
    boolean isLevel3Display=true;


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

        //初始化控件
        initViews();
    }

    //自定义方法，初始化UI布局
    private void  initViews(){
        findViewById(R.id.ib_home).setOnClickListener(this);
        findViewById(R.id.ib_menu).setOnClickListener(this);
        rl_level1= (RelativeLayout) findViewById(R.id.rl_level1);
        rl_level2= (RelativeLayout) findViewById(R.id.rl_level2);
        rl_level3= (RelativeLayout) findViewById(R.id.rl_level3);
    }

    //捕获手机菜单键的按下
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //keycode 事件码
        //keyevent 保存了当前事件的其他信息，如单击，双击等等
        if(keyCode == KeyEvent.KEYCODE_MENU){//如果按下去的是手机菜单

            if(isLevel1Display){
                long delay=0;
                if(isLevel3Display){
                    AnimationUtils.rotateOutAnim(rl_level3,0);//如果三级菜单存在，转出去
                    isLevel3Display=false;
                    delay+=200;
                }
                if(isLevel2Display){
                    AnimationUtils.rotateOutAnim(rl_level2,delay);//如果第二级级菜单存在，转出去
                    isLevel2Display=false;
                    delay+=200;
                }

                    AnimationUtils.rotateOutAnim(rl_level1,delay);//如果第二级级菜单存在，转出去


            }else{
                //顺次转进来，一级，二级，三级
                AnimationUtils.rotateInAnim(rl_level1,0);
                AnimationUtils.rotateInAnim(rl_level2,200);
                isLevel2Display=true;
                AnimationUtils.rotateInAnim(rl_level3,400);
                isLevel3Display=true;

            }


            isLevel1Display=!isLevel1Display;
            return true;//表示消费了当前事件
        }


        return super.onKeyDown(keyCode, event);
    }

    @Override
    public void onClick(View v){
        if(AnimationUtils.runningAnimationCount>0){
            //表示当前有动画正在执行，不执行当前点击事件
            return;
        }


       switch (v.getId()){
           case R.id.ib_home:
               //逻辑代码
               //如果三级菜单已经显示，点击-->让菜单转出去
               //如果三级菜单没有显示，点击-->让菜单转进来显示
               if(isLevel2Display){
                   //定义新变量，来保存level2延迟的时间，如果三级菜单存在，延迟200，如果三级菜单不存在，则保持默认0
                   long delay=0;
                   //考虑三级菜单是否存在
                   if(isLevel3Display){
                       AnimationUtils.rotateOutAnim(rl_level3,0);
                       isLevel3Display=false;
                       delay=200;
                   }

                   AnimationUtils.rotateOutAnim(rl_level2,delay);//设置level3先转，然后level2转

                   isLevel2Display=false;
               }else{
                   AnimationUtils.rotateInAnim(rl_level2, 0);
                   isLevel2Display=true;
               }
                break;
           case R.id.ib_menu:
               //逻辑代码
               //如果三级菜单已经显示，点击-->让菜单转出去
               //如果三级菜单没有显示，点击-->让菜单转进来显示
                if(isLevel3Display){
                    AnimationUtils.rotateOutAnim(rl_level3,0);
                    isLevel3Display=false;
                }else{
                    AnimationUtils.rotateInAnim(rl_level3, 0);
                    isLevel3Display=true;
                }
               break;
           default:
               break;

       }

    }
}

(3)工具类 AnimationUtils

package com.youkumenu.utils;

import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

/**
 * Created by zuojx on 2017/12/12.
 */

public class AnimationUtils {
    public static int runningAnimationCount=0;//表示当前在执行的动画的数量
    //旋转出去的动画
    public static void rotateOutAnim(RelativeLayout layout,long delay) {
       //如果转出去了，则找到所有的子view，进行隐藏
        int childCount = layout.getChildCount();
        for (int i=0;i<childCount;i++){
            layout.getChildAt(i).setEnabled(false);
        }

        RotateAnimation ra= new RotateAnimation(
               0f,-180f,  //开始、结束的角度 逆时针旋转，角度递减；顺时针旋转，角度递增
               Animation.RELATIVE_TO_SELF,0.5f,//相对的坐标点，指定旋转中心的X值
               Animation.RELATIVE_TO_SELF,1f);//相对的坐标点，指定旋转中心的Y值

        ra.setDuration(500);  //设定执行时长
        ra.setFillAfter(true); //设定动画停止在结束位置--->补间动画必须设定的参数
        ra.setStartOffset(delay);//设置动画开始延时时间
        ra.setAnimationListener(new MyAnimationListener());//转出动画添加监听事件

        layout.startAnimation(ra);
    }

    public static void rotateInAnim(RelativeLayout layout, long delay) {
        //如果转进来了，则找到所有的子view，进行启用
        int childCount = layout.getChildCount();
        for (int i=0;i<childCount;i++){
            layout.getChildAt(i).setEnabled(true);
        }
        RotateAnimation ra= new RotateAnimation(
                -180f,0f,  //开始、结束的角度 逆时针旋转，角度递减；顺时针旋转，角度递增
                Animation.RELATIVE_TO_SELF,0.5f,//相对的坐标点，指定旋转中心的X值
                Animation.RELATIVE_TO_SELF,1f);//相对的坐标点，指定旋转中心的Y值

        ra.setDuration(500);  //设定执行时长
        ra.setFillAfter(true); //设定动画停止在结束位置--->补间动画必须设定的参数
        ra.setStartOffset(delay);//设置动画开始延时时间
        ra.setAnimationListener(new MyAnimationListener());//转入动画添加监听事件

        layout.startAnimation(ra);
    }



    static class MyAnimationListener implements Animation.AnimationListener{

        @Override
        public void onAnimationStart(Animation animation) {
            runningAnimationCount++;
        }

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

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    }
}