自定义View开篇，必须跨过的一道坎儿

黄林晴

发布于 2020-02-17 10:21:10

7260

发布于 2020-02-17 10:21:10

前言

对于许多Android开发者而言，无论工作的方向是什么，自定义View是不得不跨过去的一道坎儿，相信很多伙伴有这样的感受，关于自定义View的知识都看的明白，甚至滚瓜烂熟，但是遇到自定义View实战的时候，还是感觉无从下手，其实想学好自定义View，只有一个字，'练"，从今天开始我会持续开始写自定义View系列的文章，一方面巩固自己的基础，另一方面温故而知新。

自定义view的方式及异同

继承自View
继承自ViewGroup
继承自特定现有的View 如TextView
继承自特定现有的ViewGroup 如LinerLayout

我们先说继承自View和ViewGroup，这两种方式和后面两种相比更接近于底层，可实现的view更加多样化，但是这两种方式需要处理wrap_content的情况以及padding，否则会出现显示问题。

继承自ViewGroup的控件比较复杂，需要自行处理onMeasure以及onLayout方法，margin是由父控件决定的，所以继承自View的自定义控件只需要处理padding，但是继承自ViewGroup的控件需要处理自身的padding以及子控件的margin

如何处理wrap_content问题

首先我们举个例子绘制一个简单的圆形。新建CircleView类继承自View，生成三个构造方法，至于每个构造方法有什么区别我在Android自定义View之绘制圆形头像提到过，初始化画笔等操作都是基础操作，这里就不再赘述了，在onDraw中绘制一个圆,半径为宽高中短边的一半。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth();
    int height = getHeight();
    int radius = Math.min(width,height) / 2;
    canvas.drawCircle(width / 2,height/2,radius,paint);
}

在布局中引用这个view，设置宽高为300dp，为了方便看效果我们给这个view设置蓝色背景。运行效果图如下

接下里我们，设置宽高为wrap_content，运行效果图如下，我们可以看到效果和设置match_parent是一样的

所以针对wrap_content问题，最简单的方式是设置一个默认值，至于默认值设置多少，其实是随意的，那么你可能会问，那为什么TextView设置wrap_content 大小就是正好的呢，我们看一下TextView的源码：

if (widthMode == MeasureSpec.EXACTLY) {
    // Parent has told us how big to be. So be it.
    width = widthSize;
} else {
    if (mLayout != null && mEllipsize == null) {
        des = desired(mLayout);
    }

    if (des < 0) {
        boring = BoringLayout.isBoring(mTransformed, mTextPaint, mTextDir, mBoring);
        if (boring != null) {
            mBoring = boring;
        }
    } else {
        fromexisting = true;
    }

    if (boring == null || boring == UNKNOWN_BORING) {
        if (des < 0) {
            des = (int) Math.ceil(Layout.getDesiredWidthWithLimit(mTransformed, 0,
                    mTransformed.length(), mTextPaint, mTextDir, widthLimit));
        }
        width = des;
    } else {
        width = boring.width;
    }

    final Drawables dr = mDrawables;
    if (dr != null) {
        width = Math.max(width, dr.mDrawableWidthTop);
        width = Math.max(width, dr.mDrawableWidthBottom);
    }

    if (mHint != null) {
        int hintDes = -1;
        int hintWidth;

        if (mHintLayout != null && mEllipsize == null) {
            hintDes = desired(mHintLayout);
        }

        if (hintDes < 0) {
            hintBoring = BoringLayout.isBoring(mHint, mTextPaint, mTextDir, mHintBoring);
            if (hintBoring != null) {
                mHintBoring = hintBoring;
            }
        }

        if (hintBoring == null || hintBoring == UNKNOWN_BORING) {
            if (hintDes < 0) {
                hintDes = (int) Math.ceil(Layout.getDesiredWidthWithLimit(mHint, 0,
                        mHint.length(), mTextPaint, mTextDir, widthLimit));
            }
            hintWidth = hintDes;
        } else {
            hintWidth = hintBoring.width;
        }

        if (hintWidth > width) {
            width = hintWidth;
        }
    }

    width += getCompoundPaddingLeft() + getCompoundPaddingRight();

    if (mMaxWidthMode == EMS) {
        width = Math.min(width, mMaxWidth * getLineHeight());
    } else {
        width = Math.min(width, mMaxWidth);
    }

    if (mMinWidthMode == EMS) {
        width = Math.max(width, mMinWidth * getLineHeight());
    } else {
        width = Math.max(width, mMinWidth);
    }

    // Check against our minimum width
    width = Math.max(width, getSuggestedMinimumWidth());

    if (widthMode == MeasureSpec.AT_MOST) {
        width = Math.min(widthSize, width);
    }
}

