这次分享的代码原型出自于两年前自己为了应聘而写的一个demo，今年趁着假期抽取成了可以复用的轮子供大家使用。目前是第一版，仅支持展示SQLite中存储的数据，往后会支持直接传入HashMap<String, Integer>类型的数据并更新到 github 上。开发者也可以根据现有代码自行修改展示自己想要展示的数据类型，难度已经不是很大。
一、首先还是简单介绍一下实现逻辑，为了激发大家的学习欲望，首先pow两张效果图：
填充屏幕模式
支持左右滑动模式
1）首先，实现波浪统计曲线最大的坑就是如何避免二阶贝塞尔曲线在连接的时候出现弯折。我们都知道，二阶贝塞尔曲线的实现原理是由两个基础点和一个控制点实现波浪连接的，类似下图：
而统计图的数据则是千变万化，所有的点也是随机分布，如果我们直接将所有的统计数据描点，然后依次用二阶贝塞尔曲线直接连接，则极有可能出现以下的曲线弯折现象：
因此直接用二阶贝塞尔曲线连点的方式是不可取的，我们需要在已经存在的数据点之间分别再取中点，然后把这些点加入到已经存在的数据点中，最后依次用贝塞尔曲线连接，如下图绿色粗线，这样就可以避开所有可能的弯折点，实现顺滑的曲线连接：
因此，我们只需要将获取到的所有数据点取出，再分别求出其中两点之间的中点坐标，然后按顺序放入队列中，除开第一个和最后一个点采取lineTo的方式直线连接之外，其它全部依次用二阶贝塞尔曲线相连，即可获得一条完美的曲线。
2）绘制统计图背景色渐变背景（主要关注 LinearGradient这个类）：
3）绘制统计图渐变背景色顶部遮盖（上半部分保留纯色遮盖，曲线以下的部分露出第二步绘制的渐变色背景）：
以上代码逐行理解也很简单，首先创建画笔，然后设置画笔为填充模式，设置填充颜色，然后先绘制出统计曲线的轨迹，绘制完成之后，采用lineTo的方法将统计曲线和自定义View顶部的两个点连接起来，并调用close方法封闭，这就行成了一个纯色背景的顶部遮盖，渐变色背景的统计图效果就初步显示出来了。
4）最后再用白色的画笔在成图上画出白色的统计曲线，整个自定义View的效果就算是完成了。
二、以下介绍自定义View的使用方式和相关属性，着急开发相关功能的开发者可以直接从 github 上拷贝代码，根据其中已经封装好的相关属性迅速实现自己想要的效果，项目地址：https://github.com/liuchenguangqnm/statisticsView.git
1）属性介绍：
android:background：安卓自带的背景属性，这里代表统计图下方日期展示的背景颜色
app:path_view_theme_color：曲线统计图背景主题颜色
app:is_width_match：统计图宽度是否刚好填充屏幕，如果设置为true，则曲线图宽度和屏幕相等；如果设置为false，则曲线图的宽度会根据数据量的大小而变化，同时支持左右滑动查看
app:is_big_interval_at_bottom_text：用于设置统计图底部的日期是否五日显示一次。如果设置为true，则底部的日期每五天才会显示一次，如果设置为false，则统计图底部的日期全部都会展示出来
app:istatistics_view_height：用于设置流线统计图高度
app:date_text_view_height：用于设置底部日期文本展示的高度
app:per_date_width：用于设置每日数据展示所占据的dp宽度
app:date_text_size：用于设置日期文本的字体大小
2）使用方法：
首先在布局 xml 中添加自定义视图类 StatisticsViewGroup，并用HorizontalScrollView包裹。代码如下：
其次在代码中设置需要展示的数据（注意：开发者在使用本自定义控件展示不同类型的数据时，只需改造setSaveDataBase方法里面的代码就足够适配所有类型的数据展示了）：
以上，完结撒花，后期会针对 setSaveDataBase 方法做更多的适配完善，方便更多的人使用，转载请注明出处 ~
网友评论