写作原因：Android进阶过程中有一个绕不开的话题——自定义View。这一块是安卓程序员更好地实现功能自主化必须迈出的一步。下面这个系列博主将通过实现几个例子来认识安卓自定义View的方法。从自定义View到自定义ViewGroup，View事件处理再到View深入分析(这一章如果水平未到位可能今后再补充)，其中会涉及一些小的知识，包括Canvas的使用、动画等等。系列第一篇文章通过绘制一个心形进度条来学习自定义View的整体流程和简单地贝塞尔曲线的用法。下面开始折磨键盘吧。

最终效果

先看看今天我们要实现的效果：

效果

具体功能就是一个心形的进度条，跟普通的进度条相似，但是显示进度的方式和整体的外观实现了自定义化。这个进度条会根据进度不断加深颜色，效果还不错。通过这个例子读者可以学会基本的自定义View的方法。

基本思路

我们需要新建一个attrs.xml来描述HeartProgressBar的属性，一个HeartProgressBar.java继承ProgressBar(直接继承View也行)，然后通过取出属性，测量，绘制几步来实现自定义View全过程。

具体实现

一、定义XML属性文件

新建values/attrs.xml，在XML中声明好各个属性，注意一下format，详细的用法参考官方文档。然后在标签下引入属性，具体见下面：

二、获取XML中的属性

这一步我们使用obtainAttributes()方法来获取开发者在布局中为我们的View设定的参数值。通过TypedArray ta = getResources().obtainAttributes(attrs,R.styleable.HeartProgressBar);获得TypedArray对象，使用该对象的get系列方法来获取参数值，如：unReachedColor = ta.getColor(R.styleable.HeartProgressBar_UnReachedColor,UNREACHEDCOLOR_DEFAULT);。后面的UNREACHEDCOLOR_DEFAULT是默认参数值，是view创建者定义的，注意尺寸相关的需要进行单位转换。这样就取到了View的参数，这些参数是我们用来定义View的部分元素。

三、调用onMeasure()测量

这一步常常令许多人头大甚至望而却步，看了很多资料也理解不了。我在这里分享一下对于这一块的理解，希望能够帮助大家理解。首先得明白View的规格是受承载它的View或者ViewGroup影响的。这点很重要，因为这点才出现了三种测量模式：MeasureSpec.EXACTLY、MeasureSpec.UNSPECIFIED和MeasureSpec.AT_MOST。这三种测量模式分别对应三种情况：View有确定的宽高(包括match_parent和具体值两种情况)，此时使用EXACTLY，直接把MeasureSpec.getSize()返回就行;View没有确定的宽高(即wrap_content)，此时可能系统会使用MeasureSpec.UNSPECIFIED或者MeasureSpec.AT_MOST。在MeasureSpec.UNSPECIFIED中我们把尽量容纳View的尺寸返回给父View去处理，而在MeasureSpec.AT_MOST中则由于父View对子View的限制需要比对父View的限制的最大情况和子View尽可能容纳的尺寸，然后返回相对较小的值。看看本文的例子：

int usedHeight = getRealHeight(heightMeasureSpec);

int usedWidth = getRealWidth(widthMeasureSpec);

setMeasuredDimension(usedWidth,usedHeight);

这里将宽高测量后使用setMeasureDimension()返回给父View去处理。

以宽为例，代码如下：

public int getRealWidth(int widthMeasureSpec) {

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int widthVal = MeasureSpec.getSize(widthMeasureSpec);

//取得父View或ViewGroup分配的默认为子View的大小和模式

paddingLeft = getPaddingLeft();

paddingRight = getPaddingRight();

//注意处理一下Padding，把Padding值也赋给想要设置的子View的大小

if(widthMode == MeasureSpec.EXACTLY){

return paddingLeft+paddingRight+widthVal;

//精确模式下返回具体值

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

return (int) (Math.abs(underPaint.ascent()-underPaint.descent()) + paddingLeft + paddingRight);

//未确定模式下返回尽可能容纳View的尺寸

}else{

return (int) Math.min((Math.abs(underPaint.ascent()-underPaint.descent()) + paddingLeft + paddingRight),widthVal);

//AT_MOST下返回父View限制值和View尽可能大尺寸之间的最小值

}

}

使用MeasureSpec.getMode()和getSize()分别取得测量模式和大小，然后处理三种测量模式下的大小值，最后再使用setMeasureDimension()将值返回。对于三种模式下的处理见上面的注释。自定义View中的测量是一块难点，应该详细阅读并实践。

