Android自定义View仿支付宝芝麻信用分仪表盘

先看下iOS的芝麻信用分截图

这是我做的效果，还是有点差距的

支付宝9.9版本芝麻信用分的实现

首先初始化各种画笔,默认的size，padding，小圆点.

（因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替）

//View的默认大小defaultSize = dp2px（250）;//默认Padding大小arcDistance = dp2px（14）;//外层圆环画笔mMiddleArcPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mMiddleArcPaint.setStrokeWidth（8）;mMiddleArcPaint.setColor（Color.WHITE）;mMiddleArcPaint.setStyle（Paint.Style.STROKE）;mMiddleArcPaint.setAlpha（80）;//内层圆环画笔mInnerArcPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mInnerArcPaint.setStrokeWidth（30）;mInnerArcPaint.setColor（Color.WHITE）;mInnerArcPaint.setAlpha（80）;mInnerArcPaint.setStyle（Paint.Style.STROKE）;//正中间字体画笔mTextPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mTextPaint.setColor（Color.WHITE）;mTextPaint.setTextAlign（Paint.Align.CENTER）;//圆环大刻度画笔mCalibrationPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mCalibrationPaint.setStrokeWidth（4）;mCalibrationPaint.setStyle（Paint.Style.STROKE）;mCalibrationPaint.setColor（Color.WHITE）;mCalibrationPaint.setAlpha（120）;//圆环小刻度画笔mSmallCalibrationPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mSmallCalibrationPaint.setStrokeWidth（1）;mSmallCalibrationPaint.setStyle（Paint.Style.STROKE）;mSmallCalibrationPaint.setColor（Color.WHITE）;mSmallCalibrationPaint.setAlpha（130）;//圆环刻度文本画笔mCalibrationTextPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mCalibrationTextPaint.setTextSize（30）;mCalibrationTextPaint.setColor（Color.WHITE）;//外层进度画笔mArcProgressPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mArcProgressPaint.setStrokeWidth（8）;mArcProgressPaint.setColor（Color.WHITE）;mArcProgressPaint.setStyle（Paint.Style.STROKE）;mArcProgressPaint.setStrokeCap（Paint.Cap.ROUND）;//外层圆环上小圆点Bitmap画笔mBitmapPaint = new Paint（）;mBitmapPaint.setStyle（Paint.Style.FILL）;mBitmapPaint.setAntiAlias（true）;//初始化小圆点图片bitmap = BitmapFactory.decodeResource（getResources（）, R.drawable.ic_circle）;//当前点的实际位置pos = new float[2];//当前点的tangent值tan = new float[2];matrix = new Matrix（）;

代码很简单,就是各种初始化,往下看.
View的测量,主要在给设置warp_content时候给定一个默认宽高值.

@Overrideprotected void onMeasure（int widthMeasureSpec, int heightMeasureSpec）{ setMeasuredDimension（resolveMeasure（widthMeasureSpec, defaultSize）, resolveMeasure（heightMeasureSpec, defaultSize））;}//根据传入的值进行测量public int resolveMeasure（int measureSpec, int defaultSize）{ int result = 0; int specSize = MeasureSpec.getSize（measureSpec）; switch （MeasureSpec.getMode（measureSpec））{ case MeasureSpec.UNSPECIFIED:result = defaultSize;break; case MeasureSpec.AT_MOST://设置warp_content时设置默认值result = Math.min（specSize, defaultSize）;break; case MeasureSpec.EXACTLY://设置math_parent 和设置了固定宽高值break; default:result = defaultSize;}return result;}

然后确定View的宽高后的回调方法.

