0°

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

内容预览:
  • 让学习成为一种美、一种习惯~
  • 有些事,错了才知道~
  • 有些事,长大了才知道~

始发于微信公众号: 程序员小乐


分享互联网、技术、情感等干货平台。您还可以向公众号投稿,将自己总结的技术、心得、经验分享给大家。学无止境,不求尽如人意,但求问心无愧。让学习成为一种美、一种习惯。值得爱学习的你去关注,感觉有帮助转发分享让更多的人去关注!点击上方 蓝字 关注!



作者 | hotBitmapGG

地址 | http://www.jianshu.com/p/8486a5baa708

声明 | 本文是 hotBitmapGG 原创,已获授权发布, 未经原作者允许请勿转载

Android View的绘制流程 —– 由   分享

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

每日英语

Something you will realize only when you do it,when you make mistakes or when you grow up.

有些事,做了才知道。有些事,错了才知道。有些事,长大了才知道。


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

iOS的芝麻信用分截图.png


前言




  • 灵感来自几天前看到简书一位作者的仿芝麻信用自定义View的文章,很不错,所以我换了一种方式来进行实现,写了旧版和新版芝麻信用分仪表盘的效果.

  • Github地址:HotBitmapGG/CreditSesameRingView


截图




  • 这是我做的效果,还是有点差距的,嘿嘿.

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果




正文





  • 9.9版本芝麻信用分的实现

首先初始化各种画笔,默认的size,padding,小圆点.
(因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替)

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

代码很简单,就是各种初始化,往下看.

View的测量,主要在给设置warp_content时候给定一个默认宽高值.

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


然后确定View的宽高后的回调方法.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


这里就是初始化圆弧所需要的矩形实现,下边开始进行重点,绘制,
绘制外层的圆弧,很简单, 圆弧的起始角度,角度.


    

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


绘制内层圆弧


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


绘制内层圆弧上的小刻度,画布旋转到圆弧左下角起点,计算出每条刻度线的起始点后,整个圆弧是210度,
每6角度绘制一条刻度线.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


绘制内层圆弧上的大刻度,350, 550, 600,650, 700, 950,对应的信用分值,
一样旋转画布,计算刻度线的起始点,计算出每次旋转的角度,每35度旋转一次,依次绘制对应的大刻度线,
然后绘制对应的文本内容,使用paint的measureText方法测量出文本的长度,依次绘制对应的文本内容.



自定义View之仿支付宝v9.9芝麻信用分仪表盘效果



绘制中间的信用分值,信用等级,评估时间等文本,这个比较简单,直接drawText,依次高低排列绘制即可.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果



绘制最外层的进度,这里使用的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/AndroidNote ,我也是跟着这个笔记学习的自定义控件.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


好了,到这里所有绘制完毕了,接下来让圆弧进度条动起来吧,使用ValueAnimator,
进度条动画定义了圆弧进度条的开始角度mCurrentAngle,圆弧角度mTotalAngle,
数值动画定义了初始化minNum=0,maxNum根据传入的数值进行计算.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


最后根据传入的信用分值计算圆弧进度条所到的角度.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


最后

这篇文章只分析了新版的实现过程,旧版的的实现思路也差不多,代码也不复杂,可以直接看源码实现,由于本人文章写的不多,所以感觉把代码的实现用语言来组织还真挺难的,所以写的不好的地方还请各位大大见谅,有问题可联系我,最后希望如果觉得还可以的,请给个star, 谢谢啦.


自定义View之仿支付宝v9.9芝麻信用分仪表盘效果


推荐阅读



是什么让你决定离开一家公司?

小密圈
这里聚集了业界内的大牛,值得各位大牛的加入!

自定义View之仿支付宝v9.9芝麻信用分仪表盘效果

看完本文有收获?请转发分享给更多人
关注「杨守乐」,提升编程技能

【QQ技术群】279126311 []
【QQ技术群】484572225 [未]

以上就是:自定义View之仿支付宝v9.9芝麻信用分仪表盘效果 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论