四、重写onSizeChanged()获取最终View的宽高值

当父View真正为子View分配好空间后会回调这个方法，所以我们应该在里面取得最终的大小值。代码如下：

realWidth = w;

realHeight = h;

五、重写onDraw()方法绘制图像

这一步是整个流程中的重点步骤，所有的绘制工作都是在这里进行的。一般绘制的时候都要考虑尺寸问题，我们使用的宽高尺寸是onSizeChanged里面取出的，使用该尺寸来绘制，注意一定要对Padding进行处理(博主写完发现没处理，现在要修改发现很浪费时间就没做处理了。。。读者可以自行处理作为练习)这里有个难点，由于心形的特殊性，我们使用贝塞尔曲线来绘制。关于贝塞尔曲线，在这里就不班门弄斧了，只是说一下这种曲线可以将许多复杂的曲线转化成数学公式来描述，曲线由两种类型的点决定：起末点决定曲线的大概位置，其他点决定曲线的形状和弯曲程度。贝塞尔曲线有一阶二阶三阶高阶之分，具体见下面图片。

一阶

二阶

三阶

高阶

安卓中支持二阶和三阶贝塞尔曲线，方法分别为quadTo()和cubicTo()两个。本文使用cubicTo来实现。但是想想心形的形状，如果真的要自己用数学的方法去确定那几个点的位置，呵呵，我是办不到了。那怎么办？博主找到一个方法，在线生成贝塞尔曲线然后用ps标尺工具来确定点与宽高的比例关系……虽然还是很麻烦，但我还没想到别的方法或者工具。(Canvas二次贝塞尔曲线操作实例，这是一个为h5服务的贝塞尔曲线生成工具，将就用下……)如果读者有希望能分享一下，谢谢！

这是我得到的测量图(就是在这里忘了考虑padding，改起来又很麻烦)：

测量图

接下来就是利用这张图和Canvas来作图了，主要路径关注路径和颜色深浅表示进度的实现：

float pro = ((float)progress)/100.0f; int nowColor = (int) argbEvaluator.evaluate(pro,unReachedColor,reachedColor); underPaint.setColor(nowColor);

上面代码实现了View的颜色随着进度的变化而从某个颜色向另一个颜色变化的功能。ArgbEvaluator类挺实用的，可以实现微信底部滑动颜色变化的功能，这里也是利用它来实现的。

```

path.moveTo((float) (0.5*realWidth), (float) (0.17*realHeight));

path.cubicTo((float) (0.15*realWidth), (float) (-0.35*realHeight), (float) (-0.4*realWidth), (float) (0.45*realHeight), (float) (0.5*realWidth),realHeight);

path.moveTo((float) (0.5*realWidth),realHeight);

path.cubicTo((float) (realWidth+0.4*realWidth), (float) (0.45*realHeight),(float) (realWidth-0.15*realWidth), (float) (-0.35*realHeight),(float) (0.5*realWidth), (float) (0.17*realHeight));

path.close();

```

上述代码是path路径的绘制，绘制了一个心形的path，如果对于这两个方法有疑问的可以查看API文档。

由于我们的进度条跟随进度发生变化，所以我们要重写setProgress()方法，使用invalidate()来刷新onDraw()重绘实现变化。代码如下：

@Override

public void setProgress(int progress) {

this.progress = progress;

invalidate();

}

总结

Android自定义View除了上面的测量绘制之外还有对点击事件的处理一大块，这里每个地方都需要花时间去理解和实践才能搞懂，下篇博主会就事件处理和动画一块再次自定义一个View，如果觉得写得好的希望继续关注并喜欢我的简书，也可以关注我的博客。

附录：View具体代码

