前言
对于许多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中绘制一个圆,半径为宽高中短边的一半。
代码语言：javascript复制@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的源码：
代码语言：javascript复制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即可，代码如下所示:
代码语言：javascript复制@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
代码语言：javascript复制<com.support.hlq.layout.CircleView
android:padding="50dp"
android:background="@color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="match_parent" />不做特殊处理时，运行结果如下:
我们可以看到设置的padding并没有生效，我们需要在onDraw中绘制的时候考虑边距即可，代码如下
代码语言：javascript复制@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文件
代码语言：javascript复制<?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 获取自定义的属性
代码语言：javascript复制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" />运行结果如下图所示
如此一来，一个比较规范的自定义view就完成了。