@Overrideprotected void onSizeChanged（int w, int h, int oldw, int oldh）{super.onSizeChanged（w, h, oldw, oldh）;width = w;height = h;radius = width / 2; //外层圆环矩形 mMiddleRect = new RectF（defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding）; //内层圆环矩形 mInnerRect = new RectF（defaultPadding + arcDistance, defaultPadding + arcDistance,width - defaultPadding - arcDistance, height - defaultPadding - arcDistance）; // 外层进度矩形 mMiddleProgressRect = new RectF（defaultPadding, defaultPadding,width - defaultPadding, height - defaultPadding）;}

这里就是初始化圆弧所需要的矩形实现,下边开始进行重点,绘制，

绘制外层的圆弧,很简单, 圆弧的起始角度,角度.

private void drawMiddleArc（Canvas canvas）{ canvas.drawArc（mMiddleRect, mStartAngle, mEndAngle, false, mMiddleArcPaint）;}

绘制内层圆弧

private void drawInnerArc（Canvas canvas）{canvas.drawArc（mInnerRect, mStartAngle, mEndAngle, false, mInnerArcPaint）;}

绘制内层圆弧上的小刻度,画布旋转到圆弧左下角起点,计算出每条刻度线的起始点后,整个圆弧是210度,

每6角度绘制一条刻度线.

private void drawSmallCalibration（Canvas canvas）{//旋转画布canvas.save（）;canvas.rotate（-105, radius, radius）;//计算刻度线的起点结束点int startDst = （int） （defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth（） / 2 - 1）;int endDst = （int） （startDst + mInnerArcPaint.getStrokeWidth（））;for （int i = 0; i <= 35; i++） { //每旋转6度绘制一个小刻度 canvas.drawLine（radius, startDst, radius, endDst, mSmallCalibrationPaint）; canvas.rotate（6, radius, radius）; } canvas.restore（）;}

绘制内层圆弧上的大刻度,350, 550, 600,650, 700, 950，对应的信用分值,

一样旋转画布,计算刻度线的起始点,计算出每次旋转的角度,每35度旋转一次,依次绘制对应的大刻度线,

然后绘制对应的文本内容,使用paint的measureText方法测量出文本的长度,依次绘制对应的文本内容.

private void drawCalibrationAndText（Canvas canvas）{//旋转画布进行绘制对应的刻度canvas.save（）;canvas.rotate（-105, radius, radius）;//计算刻度线的起点结束点int startDst = （int） （defaultPadding + arcDistance - mInnerArcPaint.getStrokeWidth（） / 2 - 1）;int endDst = （int） （startDst + mInnerArcPaint.getStrokeWidth（））;//刻度旋转的角度int rotateAngle = 210 / 10;for （int i = 1; i < 12; i++） { if （i % 2 ！= 0） {canvas.drawLine（radius, startDst, radius, endDst, mCalibrationPaint）; } // 测量文本的长度float textLen = mCalibrationTextPaint.measureText（sesameStr[i - 1]）; canvas.drawText（sesameStr[i - 1], radius - textLen / 2, endDst + 40, mCalibrationTextPaint）;canvas.rotate（rotateAngle, radius, radius）; } canvas.restore（）;}

绘制中间的信用分值,信用等级,评估时间等文本,这个比较简单,直接drawText,依次高低排列绘制即可.

private void drawCenterText（Canvas canvas）{//绘制LogomTextPaint.setTextSize（30）;canvas.drawText（"BETA", radius, radius - 130, mTextPaint）;//绘制信用分数mTextPaint.setTextSize（200）;mTextPaint.setStyle（Paint.Style.STROKE）;canvas.drawText（String.valueOf（mMinNum）, radius, radius + 70, mTextPaint）;//绘制信用级别mTextPaint.setTextSize（80）;canvas.drawText（sesameLevel, radius, radius + 160, mTextPaint）;//绘制评估时间mTextPaint.setTextSize（30）;canvas.drawText（evaluationTime, radius, radius + 205, mTextPaint）;}

绘制最外层的进度,这里使用的Path添加要绘制的圆弧,因为需要去不断的计算坐标点,主要用到了PathMeasure这个类,将绘制的圆弧加入到path中,
当前点的实际位置

private float[] pos;
当前的tangent值

private float[] tan;
获取路径的终点的正切值和坐标，然后根据坐标点绘制小圆点

PathMeasure pathMeasure = new PathMeasure（path, false）;pathMeasure.getPosTan（pathMeasure.getLength（） * 1, pos, tan）;

private void drawRingProgress（Canvas canvas）{Path path = new Path（）;path.addArc（mMiddleProgressRect, mStartAngle, mCurrentAngle）; PathMeasure pathMeasure = new PathMeasure（path, false）; pathMeasure.getPosTan（pathMeasure.getLength（） * 1, pos, tan）;matrix.reset（）;matrix.postTranslate（pos[0] - bitmap.getWidth（） / 2, pos[1] - bitmap.getHeight（） / 2）; canvas.drawPath（path, mArcProgressPaint）;//起始角度不为0时候才进行绘制小圆点if （mCurrentAngle == 0）return;canvas.drawBitmap（bitmap, matrix, mBitmapPaint）;mBitmapPaint.setColor（Color.WHITE）;canvas.drawCircle（pos[0], pos[1], 8, mBitmapPaint）;}

好了,到这里所有绘制完毕了,接下来让圆弧进度条动起来吧,使用ValueAnimator,进度条动画定义了圆弧进度条的开始角度mCurrentAngle,圆弧角度mTotalAngle,数值动画定义了初始化minNum=0，maxNum根据传入的数值进行计算.

public void startAnim（）{ValueAnimator mAngleAnim = ValueAnimator.ofFloat（mCurrentAngle, mTotalAngle）;mAngleAnim.setInterpolator（new AccelerateDecelerateInterpolator（））;mAngleAnim.setDuration（3000）;mAngleAnim.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（）{ @Override public void onAnimationUpdate（ValueAnimator valueAnimator）{mCurrentAngle = （float） valueAnimator.getAnimatedValue（）;postInvalidate（）;} }）;mAngleAnim.start（）;ValueAnimator mNumAnim = ValueAnimator.ofInt（mMinNum, mMaxNum）; mNumAnim.setDuration（3000）;mNumAnim.setInterpolator（new LinearInterpolator（））;mNumAnim.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Override public void onAnimationUpdate（ValueAnimator valueAnimator）{mMinNum = （int） valueAnimator.getAnimatedValue（）;postInvalidate（）;} }）;mNumAnim.start（）;}

最后根据传入的信用分值计算圆弧进度条所到的角度.

public void setSesameValues（int values）{if （values <= 350）{ mMaxNum = values; mTotalAngle = 0f; sesameLevel = "信用较差"; evaluationTime = "评估时间:" + getCurrentTime（）;} else if （values <= 550）{ mMaxNum = values; mTotalAngle = （values - 350） * 80 / 400f + 2; sesameLevel = "信用较差"; evaluationTime = "评估时间:" + getCurrentTime（）;} else if （values <= 700） { mMaxNum = values; if （values > 550 && values <= 600）{sesameLevel = "信用中等"; } else if （values > 600 && values <= 650）{sesameLevel = "信用良好"; } else {sesameLevel = "信用优秀"; } mTotalAngle = （values - 550） * 120 / 150f + 43; evaluationTime = "评估时间:" + getCurrentTime（）;} else if （values <= 950）{ mMaxNum = values; mTotalAngle = （values - 700） * 40 / 250f + 170; sesameLevel = "信用极好"; evaluationTime = "评估时间:" + getCurrentTime（）;} else{ mTotalAngle = 240f;}startAnim（）;}

总结

这篇文章只分析了新版的实现过程，旧版的的实现思路也差不多，代码也不复杂。希望这篇文章对大家开发Android能有所帮助，如果有疑问可以留言交流。