此篇文章布局有些问题，调整后的请看这篇：/anny_lin/article/details/50507608
今天在使用支付宝的事后，突然发现了一个叫做芝麻信用的一个功能，打开看了一下，感觉效果挺好的，就想自己跟着实现一下，首先看支付宝的原图
，
这是支付宝中的原有界面，下面是我实现的效果，请不要吐槽我的审美好么，啊喂！
虽然有点差距，但是效果还是实现了的，主要就是中间那一坨的绘制，其他的根本不够我看的，哈哈哈（整理一下发型），好了下面开始重头戏了，如何绘制这样的一个图形以及实现动态的效果（想看效果的请直接拉到最底下好么）？
分析：
首先我们要画出这样的一个图案的一般思路是从简单到复杂，这个不会我们先画一个圆盘不就完了，圆盘画完不就是再画一个外圆环么，没难度，最后再标刻度以及写文字，好了我们一步一步来。
1.绘制圆环
初始化一个CustomView继承View并重写构造方法
public class CustomView extends View {Paint paint;int radius;String resultString="啊啊啊啊";int rateEnd=0;public CustomView(Context context) {super(context);init(context);}public CustomView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}
init()方法初始化一些作案工具
int result;Paint paint1,paint2,paint3;Paint ratePaint;String[] stringArray=new String[]{"350","较差","550","中等","600","良好","650","优秀","700","极好","950"};private void init(Context context){paint=new Paint();//是否抗锯齿paint.setAntiAlias(true);paint.setColor(getResources().getColor(R.color.white));//实心还是空心paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(30);//0-255，越小越透明paint.setAlpha(60);//dp和px之间互转工具类result=DensityUtil.dip2px(context,300);//刻度画笔paint1 =new Paint(Paint.ANTI_ALIAS_FLAG);paint1.setColor(getResources().getColor(R.color.white));paint1.setStrokeWidth(6);//刻度字画笔paint2=new Paint(Paint.ANTI_ALIAS_FLAG);paint2.setTextSize(26);paint2.setColor(getResources().getColor(R.color.white));//正中间字体画笔paint3=new Paint(Paint.ANTI_ALIAS_FLAG);paint3.setTextSize(40);paint3.setColor(getResources().getColor(R.color.white));ratePaint=new Paint();ratePaint.setColor(getResources().getColor(R.color.rateColor));ratePaint.setStrokeWidth(4);ratePaint.setStyle(Paint.Style.STROKE);//背景渐变动画实现ValueAnimator coloranim= ObjectAnimator.ofInt(MainActivity.this, "backgroundColor", 0xFFFF8080, 0xFF8080FF);coloranim.setDuration(30 * 180);coloranim.setEvaluator(new ArgbEvaluator());coloranim.start();}
我在init()定义了一些需要用到的画笔，详细的可以看注释。
下面就是核心代码了：
onDraw方法：
int px,py;int rotateRadius=210/10;@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);px=getMeasuredWidth()/2;py=getMeasuredHeight()/2;//粗圆环RectF rectF=new RectF(getLeft()+60,getTop()+60,getRight()-60,getBottom()-60);canvas.drawArc(rectF, 165, 210, false, paint);//细圆环RectF rectFA=new RectF(getLeft()+20,getTop()+20,getRight()-20,getBottom()-20);paint.setStrokeWidth(4);canvas.drawArc(rectFA, 165, 210, false, paint);//动态通知变化的细圆环canvas.drawArc(rectFA,165,rateEnd,false,ratePaint);//正中间的字体if (!resultString.equals("")){float textWidth=paint3.measureText(resultString);canvas.drawText(resultString,px-textWidth/2,py,paint3);}//旋转到正中心。canvas.rotate(255,getMeasuredWidth()/2,getMeasuredHeight()/2);//刻度线起始和终止的两个值int lineStartY=getTop()+60-30/2;int lineEndY=getTop()+60-30/2+30;for (int i=1;i<12;i++){canvas.save();if (i%2!=0){//画明显的刻度paint1.setAlpha(160);canvas.drawLine(px, lineStartY, px, lineEndY, paint1);paint2.setAlpha(180);}else{paint1.setAlpha(100);canvas.drawLine(px, lineStartY, px, lineEndY, paint1);paint2.setAlpha(120);}float textLength=paint2.measureText(stringArray[i-1]);canvas.drawText(stringArray[i-1],px-textLength/2,lineEndY+30,paint2);canvas.restore();canvas.rotate(rotateRadius,px,py);}canvas.restore();paint.setStrokeWidth(30);//开线程刷新rateEnd的值new Thread(new Runnable() {@Overridepublic void run() {if (rateEnd<180){rateEnd++;postInvalidateDelayed(30);}}}).start();}
核心思想是通过旋转画布进行图案的绘制，并且在绘制的过程中绘制文字，比较麻烦的就是一系列的计算的问题，其他的并没有什么难度的，如果有什么问题，读者可以给我留言交流一下呀，我很欢迎的~
最后放效果图：
一些细节的东西可能没怎么处理，不过大体的功能就已经实现了~
