从0到1深入浅出自定义控件的点点滴滴

最新推荐文章于 2024-10-10 10:17:26 发布

zhangtuodd

最新推荐文章于 2024-10-10 10:17:26 发布

阅读量211

点赞数

分类专栏： android 文章标签：控件 android-studio android 安卓安卓开发

本文链接：https://blog.csdn.net/zhangtuodd/article/details/78395653

版权

android 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小记：昨日朋友相聚，相谈甚欢，半夜凌晨酒意散，渴醒，思维发散。早起，一缕阳光，一支烟，一杯清茶，一张简桌，安静，惬意，自由。

写在前面

原创文章,转载请保留出处！
http://www.jianshu.com/p/e2ddf2ae2148

本篇将介绍自定义控件的点点滴滴。你将了解自定义控件的如下知识：
- 常见的几种自定义控件
- 为什么要使用
- onMeasure、onLayout、onDraw的使用场景
- 整体书写过程
- 自定义属性的作用以及怎么用
- 个人书写的几个案例

常见的几种自定义控件

组合属性扩展控件，利用常用API给单一控件提供多种功能（如：一个带有沉浸式的toolbar；一个带有点击事件的TextView；）
组合控件，控件件根据业务相互联系，对外使用时作为一个整体的控件，达到独立使用（如：点击收起隐藏的可扩展TextView；上文的上下拉刷新控件-组合SwipeRefreshLayout + RecyclerView）
一些有特定显示效果的控件（仪表盘；播放器的音频跳动条；）

为什么要使用自定义控件

关于为什么要使用我觉得无外乎两点：
1. 从产品功能出发 - 系统现有API达不到特定的效果
2. 从代码结构出发 - 使控件封装组合，对外单一暴露，达到面向对象的效果，方便维护和复用

onMeasure()、onLayout()、onDraw()的使用场景

注：上面三个方法是根据具体情况相机使用，不是必须同时使用，下面会讲解每个方法是用来干什么以及怎么使用

- onMeasure（介绍其职责、你怎么去使用操作）

onMeasure - 主要负责测量控件来设置控件的大小。

普及个常识，方便理解：
比如你写了一个textView，你需要去设置宽高，可以wrap_content，可以match_parent，也可以是具体的某个数值，当你设置完后，编译textView时系统会调用onMeasure根据你所设置的值去测量控件的大小。（根据文字的大小，系统默认控件的内间距）
注意这里仅仅是测量，不包括她显示在哪个位置以及绘制（显示）

那么你怎么去操作使用？
1 - 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法。

ps：为了阐明清楚，这里做一个讲解。onMeasure测量，系统是通过两个方面来确定大小的：模式和大小(specMode 和specSize)。spaceMode有三个值 – 1，当控件宽高是match_parent或者是几dp时值为MeasureSpec.EXACTLY，代表精确；；2，当控件宽高是wrap_content时值为MeasureSpec.AT_MOST，代表控件兼容内部内容时，大小最大不会超过控件的父布局；；3，值为MeasureSpec.UNSPECIFIED时代表控件想有多大便有多大，不常用，一般由于滑动控件

2 - 根据参数获取控件的宽高并设置，这里有个常用的代码模版

    int defaultSize = 200;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = measureSize(defaultSize, heightMeasureSpec);
        int width = measureSize(defaultSize, widthMeasureSpec);

        //重中之重，用来根据获取的值测量view的大小
        setMeasuredDimension(width, height);
    }

    private int measureSize(int defaultSize, int measureSpec) {
        int result = defaultSize;
        int specMode = View.MeasureSpec.getMode(measureSpec);
        int specSize = View.MeasureSpec.getSize(measureSpec);
        if (specMode == View.MeasureSpec.EXACTLY) {
            //当布局宽高是match_parent或者某一个具体的dp
            result = specSize;

        } else if (specMode == View.MeasureSpec.AT_MOST) {
            //当布局宽高是wrap_content，你需要一个默认的值defaultSize

        } else if (specMode == MeasureSpec.UNSPECIFIED) {

        }
        return result;
    }

- onLayout（介绍其职责、你怎么去使用操作）

onLayout负责控件所在布局中位置。主要应用于确定ViewGroup中子View的位置，在View给其孩子设置尺寸和位置时被调用。
怎么去使用？
子View必须重写onLayout(boolean, int, int, int, int)方法，并且调用各自的layout(int, int, int, int)方法。

API: onLayout(boolean changed, int left, int top, int right, int bottom);
参数讲解：

1）参数changed表示view有新的尺寸或位置；
2）参数l表示相对于父view的Left位置；
3）参数t表示相对于父view的Top位置；
4）参数r表示相对于父view的Right位置；
5）参数b表示相对于父view的Bottom位置；

如下图示：注意Y轴向下为正
坐标图.png
2 - 一般用法：

       // 获得所有子View个数
        int childCount = getChildCount();
        // 遍历子View
        for (int i = 0; i < childCount; i++) {
            View childView = getChildAt(i);
            // 获得子View的高度
            int childViewHeight = childView.getMeasuredHeight();
            // 获得子View的宽度
            int childViewWidth = childView.getMeasuredWidth();
            // 下面这行是核心api，调用layout给每一个子View设定位置(根据ui要求而定，是一个数学运算)
            childView.layout(mLeft, height, mLeft + childViewWidth, height  + childViewHeight);
        }

