博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android-仪表盘控件仿芝麻信用
阅读量:5861 次
发布时间:2019-06-19

本文共 2434 字,大约阅读时间需要 8 分钟。

前言

由于项目需要使用到仪表盘图表,所以就本着一贯的操作流程就来github上面找,结果发现很多图表或者不是我需要的或者扩展性不强,所以就自己动手写了一个扩展性较强的,希望能帮助到有需要的人。(不过本人能力有限,有不足的地方还请见谅)

效果

详细的使用请点击:

先定个小目标

由于每个公司的UI肯定都有不同的想法,设计出来的效果图也千奇百怪。所以我一开始的想法是能写一个基类的仪表盘图表,不需要懂得太多的自定义View知识也能做出UI所需要的效果。

我就想尝试着能不能自己写一个,万一能帮助到其他人呢。(梦想还是要有的)

所以我就抽取了一个BaseDashboardView类,并实现了三个Style的仪表盘图表。而这三个仪表盘除去一些画笔的初始化和参数的设置,绘制的代码都在70行内。下面就来看一下如何定义一个自己的仪表盘图表吧。

然后去做吧

创建一个View然后去继承 BaseDashboardView 这时需要实现以下方法:

protected abstract void initView();    protected abstract void initArcRect(float left, float top, float right, float bottom);    protected abstract void drawArc(Canvas canvas, float arcStartAngle, float arcSweepAngle);    protected abstract void drawProgressArc(Canvas canvas, float arcStartAngle, float progressSweepAngle);    protected abstract void drawText(Canvas canvas, int value, String valueLevel, String currentTime);    复制代码

然后让我们来看看每个方法都是什么用的。

initView() 就是初始化设置,如创建画笔等。

initArcRect(float left, float top, float right, float bottom) 在我们绘制圆弧的时候可以传入Rect对象来确定圆弧的绘制范围,需要这里就是给我们初始化圆弧的区域的。 如:mRectArc = new RectF(left, top, right, bottom);

drawArc(Canvas canvas, float arcStartAngle, float arcSweepAngle)这是就是开始正式的绘制背景圆弧了,arcStartAngle表示圆弧的起始角度,arcSweepAngle表示圆环一共多少度。我们通过刚才的Rect就可以绘制出一个圆弧如:canvas.drawArc(mRectOuterArc, arcStartAngle, arcSweepAngle, false, mPaintArc);但是要主要画笔的样式要设置为Paint.Style.STROKE

drawProgressArc(Canvas canvas, float arcStartAngle, float progressSweepAngle)而这里是绘制进度圆弧的地方,progressSweepAngle进度的幅度已经在BaseDashboardView中计算好,只需要通过drawArc中的一样绘制个圆弧就行。

drawText(Canvas canvas, int value, String valueLevel, String currentTime)在这里可以把文字绘制到你想要他出现的地方就OK拉。数据已经在BaseDashboardView中处理过,直接绘制就可以。

由于很多逻辑的计算和动画都是在BaseDashboardView中去实现,所以我们只需要实现这几个方法,然后实现一些绘制的逻辑就可以咯。如果在绘制方面有什么问题的可以查看一下3个样式的DashboardView,如果是对底层的计算有兴趣的可以看一下BaseDashboardView

接下来就去扩展

这里主要说一个方法setCalibration(int[] calibrationNumberText, String[] calibrationBetweenText,int largeCalibrationBetweenNumber)

然后主要说一下calibrationNumberTextcalibrationBetweenText参数,他们的初始默认值是 int[]{350, 550, 600, 650, 700, 950}String[]{"较差", "中等", "良好", "优秀", "极好"} 那这样其实组成了一个区间 350 较差 550 中等 600 良好 650 优秀 700 极好 950 他的意思为350-550的为较差,其他依次类推,但是每个区间的大小是不一样的,较差的区间为550-350=200,而中等区间为650-550=50。但是每个区间在图表上显示的区域大小确实相同的。那么在计算进度幅度的时候需要区别计算。

而我的实现方式是首先判断当前value在第几个区间中,如当前value=575。那么通过循环的方式可以知道当前value处在550和600之间。然后通过 (575 - 550) / (600 - 550)公式计算出当前值在这个区间内占的百分比。然后通过每个区间的角度算出当前进度条的幅度。

而除了刻度的扩展其实还有很多其他的可配置项,可以通过github进行查看。

转载于:https://juejin.im/post/5b4d813451882519a62f5b80

你可能感兴趣的文章
UPC11073(DP,思维)
查看>>
android开发环境 eclipse + android sdk配置笔记
查看>>
【T-SQL】系列文章全文目录(2017-06-26更新)
查看>>
洛谷 P4170 [CQOI2007]涂色
查看>>
XML和json的区别比较
查看>>
哈希表的理解
查看>>
P1659 [国家集训队]拉拉队排练
查看>>
动画-仿微博弹簧动画
查看>>
资深项目经理推荐的几款免费/开源项目管理工具
查看>>
bzoj2870最长道路tree——边分治
查看>>
CentOS 下安装 Hexo 博客
查看>>
SilverLight
查看>>
分类与回归的区别
查看>>
ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'fruitdb'
查看>>
SRM 401(1-250pt, 1-500pt)
查看>>
CSS以及JQuery总是忽略掉的小问题
查看>>
20 字典的函数及其作用
查看>>
js里面调用后台的方法
查看>>
Auto Layout:Anatomy of a Constraint
查看>>
两种查找算法的比较
查看>>