自定义控件

最新推荐文章于 2022-10-22 10:49:36 发布

huangju1314

最新推荐文章于 2022-10-22 10:49:36 发布

阅读量284

点赞数

分类专栏：安卓学习文章标签：自定义控件

本文链接：https://blog.csdn.net/huangju1314/article/details/52295565

版权

安卓学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

自定义控件有三种
组合已有的控件实现
-优酷菜单
1.在XNL布局里摆放好
2.给指定控件添加点击事件
3.执行动画（旋转动画）
4.菜单按钮的截获

-轮播图广告
-下拉选择框

继承已有的控件实现（扩展已有的功能）
-包含下拉刷新功能的ListView

完成自定义控件（继承View，ViewGroup）
-自定义开关
-侧滑面板

-优酷菜单
    1.在XNL布局里摆放好
    2.给指定控件添加点击事件
    3.执行动画（旋转动画）
    4.菜单按钮的截获

第一步：在XNL布局里摆放好
效果图：这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

        <ImageButton
            android:id="@+id/ib_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:background="@null"
            android:src="@mipmap/icon_home"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_level2"

        android:layout_width="190dp"
        android:layout_height="85dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@mipmap/level2">

        <ImageButton
            android:id="@+id/ib_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="8dp"
            android:layout_marginLeft="78dp"
            android:src="@mipmap/icon_menu"
            />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/icon_search"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="150dp"
            android:src="@mipmap/icon_myyouku"/>
    </RelativeLayout>

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

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:src="@mipmap/channel1"
            android:layout_marginTop="90dp"
            android:layout_marginLeft="18dp"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="40dp"
            android:src="@mipmap/channel2"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="80dp"
            android:src="@mipmap/channel3"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="130dp"
            android:src="@mipmap/channel4"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="180dp"
            android:src="@mipmap/channel5"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="50dp"
            android:layout_marginLeft="220dp"
            android:src="@mipmap/channel6"/>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_marginTop="90dp"
            android:layout_marginLeft="250dp"
            android:src="@mipmap/channel7"/>
    </RelativeLayout>


</RelativeLayout>

第二步：给指定控件添加点击事件

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements View.OnClickListener{

    private RelativeLayout rl_level1;
    private RelativeLayout rl_level2;
    private RelativeLayout rl_level3;

    boolean isLevel3Display = true;
    boolean isLevel2Display = true;
    boolean isLevel1Display = true;

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

        //初始化控件

        initView();
    }

    private void initView() {
        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 void onClick(View view) {
        switch (view.getId()) {
            case R.id.ib_home:
                if(isLevel2Display) {
                    //如果当前三级菜单已经显示，先转出去
                    if(isLevel3Display) {
                        //延时
                        AnimationUtils.rotateOutAnim(rl_level3,200);
                        isLevel3Display = false;
                    }

                    //如果当前二级菜单已经显示，转出去
                    AnimationUtils.rotateOutAnim(rl_level2,0);
                    isLevel2Display = false;
                } else  {
                    //如果当前二级菜单没有显示，转出来
                    AnimationUtils.rotateInAnim(rl_level2);
                    isLevel2Display = true;
                }
                break;
            case R.id.ib_menu:
                if(isLevel3Display) {
                    //如果当前三级菜单已经显示，转出去
                    AnimationUtils.rotateOutAnim(rl_level3,0);
                    isLevel3Display = false;
                } else  {
                    //如果当前三级菜单没有显示，转出来
                    AnimationUtils.rotateInAnim(rl_level3);
                    isLevel3Display = true;
                }
                break;
            default:
                break;
        }
    }
}

动画效果AnimationUtils.java：

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

/**
 * Created by huang on 2016/8/22.
 */
public class AnimationUtils {

    //旋转出去的动画
    //要执行动画需要传入布局
    public static void rotateOutAnim(RelativeLayout layout, long delay) {
        RotateAnimation ra = new RotateAnimation(
                0f, -180f, //开始， 结束的角度
                Animation.RELATIVE_TO_SELF, 0.5f, //相对的坐标点（指定旋转中心X值）
                Animation.RELATIVE_TO_SELF, 1.0f //相对的坐标点（指定选择中心Y值）
        );

        ra.setDuration(500);    //时间
        //动画终止时停留在最后一帧,不会回到没有执行之前的状态
        ra.setFillAfter(true);

        //延时
        ra.setStartOffset(delay); //设置动画开始延时

        //执行
        layout.startAnimation(ra);
    }

    public static void rotateInAnim(RelativeLayout layout) {
        RotateAnimation ra = new RotateAnimation(
                -180f, 0f, //开始， 结束的角度, 逆时针
                Animation.RELATIVE_TO_SELF, 0.5f, //相对的坐标点（指定旋转中心X值）
                Animation.RELATIVE_TO_SELF, 1.0f //相对的坐标点（指定选择中心Y值）
        );

        ra.setDuration(500);    //时间
        //动画终止时停留在最后一帧,不会回到没有执行之前的状态
        ra.setFillAfter(true);


        //执行
        layout.startAnimation(ra);

    }
}