自定义View实现支付宝芝麻信用页面功能

---

此篇文章布局有些问题，调整后的请看这篇：http://blog.csdn.net/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;
    @Override
    protected 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() {
            @Override
            public void run() {
                if (rateEnd<180)
                {
                    rateEnd++;
                    postInvalidateDelayed(30);
                }
            }
        }).start();

    }

核心思想是通过旋转画布进行图案的绘制，并且在绘制的过程中绘制文字，比较麻烦的就是一系列的计算的问题，其他的并没有什么难度的，如果有什么问题，读者可以给我留言交流一下呀，我很欢迎的~

最后放效果图：

一些细节的东西可能没怎么处理，不过大体的功能就已经实现了~