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

image

前言

灵感来自几天前看到一位作者的仿芝麻信用自定义View的文章很不错,所以我换了一种方式来进行实现，写了旧版和新版芝麻信用分仪表盘的效果。

Github地址:
https://github.com/HotBitmapGG/CreditSesameRingView

截图

这是我做的效果,还是有点差距的,嘿嘿。

image image

正文

芝麻信用分的实现

首先初始化各种画笔,默认的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){     //绘制Logo     mTextPaint.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);

关于PathMeasure,推荐看AndroidNote,我也是跟着这个笔记学习的自定义控件.

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 &amp;&amp; values <= 600){             sesameLevel = "信用中等";         } else if (values > 600 &amp;&amp; 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();}

最后

这篇文章只分析了新版的实现过程,旧版的的实现思路也差不多,代码也不复杂,可以直接看源码实现,由于本人文章写的不多,所以感觉把代码的实现用语言来组织还真挺难的,所以写的不好的地方还请各位大大见谅,有问题可联系我,最后希望如果觉得还可以的,请给个star, 谢谢啦.

转载：https://mp.weixin.qq.com/s/6a-VXjVvE-vg99-7w_9UDQ