首先贴出实现的效果图：
gif的效果可能有点过快，在真机上运行的效果会更好一些。我们主要的思路就是利用属性动画来动态地画出选中状态以及对勾的绘制过程。看到上面的效果图，相信大家都迫不及待地要跃跃欲试了，那就让我们开始吧。
自定义View的第一步：自定义属性。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?xml version= "1.0" encoding= "utf-8" ?> <resources> <declare-styleable name= "SmoothCheckBox" > <!-- 动画持续时间 --> <attr name= "duration" format= "integer" ></attr> <!-- 边框宽度 --> <attr name= "strikeWidth" format= "dimension|reference" ></attr> <!-- 边框颜色 --> <attr name= "borderColor" format= "color|reference" ></attr> <!-- 选中状态的颜色 --> <attr name= "trimColor" format= "color|reference" ></attr> <!-- 对勾颜色 --> <attr name= "tickColor" format= "color|reference" ></attr> <!-- 对勾宽度 --> <attr name= "tickWidth" format= "dimension|reference" ></attr> </declare-styleable> </resources>我们把CheckBox取名为SmoothCheckBox，定义了几个等等要用到的属性。这一步很简单，相信大家都熟练了。
接下来看一看onMeasure(int widthMeasureSpec, int heightMeasureSpec):
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @Override protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { super .onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); if (widthMode == MeasureSpec.EXACTLY) { mWidth = widthSize; } else { mWidth = 40 ; } int heightSize = MeasureSpec.getSize(heightMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); if (heightMode == MeasureSpec.EXACTLY) { mHeight = heightSize; } else { mHeight = 40 ; } setMeasuredDimension(mWidth, mHeight); int size = Math.min(mWidth, mHeight); center = size / 2 ; mRadius = ( int ) ((size - mStrokeWidth) / 2 / 1 .2f); startPoint.set(center * 14 / 30 , center * 28 / 30 ); breakPoint.set(center * 26 / 30 , center * 40 / 30 ); endPoint.set(center * 44 / 30 , center * 20 / 30 ); downLength = ( float ) Math.sqrt(Math.pow(startPoint.x - breakPoint.x, 2f) + Math.pow(startPoint.y - breakPoint.y, 2f)); upLength = ( float ) Math.sqrt(Math.pow(endPoint.x - breakPoint.x, 2f) + Math.pow(endPoint.y - breakPoint.y, 2f)); totalLength = downLength + upLength; }一开始是测量了SmoothCheckBox的宽、高度，默认的宽高度随便定义了一个，当然你们可以自己去修改和完善它。然后就是设置半径之类的，最后的startPoint、breakPoint、endPoint分别对应着选中时对勾的三个点(至于为何是这几个数字，那完全是经验值);downLength就是startPoint和breakPoint的距离，而相对应的upLength就是breakPoint和endPoint的距离。即以下图示：
在看onDraw(Canvas canvas)之前我们先来看两组动画，分别是选中状态时的动画以及未选中状态的动画：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 // 由未选中到选中的动画 private void checkedAnimation() { animatedValue = 0f; tickValue = 0f; // 选中时底色的动画 mValueAnimator = ValueAnimator.ofFloat(0f, 1 .2f, 1f).setDuration( 2 * duration / 5 ); mValueAnimator.setInterpolator( new AccelerateDecelerateInterpolator()); // 对勾的动画 mTickValueAnimator = ValueAnimator.ofFloat(0f, 1f).setDuration( 3 * duration / 5 ); mTickValueAnimator.setInterpolator( new LinearInterpolator()); mTickValueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { // 得到动画执行进度 tickValue = ( float ) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { // 得到动画执行进度 animatedValue = ( float ) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.addListener( new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { //当底色的动画完成后再开始对勾的动画 mTickValueAnimator.start(); Log.i(TAG, " mTickValueAnimator.start();" ); } }); mValueAnimator.start(); } // 由选中到未选中的动画 private void uncheckedAnimation() { animatedValue = 0f; mValueAnimator = ValueAnimator.ofFloat(1f, 0f).setDuration( 2 * duration / 5 ); mValueAnimator.setInterpolator( new AccelerateInterpolator()); mValueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { animatedValue = ( float ) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.start(); }这两组动画在点击SmoothCheckBox的时候会调用。相似的，都是在动画执行中得到动画执行的进度，再来调用postInvalidate();让SmoothCheckBox重绘。看完这个之后就是终极大招onDraw(Canvas canvas)了:
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 @Override protected void onDraw(Canvas canvas) { super .onDraw(canvas); canvas.save(); drawBorder(canvas); drawTrim(canvas); if (isChecked) { drawTick(canvas); } canvas.restore(); } // 画对勾 private void drawTick(Canvas canvas) { // 得到画对勾的进度 float temp = tickValue * totalLength; Log.i(TAG, "temp:" + temp + "downlength :" + downLength); //判断是否是刚开始画对勾的时候,即等于startPoint if (Float.compare(tickValue, 0f) == 0 ) { Log.i(TAG, "startPoint : " + startPoint.x + ", " + startPoint.y); path.reset(); path.moveTo(startPoint.x, startPoint.y); } // 如果画对勾的进度已经超过breakPoint的时候,即(breakPoint,endPoint] if (temp > downLength) { path.moveTo(startPoint.x, startPoint.y); path.lineTo(breakPoint.x, breakPoint.y); Log.i(TAG, "endPoint : " + endPoint.x + ", " + endPoint.y); path.lineTo((endPoint.x - breakPoint.x) * (temp - downLength) / upLength + breakPoint.x, (endPoint.y - breakPoint.y) * (temp - downLength) / upLength + breakPoint.y); } else { //画对勾的进度介于startPoinit和breakPoint之间，即(startPoint,breakPoint] Log.i(TAG, "down x : " + (breakPoint.x - startPoint.x) * temp / downLength + ",down y: " + (breakPoint.y - startPoint.y) * temp / downLength); path.lineTo((breakPoint.x - startPoint.x) * temp / downLength + startPoint.x, (breakPoint.y - startPoint.y) * temp / downLength + startPoint.y); } canvas.drawPath(path, tickPaint); } // 画边框 private void drawBorder(Canvas canvas) { float temp; // 通过animatedValue让边框产生一个“OverShooting”的动画 if (animatedValue > 1f) { temp = animatedValue * mRadius; } else { temp = mRadius; } canvas.drawCircle(center, center, temp, borderPaint); } // 画checkbox内部 private void drawTrim(Canvas canvas) { canvas.drawCircle(center, center, (mRadius - mStrokeWidth) * animatedValue, trimPaint); }onDraw(Canvas canvas)代码中的逻辑基本都加了注释，主要就是原理搞懂了就比较简单了。在绘制对勾时要区分当前处于绘制对勾的哪种状态，然后对应做处理画出线条，剩下的就简单了。关于SmoothCheckBox的讲解到这里就差不多了。
下面就贴出SmoothCheckBox的完整代码：
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 public class SmoothCheckBox extends View implements View.OnClickListener { // 动画持续时间 private long duration; // 边框宽度 private float mStrokeWidth; // 对勾宽度 private float mTickWidth; // 内饰画笔 private Paint trimPaint; // 边框画笔 private Paint borderPaint; // 对勾画笔 private Paint tickPaint; // 默认边框宽度 private float defaultStrikeWidth; // 默认对勾宽度 private float defaultTickWidth; // 宽度 private int mWidth; // 高度 private int mHeight; // 边框颜色 private int borderColor; // 内饰颜色 private int trimColor; // 对勾颜色 private int tickColor; // 半径 private int mRadius; // 中心点 private int center; // 是否是选中 private boolean isChecked; //对勾向下的长度 private float downLength; //对勾向上的长度 private float upLength; // 对勾的总长度 private float totalLength; // 监听器 private OnCheckedChangeListener listener; private ValueAnimator mValueAnimator; private ValueAnimator mTickValueAnimator; private float animatedValue; private float tickValue; // 对勾开始点 private Point startPoint = new Point(); // 对勾转折点 private Point breakPoint = new Point(); // 对勾结束点 private Point endPoint = new Point(); private static final String TAG = "SmoothCheckBox" ; private static final String KEY_INSTANCE_STATE = "InstanceState" ; private Path path = new Path(); public void setOnCheckedChangeListener(OnCheckedChangeListener listener) { this .listener = listener; } public SmoothCheckBox(Context context) { this (context, null ); } public SmoothCheckBox(Context context, AttributeSet attrs) { this (context, attrs, 0 ); } public SmoothCheckBox(Context context, AttributeSet attrs, int defStyleAttr) { super (context, attrs, defStyleAttr); TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.SmoothCheckBox); duration = a.getInt(R.styleable.SmoothCheckBox_duration, 600 ); defaultStrikeWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1 , getResources().getDisplayMetrics()); mStrokeWidth = a.getDimension(R.styleable.SmoothCheckBox_strikeWidth, defaultStrikeWidth); defaultTickWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 2 , getResources().getDisplayMetrics()); mTickWidth = a.getDimension(R.styleable.SmoothCheckBox_tickWidth, defaultTickWidth); borderColor = a.getColor(R.styleable.SmoothCheckBox_borderColor, getResources().getColor(android.R.color.darker_gray)); trimColor = a.getColor(R.styleable.SmoothCheckBox_trimColor, getResources().getColor(android.R.color.holo_green_light)); tickColor = a.getColor(R.styleable.SmoothCheckBox_tickColor, getResources().getColor(android.R.color.white)); a.recycle(); trimPaint = new Paint(Paint.ANTI_ALIAS_FLAG); trimPaint.setStyle(Paint.Style.FILL); trimPaint.setColor(trimColor); borderPaint = new Paint(Paint.ANTI_ALIAS_FLAG); borderPaint.setStrokeWidth(mStrokeWidth); borderPaint.setColor(borderColor); borderPaint.setStyle(Paint.Style.STROKE); tickPaint = new Paint(Paint.ANTI_ALIAS_FLAG); tickPaint.setColor(tickColor); tickPaint.setStyle(Paint.Style.STROKE); tickPaint.setStrokeCap(Paint.Cap.ROUND); tickPaint.setStrokeWidth(mTickWidth); setOnClickListener( this ); } @Override protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec) { super .onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); if (widthMode == MeasureSpec.EXACTLY) { mWidth = widthSize; } else { mWidth = 40 ; } int heightSize = MeasureSpec.getSize(heightMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); if (heightMode == MeasureSpec.EXACTLY) { mHeight = heightSize; } else { mHeight = 40 ; } setMeasuredDimension(mWidth, mHeight); int size = Math.min(mWidth, mHeight); center = size / 2 ; mRadius = ( int ) ((size - mStrokeWidth) / 2 / 1 .2f); startPoint.set(center * 14 / 30 , center * 28 / 30 ); breakPoint.set(center * 26 / 30 , center * 40 / 30 ); endPoint.set(center * 44 / 30 , center * 20 / 30 ); downLength = ( float ) Math.sqrt(Math.pow(startPoint.x - breakPoint.x, 2f) + Math.pow(startPoint.y - breakPoint.y, 2f)); upLength = ( float ) Math.sqrt(Math.pow(endPoint.x - breakPoint.x, 2f) + Math.pow(endPoint.y - breakPoint.y, 2f)); totalLength = downLength + upLength; } @Override protected void onDraw(Canvas canvas) { super .onDraw(canvas); canvas.save(); drawBorder(canvas); drawTrim(canvas); if (isChecked) { drawTick(canvas); } canvas.restore(); } @Override protected Parcelable onSaveInstanceState() { Bundle bundle = new Bundle(); bundle.putParcelable(KEY_INSTANCE_STATE, super .onSaveInstanceState()); bundle.putBoolean(KEY_INSTANCE_STATE, isChecked); return bundle; } @Override protected void onRestoreInstanceState(Parcelable state) { if (state instanceof Bundle) { Bundle bundle = (Bundle) state; boolean isChecked = bundle.getBoolean(KEY_INSTANCE_STATE); setChecked(isChecked); super .onRestoreInstanceState(bundle.getParcelable(KEY_INSTANCE_STATE)); return ; } super .onRestoreInstanceState(state); } // 切换状态 private void toggle() { isChecked = !isChecked; if (listener != null ) { listener.onCheckedChanged( this , isChecked); } if (isChecked) { checkedAnimation(); } else { uncheckedAnimation(); } } // 由未选中到选中的动画 private void checkedAnimation() { animatedValue = 0f; tickValue = 0f; mValueAnimator = ValueAnimator.ofFloat(0f, 1 .2f, 1f).setDuration( 2 * duration / 5 ); mValueAnimator.setInterpolator( new AccelerateDecelerateInterpolator()); mTickValueAnimator = ValueAnimator.ofFloat(0f, 1f).setDuration( 3 * duration / 5 ); mTickValueAnimator.setInterpolator( new LinearInterpolator()); mTickValueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { tickValue = ( float ) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { animatedValue = ( float ) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.addListener( new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { mTickValueAnimator.start(); Log.i(TAG, " mTickValueAnimator.start();" ); } }); mValueAnimator.start(); } // 由选中到未选中的动画 private void uncheckedAnimation() { animatedValue = 0f; mValueAnimator = ValueAnimator.ofFloat(1f, 0f).setDuration( 2 * duration / 5 ); mValueAnimator.setInterpolator( new AccelerateInterpolator()); mValueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { animatedValue = ( float ) valueAnimator.getAnimatedValue(); postInvalidate(); } }); mValueAnimator.start(); } // 画对勾 private void drawTick(Canvas canvas) { float temp = tickValue * totalLength; Log.i(TAG, "temp:" + temp + "downlength :" + downLength); if (Float.compare(tickValue, 0f) == 0 ) { Log.i(TAG, "startPoint : " + startPoint.x + ", " + startPoint.y); path.reset(); path.moveTo(startPoint.x, startPoint.y); } if (temp > downLength) { path.moveTo(startPoint.x, startPoint.y); path.lineTo(breakPoint.x, breakPoint.y); Log.i(TAG, "endPoint : " + endPoint.x + ", " + endPoint.y); path.lineTo((endPoint.x - breakPoint.x) * (temp - downLength) / upLength + breakPoint.x, (endPoint.y - breakPoint.y) * (temp - downLength) / upLength + breakPoint.y); } else { Log.i(TAG, "down x : " + (breakPoint.x - startPoint.x) * temp / downLength + ",down y: " + (breakPoint.y - startPoint.y) * temp / downLength); path.lineTo((breakPoint.x - startPoint.x) * temp / downLength + startPoint.x, (breakPoint.y - startPoint.y) * temp / downLength + startPoint.y); } canvas.drawPath(path, tickPaint); } // 画边框 private void drawBorder(Canvas canvas) { float temp; if (animatedValue > 1f) { temp = animatedValue * mRadius; } else { temp = mRadius; } canvas.drawCircle(center, center, temp, borderPaint); } // 画checkbox内部 private void drawTrim(Canvas canvas) { canvas.drawCircle(center, center, (mRadius - mStrokeWidth) * animatedValue, trimPaint); } @Override public void onClick(View view) { toggle(); } /** * 判断checkbox是否选中状态 * * @return */ public boolean isChecked() { return isChecked; } /** * 设置checkbox的状态 * * @param isChecked 是否选中 */ public void setChecked( boolean isChecked) { this .setChecked(isChecked, false ); } /** * 设置checkbox的状态 * * @param isChecked 是否选中 * @param isAnimation 切换时是否有动画 */ public void setChecked( boolean isChecked, boolean isAnimation) { this .isChecked = isChecked; if (isAnimation) { if (isChecked) { checkedAnimation(); } else { uncheckedAnimation(); } } else { animatedValue = isChecked ? 1f : 0f; tickValue = 1f; invalidate(); } if (listener != null ) { listener.onCheckedChanged( this , isChecked); } } public interface OnCheckedChangeListener { void onCheckedChanged(SmoothCheckBox smoothCheckBox, boolean isChecked); } }