public class HeartProgressBar extends ProgressBar {

private final static int UNREACHEDCOLOR_DEFAULT = 0xFF69B4;

private final static int REACHEDCOLOR_DEFAULT = 0xFF1493;

private final static int INNERTEXTCOLOR_DEFAULT = 0xDC143C;

private final static int INNERTEXTSIZE_DEFAULT = 10;

private static final int PROGRESS_DEFAULT = 0;

private int unReachedColor;

private int reachedColor;

private int innerTextColor;

private int innerTextSize;

private int progress;

private int realWidth;

private int realHeight;

private Paint underPaint;

private Paint textPaint;

private Path path;

private int paddingTop;

private int paddingBottom;

private int paddingLeft;

private int paddingRight;

private ArgbEvaluator argbEvaluator;

public HeartProgressBar(Context context) {

this(context,null);

}

public HeartProgressBar(Context context, AttributeSet attrs) {

super(context, attrs);

argbEvaluator = new ArgbEvaluator();

TypedArray ta = getResources().obtainAttributes(attrs,R.styleable.HeartProgressBar);

unReachedColor = ta.getColor(R.styleable.HeartProgressBar_UnReachedColor,UNREACHEDCOLOR_DEFAULT);

reachedColor = ta.getColor(R.styleable.HeartProgressBar_ReachedColor,REACHEDCOLOR_DEFAULT);

innerTextColor = ta.getColor(R.styleable.HeartProgressBar_InnerTextColor,INNERTEXTCOLOR_DEFAULT);

innerTextSize = (int) ta.getDimension(R.styleable.HeartProgressBar_InnerTextSize,INNERTEXTSIZE_DEFAULT);

progress = ta.getInt(R.styleable.HeartProgressBar_Progress,PROGRESS_DEFAULT);

ta.recycle();

Log.i("nowColor",progress+"");

//声明区

underPaint = new Paint();

textPaint = new Paint();

path = new Path();

//构造画笔区

underPaint.setStyle(Paint.Style.FILL_AND_STROKE);

underPaint.setStrokeWidth(5.0f);

textPaint.setColor(innerTextColor);

textPaint.setTextSize(innerTextSize);

textPaint.setTextAlign(Paint.Align.CENTER);

}

@Override

protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int usedHeight = getRealHeight(heightMeasureSpec);

int usedWidth = getRealWidth(widthMeasureSpec);

setMeasuredDimension(usedWidth,usedHeight);

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

realWidth = w;

realHeight = h;

}

@Override

protected synchronized void onDraw(Canvas canvas) {

super.onDraw(canvas);

paddingBottom = getPaddingBottom();

paddingTop = getPaddingTop();

paddingLeft = getPaddingLeft();

paddingRight = getPaddingRight();

float pro = ((float)progress)/100.0f;

Log.i("nowColor","pro"+pro+"");

int nowColor = (int) argbEvaluator.evaluate(pro,unReachedColor,reachedColor);

underPaint.setColor(nowColor);

path.moveTo((float) (0.5*realWidth), (float) (0.17*realHeight));

path.cubicTo((float) (0.15*realWidth), (float) (-0.35*realHeight), (float) (-0.4*realWidth), (float) (0.45*realHeight), (float) (0.5*realWidth),realHeight);

path.moveTo((float) (0.5*realWidth),realHeight);

path.cubicTo((float) (realWidth+0.4*realWidth), (float) (0.45*realHeight),(float) (realWidth-0.15*realWidth), (float) (-0.35*realHeight),(float) (0.5*realWidth), (float) (0.17*realHeight));

path.close();

canvas.drawPath(path,underPaint);

canvas.drawText(String.valueOf(progress),realWidth/2,realHeight/2,textPaint);

}

public int getRealHeight(int heightMeasureSpec) {

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int heightVal = MeasureSpec.getSize(heightMeasureSpec);

paddingTop = getPaddingTop();

paddingBottom = getPaddingBottom();

if(heightMode == MeasureSpec.EXACTLY){

return paddingTop + paddingBottom + heightVal;

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

return (int) (Math.abs(underPaint.ascent()-underPaint.descent()) + paddingTop + paddingBottom);

}else{

return (int) Math.min((Math.abs(underPaint.ascent()-underPaint.descent()) + paddingTop + paddingBottom),heightVal);

}

}

public int getRealWidth(int widthMeasureSpec) {

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int widthVal = MeasureSpec.getSize(widthMeasureSpec);

paddingLeft = getPaddingLeft();

paddingRight = getPaddingRight();

if(widthMode == MeasureSpec.EXACTLY){

return paddingLeft+paddingRight+widthVal;

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

return (int) (Math.abs(underPaint.ascent()-underPaint.descent()) + paddingLeft + paddingRight);

}else{

return (int) Math.min((Math.abs(underPaint.ascent()-underPaint.descent()) + paddingLeft + paddingRight),widthVal);

}

}

@Override

public void setProgress(int progress) {

this.progress = progress;

invalidate();

}

}