欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义控件实现学习

程序员文章站 2022-06-12 22:45:58
...

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) {

        }
    }
}
相关标签: 设计