点击上方蓝字关注公众号
码个蛋第242次推文
因为信用，所以简单
作者：hotBitmapGG
博客：/u/566d6cec0ebc
文章目录
前言
截图
正文
最后
iOS的芝麻信用分截图
0
前言
灵感来自几天前看到简书一位作者的仿芝麻信用自定义View的文章,很不错,所以我换了一种方式来进行实现，写了旧版和新版芝麻信用分仪表盘的效果.
Github地址:HotBitmapGG/CreditSesameRingView
1
截图
这是我做的效果,还是有点差距的,嘿嘿.
2
正文
9.9版本芝麻信用分的实现
首先初始化各种画笔,默认的size，padding，小圆点.
(因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替)
代码很简单,就是各种初始化,往下看.
View的测量,主要在给设置warp_content时候给定一个默认宽高值.
然后确定View的宽高后的回调方法.
这里就是初始化圆弧所需要的矩形实现,下边开始进行重点,绘制，
绘制外层的圆弧,很简单, 圆弧的起始角度,角度.
绘制内层圆弧
绘制内层圆弧上的小刻度,画布旋转到圆弧左下角起点,计算出每条刻度线的起始点后,整个圆弧是210度,
每6角度绘制一条刻度线.
绘制内层圆弧上的大刻度,350, 550, 600,650, 700, 950，对应的信用分值,
一样旋转画布,计算刻度线的起始点,计算出每次旋转的角度,每35度旋转一次,依次绘制对应的大刻度线,
然后绘制对应的文本内容,使用paint的measureText方法测量出文本的长度,依次绘制对应的文本内容.
绘制中间的信用分值,信用等级,评估时间等文本,这个比较简单,直接drawText,依次高低排列绘制即可.
绘制最外层的进度,这里使用的Path添加要绘制的圆弧,因为需要去不断的计算坐标点,主要用到了PathMeasure这个类,将绘制的圆弧加入到path中,
当前点的实际位置
private float[] pos;
当前的tangent值
private float[] tan;
获取路径的终点的正切值和坐标，然后根据坐标点绘制小圆点
PathMeasure pathMeasure = new PathMeasure(path, false);
pathMeasure.getPosTan(pathMeasure.getLength() * 1, pos, tan);
关于PathMeasure,推荐看GcsSloop(/?t=/GcsSloop)/AndroidNote(/?t=/GcsSloop/AndroidNote) ,我也是跟着这个笔记学习的自定义控件.
好了,到这里所有绘制完毕了,接下来让圆弧进度条动起来吧,使用ValueAnimator,
进度条动画定义了圆弧进度条的开始角度mCurrentAngle,圆弧角度mTotalAngle,
数值动画定义了初始化minNum=0，maxNum根据传入的数值进行计算.
最后根据传入的信用分值计算圆弧进度条所到的角度
3
最后
这篇文章只分析了新版的实现过程,旧版的的实现思路也差不多,代码也不复杂,可以直接看源码实现.