- onDraw（介绍其职责、你怎么去使用操作）

onDraw负责控件的绘制显示
API : onDraw(Canvas canvas)
Canvas中的方法很多,Canvas可以绘制的对象有：
弧线(arcs) canvas.
填充颜色(argb和color)
Bitmap
圆(circle和oval)
点(point)
线(line)
矩形(Rect)
图片(Picture)
圆角矩形 (RoundRect)
文本(text)
顶点(Vertices)
路径(path)
如下代码绘制圆形：

        rectPaint = new Paint();
        rectPaint.setStyle(Paint.Style.STROKE);//只描边
        rectPaint.setStrokeWidth(barWidth);
        rectPaint.setColor(Color.parseColor("#F2935B"));

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            canvas.drawArc(mRectF, 0, 360, false, circleBgPaint);
        }

ps：invalidate()和postInvalidate()都可以调用OnDraw()，用来主动更新ui，前者是在UI线程自身中使用，而后者在非UI线程中使用。

整体书写过程

自定义控件没有特定的书写过程，你根据具体的产品和UI要求而定。有时不需要重写onMeasure、onLayout、onDraw这三个方法（如下面demo中的自定义带有沉浸式状态栏的toolbar）、有时需要重写里面的某几个方法(如demo中的自定义动态音频跳动条和一个带动画进度的圆环)。但是自定义控件有一定的绘制流程，即执行顺序。
绘制过程：
onFinishInflate()
onAttachedToWindow()
onMeasure(int widthMeasureSpec, int heightMeasureSpec)
onLayout(boolean changed, int l, int t, int r, int b)
onDraw(Canvas canvas)
onDetachedFromWindow()

自定义属性的作用以及怎么用

作用或者意义吧，了解这些后你就知道什么时候用以及为什么用。

作用1：扩展了系统没有的属性。举个例子：比如你现在的业务场景中需要定义一个根据数值来确定圆弧角度的进度条，你需要定义进度条的颜色，宽度，开始角度等等，这时你可以自己定义控件的这些属性。当然较真的你可能会发现像这些属性都可以通过系统API来实现，没错，确实如此，这也是引入作用2的原因。
作用2：自定义属性可以是你的控件变成动态可以配置的，使你的控件可以动态控制大小、宽高、速度、颜色等等等等。因为这时你的控件持有了特定意义的属性，可以在xml配置不同属性的值，来是你的控件“活动”起来。
总结：最终其实是你在xml设置相关属性的值，然后在自定义控件代码中获取这个属性的值，根据这个值执行相关的逻辑来达到你的效果
- ######怎么用？
  不废话，上代码。
定义你需要的属性（在res - values - attri.xml）

    <declare-styleable name="CircleBarView">
        <attr name="circle_color" format="color"></attr>
        <attr name="circle_bg_color" format="color"></attr>
        <attr name="circle_stoken_width" format="dimension"></attr>
        <attr name="start_angle" format="float"></attr>
    </declare-styleable>

ps: declare-styleable name = ***; 这代表你定义属性的整体引用名字
2. 设置xml中的控件属性值

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

    <ui.customview.CircleBarView
        android:id="@+id/circle_bar_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:circle_bg_color="@android:color/darker_gray"
        app:circle_color="@android:color/holo_green_dark"
        app:circle_stoken_width="20dp"
        app:start_angle="90"
        />
</RelativeLayout>

这里声明下：关于自定义属性你需要引入命名空间，在跟布局中引入xmlns:app="http://schemas.android.com/apk/res-auto"，控件中通过命名空间app来索引定义的属性
3. 代码中获取属性的值

    public CircleBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, @Nullable AttributeSet attrs) {
        //通过属性的整体引用名字来获取全部属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleBarView);
        //参数1-xml中的相应属性的值，参数2-获取不到时默认显示的值
        int circleBgColor = typedArray.getColor(R.styleable.CircleBarView_circle_bg_color, Color.GRAY);
        int circleColor = typedArray.getColor(R.styleable.CircleBarView_circle_color, Color.GREEN);
        barWidth = typedArray.getDimension(R.styleable.CircleBarView_circle_stoken_width, px2dip(context, 10));
        startAngle = typedArray.getFloat(R.styleable.CircleBarView_start_angle, 0);
        //记着回收
        typedArray.recycle();
    }

通过以上三步实现定义属性和取值过程，最终其实是你在xml设置相关属性的值，然后在自定义控件代码中获取这个属性的值，根据这个值执行相关的逻辑来达到你的效果

注：属性的取值类型（attr中的format）有如下几种
     1.reference:参考指定Theme中资源ID,这个类型意思就是你传的值可以是引用资源
     2.string:字符串,如果你想别人既能直接写值也可以用类似"@string/test"引用资源的方式,可以写成format="string|reference"
     3.Color：颜色
     4.boolean：布尔值
     5.dimension：尺寸值
     6.float：浮点型
     7.integer：整型
     8.fraction：百分数
     9.enum：枚举 ,如果你提供的属性只能让别人选择,不能随便传入,就可以写成这样
        <attr name="language">
              <enum name="china" value="1"/>
              <enum name="English" value="2"/>
        </attr>
     10.flag：位或运算