资讯专栏INFORMATION COLUMN

【自定义View】洋葱数学同款雷达图深入解析-RadarView

番茄西红柿 / 806人阅读

摘要:开箱即用的源码地址洋葱数学同款雷达图支持自定义属性雷达网的半径该属性决定了的宽高各属性表示的最大进度雷达网的颜色雷达网的线宽各属性文字的颜色各属性文字和中心处名字的字体路径中心连接区域的颜色中心连接区域的边框颜色中心处的名字中

开箱即用的源码地址

洋葱数学同款雷达图-RadarView

支持XML自定义属性:

rv_webRadius:雷达网的半径(该属性决定了View的宽高)

rv_webMaxProgress:各属性表示的最大进度

rv_webLineColor:雷达网的颜色

rv_webLineWidth:雷达网的线宽

rv_textArrayedColor:各属性文字的颜色

rv_textArrayedFontPath:各属性文字和中心处名字的字体路径

rv_areaColor:中心连接区域的颜色

rv_areaBorderColor:中心连接区域的边框颜色

rv_textCenteredName:中心处的名字

rv_textCenteredColor:中心文字的颜色

rv_textCenteredFontPath:中心数字文字的字体路径

rv_animateTime:动画执行时间

rv_animateMode:动画模式

TIME:时间一定,动画执行时间为rv_animateTime

SPEED:速度一定,动画执行速度为rv_webMaxProgress➗rv_animateTime

支持代码设置数据源:

setTextArray(textList: List):设置各属性文字数组,元素个数不能小于3

setProgressList(progressList: List):设置各属性对应的进度数组,该数组元素默认都是0,元素个数必须与文字数组保持一致

setOldProgressList(oldProgressList: List):设置各属性执行动画前,对应的进度数组,该数组元素默认都是0,元素个数必须与文字数组保持一致

支持代码执行动画:

doInvalidate():各个属性的动画一起执行

doInvalidate(index: Int, block: ((Int) -> Unit));:指定某属性执行动画,可传入参数接收动画结束的回调

起源

近来我司产品侧在重构一项业务,连带UI也有变动,其中就涉及到了雷达图,所以也就有了这次封装的RadarView,其主要特点是:

    有丰富的自定义属性,可对雷达图外观进行设置

    支持自由设置属性个数

    支持两种动画模式(时间一定、速度一定)

    支持指定某属性执行动画(从而满足UI稿的个性需求,见头图三)

头图三联是演示了该View的主要特点,然后结合局部UI稿,大家可以对比看下(还原度99%,✧(≖ ◡ ≖✿)嘿嘿嘿)。

思考分析

NOTE

    我们把六角形抽象成N角形,后文统一使用N角形表示

    我们在绘制前会把坐标系原点移动到雷达图中心,后文统一使用原点表示

我们先来思考下关键技术点:

绘制N角形雷达网

绘制虚线

虚线可以给Paint设置DashPathEffect实现

以雷达图中心为原点,将坐标系每逆时针旋转360/N度,从原点向上绘制长度为雷达网半径的虚线

绘制实线

在绘制完一条虚线后,紧接着绘制实线

同样以雷达图中心为原点,将坐标系每向上移动雷达网半径/4后,并且顺时针旋转360/N/2度(为什么是这个值?大家可自行

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/7057.html

相关文章

  • 定义View洋葱数学同款雷达深入解析-RadarView

    摘要:开箱即用的源码地址洋葱数学同款雷达图支持自定义属性雷达网的半径该属性决定了的宽高各属性表示的最大进度雷达网的颜色雷达网的线宽各属性文字的颜色各属性文字和中心处名字的字体路径中心连接区域的颜色中心连接区域的边框颜色中心处的名字中showImg(https://user-gold-cdn.xitu.io/2019/5/13/16ab091f638c526a); showImg(https://u...

    Flands 评论0 收藏0
  • 手动撸个Android雷达(蜘蛛网)RadarView

    摘要:公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记无图言虚空简单分析一波,确定雷达图正几边形的正五边形,分为几个层数层画边画线描绘文字覆盖区域主要这几步,开撸自定义继承确定需要使用的变量,初始化,公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记 无图言虚空 简单分析一波,确定雷达图正几边形的--正五边形 int co...

    daydream 评论0 收藏0
  • 手动撸个Android雷达(蜘蛛网)RadarView

    摘要:原文链接公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上手来撸一记无图言虚空简单分析一波,确定雷达图正几边形的正五边形,分为几个层数层画边画线描绘文字覆盖区域主要这几步,开撸自定义继承确定需要使用的变量, 原文链接 https://mp.weixin.qq.com/s/Ms... 公司产品需要一个雷达图来展示各维度的比重,网上找了一波,学到不少,直接自己上...

    forsigner 评论0 收藏0
  • 技术人攻略访谈三十五|小猴机器人:征途路上,星辰大海

    摘要:导语本期访谈对象小猴机器人,清华人工智能专业博士在读。或许因为成长于广袤的内蒙,小猴身上带着大山和草原一般的洒脱与乐观,在他钟爱的无人车上,印上了一个美好的我们的征途是星辰大海。技术人攻略除了规则挖掘,人工智能遇到的难题还 showImg(https://segmentfault.com/img/bVc1yA); 文:Gracia,摄影:周振邦 (本文为原创内容,部分或全文转载均需经作...

    siberiawolf 评论0 收藏0
  • 技术人攻略访谈三十五|小猴机器人:征途路上,星辰大海

    摘要:导语本期访谈对象小猴机器人,清华人工智能专业博士在读。或许因为成长于广袤的内蒙,小猴身上带着大山和草原一般的洒脱与乐观,在他钟爱的无人车上,印上了一个美好的我们的征途是星辰大海。技术人攻略除了规则挖掘,人工智能遇到的难题还 showImg(https://segmentfault.com/img/bVc1yA); 文:Gracia,摄影:周振邦 (本文为原创内容,部分或全文转载均需经作...

    isaced 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<