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

概述先看下iOS的芝麻信用分截图这是我做的效果，还是有点差距的支付宝9.9版本芝麻信用分的实现

先看下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,height - defaultpadding);}

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

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

private voID drawMIDdleArc(Canvas canvas){ canvas.drawArc(mMIDdleRect,mStartAngle,mEndAngle,false,mMIDdleArcPaint);}

绘制内层圆弧

private voID drawInnerArc(Canvas canvas){  canvas.drawArc(mInnerRect,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,endDst,mSmallCalibrationPaint);   canvas.rotate(6,radius); } canvas.restore();}

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

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

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

private voID drawCalibrationAndText(Canvas canvas){  //旋转画布进行绘制对应的刻度  canvas.save();  canvas.rotate(-105,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,mCalibrationPaint);   }   // 测量文本的长度  float textLen = mCalibrationTextPaint.measureText(sesameStr[i - 1]); canvas.drawText(sesameStr[i - 1],radius - textLen / 2,endDst + 40,mCalibrationTextPaint);  canvas.rotate(rotateAngle,radius); } canvas.restore();}

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

private voID drawCenterText(Canvas canvas){  //绘制logo  mTextPaint.setTextSize(30);  canvas.drawText("BETA",radius - 130,mTextPaint);  //绘制信用分数  mTextPaint.setTextSize(200);  mTextPaint.setStyle(Paint.Style.stroke);  canvas.drawText(String.valueOf(mMinNum),radius + 70,mTextPaint);  //绘制信用级别  mTextPaint.setTextSize(80);  canvas.drawText(sesameLevel,radius + 160,mTextPaint);  //绘制评估时间  mTextPaint.setTextSize(30);  canvas.drawText(evaluationTime,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,mCurrentAngle); PathMeasure pathMeasure = new PathMeasure(path,false); pathMeasure.getPosTan(pathMeasure.getLength() * 1,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能有所帮助，如果有疑问可以留言交流。

总结

以上是内存溢出为你收集整理的Android自定义View仿支付宝芝麻信用分仪表盘全部内容，希望文章能够帮你解决Android自定义View仿支付宝芝麻信用分仪表盘所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。