手把手教你实现Android中智能设备数据表格绘制

xiaoxiao2021-02-28  10

今日科技快讯

近日中消协陆续接到消费者反映自己使用的iPhone6和iPhone6s系列手机在仍有50%至60%电量的情况下自动关机、系统升级后自动关机情况仍存在、环境较冷甚至室温时自动关机、自动关机后不连接充电器无法开机等现象。中消协已就此事约谈苹果电脑贸易(上海)有限公司相关负责人。

苹果公司方面表示正积极与美国公司总部进行沟通,就相关产品问题做出技术判断。对于目前部分已投诉的消费者,苹果公司承诺将采取更换电池的方式来保障消费者的正常使用。

作者简介多

本篇来自 清风明月 的投稿,分享了如何绘制统计图表,希望能帮助有需要的朋友。

清风明月 的博客地址:

http://www.jianshu.com/users/a7c0ac8c85b3

正文

最近做一个android智能手表的app,要给用户呈现的就是用户每天,每周,每月数据信息,既然要使得用户能一眼就看出自己的数据趋势,当然最好的就是折线统计图或者柱状图。要实现这要的功能就需要借助于android强大的自定义控件。

闲话休提,言归正传,惯例先上效果,如下:

下面开始自定义控件的第一步:

1. 在工程目录res/values下新建attrs文件

2. 在文件中声明需要的属性

3. 在工程目录指定包名下创建自定义控件的类:

该类声明了三个参数的构造函数,让一个参数的构造函数调用二个参数的构造函数,让两个参数的构造函数调用三个参数的构造函数,接下来在第三个参数的构造函数中获取我们自定义控件的属性值:

老板,我贴代码了哦!

好了,准备工作差不多了,然后呢?然后测量宽高后就开始画图了。

开始画图了:

重写onDraw(),在里面绘制坐标系:

接下来绘制X轴上的时间值,这里以周为例,因为没有真实的数据,此次讲义都已模拟数据为主;

定义一个数组,然后将X轴等分为7等分,画上间断线,写上数值

上图:

上面的逻辑和计算并不复杂,就是将X轴的距离等分7等分,然后画上间断线和数值就OK了。

接下来计算Y轴上的要画得数值,因为Y轴上的数值要根据用户的真实数据来确定,所以幅度很大,不确定性因素也很多。这样就需要我们动态的计算Y轴上的数值区间:

首先计算出用户数据中的最大值和最小值来确定区间

将计算出的最大值和最小值向上向下取一定幅度的值,比如最大值123,最小值63,最大值就可以取123+10,最小值取60-10

上面的代码显然是统一加上了某个数值,这个数值可以根据你的项目需求自己定义,但取下限的时候显然就要减去某个数值:具体为什么要这么做注释写得比较详细。

真正意义上的计算Y轴上数值刻度了:

这样就计算出来了Y轴需要动态画的数值。

接下来就开始画吧:模拟数据的代码这里就不贴了,后面会给出整个项目的源码,感兴趣的自己看看就懂了。

效果图:

显然,画线的逻辑并不复杂,只是计算Y轴上的值花了一定精力。

现在画折线了:

首先画出小圆点,然后将各个小圆点收尾相连接就是折线效果了:

注意上面的arraymax yMin两个值的含义。arraymax一定是Y轴上区间的差值,比如轴上的数组为[60,70,80,90,100],那么arrayma就是100-60;yMin见注释。

这里为什么要画两个圆?两个同心圆能够达到大圆是空心的效果,那画笔设置为STROKE不就行了?

看到了吧,感觉从圆中间穿过去了,是不是觉得不爽啊,于是有人就说,我把圆的半径算出来就行了,画线的时候减去这个半径,哥哥,如果前后两点不在同一直线上你还得算夹角,你慢慢算吧。算好了告诉我!

是不是美观很多啊?骚年?

这里的工作基本就完了,至于睡眠要画两条线,获取不同的数据 调用两次画圆点和线的方法就OK了。

至于代码里如果觉得部分逻辑混乱冗余,那就将就一下吧。

最后附上源码地址:

https://git.oschina.net/xy001/anroidwatchtable

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号:

转载请注明原文地址: https://www.6miu.com/read-1250151.html

最新回复(0)