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时候给定一个默认宽高值.

@override
protected 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的宽高后的回调方法.

@override
protected 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);

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能有所帮助，如果有疑问可以留言交流。