我要评论先看下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能有所帮助，如果有疑问可以留言交流。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论