第一章 仿支付宝芝麻信用界面制作（需要自定义View的相关知识）

之前一段时间帮朋友做一个类似芝麻信用分界面的效果的View，效果就是随着分数的增长，圆弧和指针的位置、角度也随之改变，先给大家分享下效果图

当时看到那个效果也是着实考虑了一番，考虑了很多熬死了许许多多的脑细菌才把他搞定。现在还原我当时的思路，分享给大家我当时是如何一点点将它搞定的。

首先，我们先将界面解剖一下，一眼可以看出这个页面是有这些元素：两个大圆弧（上面随动带渐变色的一个和下面绘制好灰色的圆弧）、一个圆弧状的路径（间断点和上面的字也都是路径的样式和方法）、一个小圆弧（随动带渐变色）、一个指针（位置随动且旋转角度随动）、一个不断增长的数字、下面固定的绘制的信誉等级（也可以随动）及写死的时间。明确了页面元素，我们就再来考虑是什么促使着圆弧、指针弧度、位置和旋转角度的改变。

对View的生命周期有了解的朋友都知道View有个ondraw的方法，自从view展示在界面上后就在一直不停的执行这个方法，所以我们看到的界面效果就跟上面的动图一样也是一帧一帧的绘制出来的，也就是说圆弧、指针弧度、位置和旋转角度是随着时间也是就帧的改变而改变的。

今天先写到这边，感兴趣的朋友可以给我留言，我们一起探讨这块的知识。

接着上次的继续，废话不多说开始贴代码

public class ArcView extends ImageView {
//最外层圆弧底层的画笔
private Paint outLinePaint;
//最外层圆弧上层的画笔
private Paint outLineMovePaint;
//最外层虚线路径的画笔
private Paint pathPaint;
//内层圆弧的画笔
private Paint innerLinePaint;
//外层和路径之间文字的画笔 350 450 那个
private Paint textPaint;
//内部信用分数的画笔;
private Paint innerTextPaint;
//内部  信用等级的画笔   信用优秀那个;
private Paint innerLowerTextPaint;
//内部最下面文字的画笔 评估时间;
private Paint underTextPaint;
//圆弧初始的位置角度数值
private final float STARTPOINT=135f;
//圆弧结束的的位置角度数值
private final float ENDPOINT=270f;
//圆弧转动的角度数值
private  float CURRENTPOINT=0;
//圆弧转动的结束值
private float CURRENTFIANLPOINT=0;
//最外层圆弧画笔的宽度
private final int OUTCIRCLEWIDTH=50;
//最外层圆弧画笔的半径
private float outCircleRadius=0;



//虚线路径的半径;
private float CIRCLERADIO=0;
//指针运动圆的半径;
private float INNERCIRCLERADIO=0;
//π的数值;
private final double PI=3.14;
//信用积分等级数组
private String[] styles ={"300","一般","550","良好","650","优秀","750","极好","850","卓越","950"};
//构造器
private int grade=0;

private final float COMMONRADIO=2.40740740f;

private int viewWIdth;
private int viewHeight;

上面是需要定义的一些变量

//构造器
public ArcView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
//构造器
public ArcView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub