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

此篇文章布局有些问题，调整后的请看这篇：/article/10537386.html

今天在使用支付宝的事后，突然发现了一个叫做芝麻信用的一个功能，打开看了一下，感觉效果挺好的，就想自己跟着实现一下，首先看支付宝的原图



，

这是支付宝中的原有界面，下面是我实现的效果，请不要吐槽我的审美好么，啊喂！



虽然有点差距，但是效果还是实现了的，主要就是中间那一坨的绘制，其他的根本不够我看的，哈哈哈（整理一下发型），好了下面开始重头戏了，如何绘制这样的一个图形以及实现动态的效果（想看效果的请直接拉到最底下好么）？

分析：

首先我们要画出这样的一个图案的一般思路是从简单到复杂，这个不会我们先画一个圆盘不就完了，圆盘画完不就是再画一个外圆环么，没难度，最后再标刻度以及写文字，好了我们一步一步来。

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();

}

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

最后放效果图：



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