自定义View快速入门（一）

思路

首先，为什么需要自定义View？

1. 现有的View满足不了你的需求，也没有办法从已有控件派生一个出来；界面元素需要自己绘制。
2. 现有View可以满足要求，把它做成自定义View只是为了抽象：为这个自定义View提供若干方法，方便调用着操纵View。通常做法是派生一个已有View，或者结合xml文件直接inflate。

目前常用的基本上是第二种方式，这种方式非常简单，与通常的View使用方法基本相同，但是作用却异常强大，拥有了这一层抽象，代码更加整洁也更容易维护，通过抽取自定义View的公共操作方法也减少了冗余代码，虽然简单，但不可忽视。大多数人感觉神秘的应该是第一种，自绘控件，完全自定义；但其实这两种方式归根结底全部都是自绘；不信你去看看TextView的源码。只不过通常情况下系统帮我们绘制好了一些控件给开发者使用；OK，接下来就是一个问题。在讲述之前我还是啰嗦地重申一下，复用已有View是最最常用也最有效的自定义View方式，必须熟练使用。

然后，了解自定义控件步骤

1. 写一个自定义控件类
2. 在res/values下建一个attrs.xml文件，增加对控件的自定义属性的定义
3. 使用两个参数的构造方法，将变量与attrs.xml文件中的属性连接起来
4. 在布局中使用属性
5. 将自定义控件带到xml中

最后，需要知道自定义控件的两种方式

1. 继承ViewGroup， 例如：ViewGroup、LinearLayout、FrameLayout、RelativeLayout等
2. 继承View， 例如：View、TextView、ImageView、Button等。

---

自定义离不开基本绘制原理：

View的绘制基本上是由onMeasure（）、onLayout（）、onDraw（）这三个函数完成

1.）测量（使用频率高）-Measure过程是计算视图大小，View measure过程相关方法主要有三个：

public final void measure(int widthMeasureSpec, int heightMeasureSpec)  
protected final void setMeasuredDimension(int measuredWidth, int measuredHeight)  
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  

measure调用onMeasure，onMeasure测量宽度、高度然后调用setMeasureDimension保存测量结果，measure，setMeasureDimension是final类型，view的子类不需要重写，onMeasure在view的子类中重写。

关于MeasureSpec：
(1) UPSPECIFIED :父容器对于子容器没有任何限制,子容器想要多大就多大，对于控件尺寸来说，没有任何参考意义
(2) EXACTLY父容器已经为子容器设置了尺寸,子容器应当服从这些边界,不论子容器想要多大的空间，代表的是精确的尺寸
(3) AT_MOST子容器可以是声明大小内的任意大小，代表的是最大可获得控件

2.）布局-Layout过程用于设置视图在屏幕中显示的位置，会决定具体View的大小和位置,View layout过程相关方法主要要三个：

public void layout(int l, int t, int r, int b)
protected boolean setFrame(int left, int top, int right, int bottom)
protected void onLayout(boolean changed, int left, int top, int right, int bottom)

layout通过调用setFrame（l,t,r,b），l,t,r,b即子视图在父视图中的具体位置，onLayout一般只会在自定义ViewGroup中才会使用

3.)绘制-draw过程主要用于利用前两步得到的参数，将视图显示在屏幕上，到这里也就完成了整个的视图绘制工作

canvas:画布 paint:画笔

public void draw(Canvas canvas)
protected void onDraw(Canvas canvas)

通过调用draw函数进行视图绘制，在View类中onDraw函数是个空函数，最终的绘制需求需要在自定义的onDraw函数中进行实现，比如ImageView完成图片的绘制，如果自定义ViewGroup这个函数则不需要重载。

---

自定义控件示例：

这里先介绍继承View的方式为例，其实ViewGroup最终的继承的也是View。现在模拟一个需求场景，制作一个圆形。

public class WidgetZk extends View {
    private static final String TAG = "WidgetZk";
    private int mColor;

    public WidgetZk(Context context) {
        super(context);
    }

    public WidgetZk(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.WidgetZk);
        mColor= array.getColor(R.styleable.WidgetZk_color, Color.BLUE);

        array.recycle();//重复使用
        Log.e(TAG, "attrsSize调用自定义" + mColor+"色");

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(widthMeasureSpec);

        switch (widthMode) {
            case MeasureSpec.EXACTLY:

                break;
            case MeasureSpec.AT_MOST:

                break;
            case MeasureSpec.UNSPECIFIED:

                break;
        }
        Log.e(TAG, "onMeasure--widthMode-->" + widthMode);
        Log.e(TAG, "onMeasure--widthSize-->" + widthSize);
        Log.e(TAG, "onMeasure--heightMode-->" + heightMode);
        Log.e(TAG, "onMeasure--heightSize-->" + heightSize);
    }
/** 
 * 当这个view和其子view被分配一个大小和位置时，被layout调用。 
 * @param changed 当前View的大小和位置改变了 
 * @param left 左部位置（相对于父视图） 
 * @param top 顶部位置（相对于父视图） 
 * @param right 右部位置（相对于父视图） 
 * @param bottom 底部位置（相对于父视图） 
 */ 
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        Log.e(TAG, "onLayout ");
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth();
        int height = getHeight();
        Paint paint = new Paint();
        //设置自定义颜色，在xml中动态添加
        paint.setColor(mColor);
        //画圆
        canvas.drawCircle(width / 2, height / 2, width/4, paint);
        Log.e(TAG, "onDraw");
    }
}

attrs.xml 最快了解自定义属性attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="WidgetZk">
        <!--添加属性-->
        <attr name="color" format="color" />
    </declare-styleable>
</resources>

在布局中使用

   <com.zk.customwidget.WidgetZk
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        zkbilian:color="@color/colorAccent" />

显示效果

---

到这里已经讲解完毕，谢谢大家花了这么长事件来看我这篇文章