我们可以看到，当设置的大小是具体值的时候宽度直接等于MeasureSpec获取的，如果测量模式是AT_MOST （设置wrap_content），就通过测量字体所占的宽度，最终取和系统测量的最小值。

对于上面的例子，我们直接设置为默认值为200即可，代码如下所示:

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

    if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(200,200);
    }else if (widthMode == MeasureSpec.AT_MOST){
      setMeasuredDimension(200,height);
    }else if (heightMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(width,200);
    }
}

运行结果如下图所示，这样我们自定义的View就完成了对wrap_content的处理。

如何支持padding

首先我们将布局文件设置为match_parent,设置上下左右边距为50dp

<com.support.hlq.layout.CircleView
    android:padding="50dp"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

不做特殊处理时，运行结果如下:

我们可以看到设置的padding并没有生效，我们需要在onDraw中绘制的时候考虑边距即可，代码如下

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth() - getPaddingLeft() - getPaddingRight();
    int height = getHeight() - getPaddingTop() - getPaddingBottom();
    int radius = Math.min(width,height) / 2;

    canvas.drawCircle(width / 2 + getPaddingLeft() ,height/2 + getPaddingTop(),radius,paint);
}

运行效果如下图所示

从上图中可以看出padding生效了，对于自定义View继承Viewgroup时，上述两个问题的处理方式是一样的，只不过因为margin是由父控件决定的，所以测量的时候还要考虑子控件的margin，详细问题会在后面实例讲解。考虑到上面几个问题之后，一个自定义View就比较合格了，不过还缺点什么，比如如何通过xml设置属性呢？

如何通过xml文件给自定义设置属性

上面例子中，绘制了一个红色的圆形，我们来通过xml属性配置绘制图形的颜色以及画笔的style吧

首先新建cycle_attr.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="cycleView">
        <attr name="viewColor" format="reference" />
        <attr name="paintStyle" >
            <enum name="fill" value="0" />
            <enum name="stroke" value="1" />
        </attr>
    </declare-styleable>
</resources>

使用declare-styleable标签声明名字为cycleView的属性列，viewColor 表示view的颜色，format所对应的是属性值的类型reference表示资源文件，比如颜色值、图片等，paintStyle表示画笔的属性，这里使用枚举类，也就是说自定义属性只能是这两个值。0表示填充类型，1表示描边类型。

在自定义View中通过TypedArray 获取自定义的属性

private void init(Context context, AttributeSet attributeSet) {

    TypedArray typedArray = context.obtainStyledAttributes(attributeSet,R.styleable.cycleView);
    //默认为填充类型
    int style = typedArray.getInt(R.styleable.cycleView_paintStyle,0);
    if (style == 1){
        paint.setStyle(Paint.Style.STROKE);
    }else {
        paint.setStyle(Paint.Style.FILL);
    }
    //默认为红色
    int color = typedArray.getColor(R.styleable.cycleView_viewColor,Color.RED);
    paint.setColor(color);
    
    typedArray.recycle();
}
默认设置为红色，类型为填充类型，接下来我们xml中设置自定义的属性,把view颜色改为粉红色，填充类型改为描边

<com.support.hlq.layout.CircleView
    app:viewColor = "@color/colorAccent"
    app:paintStyle = "stroke"
    android:padding="50dp"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

运行结果如下图所示