仿糖护士曲线图写的一个CurveChartView

今日科技快讯

日前，锤子科技创始人罗永浩在极客公园Rebuild 2017大会行宣布近期获得了一笔接近10亿元的融资。锤子科技投资人透露，锤子本轮近10亿元融资中，成都市政府方面出资6亿元，一半为股权投资，一半为债权投资；此外，私募基金投资3亿到4亿元。

作者简介

新的一周，新的一天，在恢复工作状态的同时也要好好的学习积累哦。

本篇来自 超神的菠萝 的投稿，主要介绍了编写了一个仿糖护士曲线图写的CurveChartView，希望大家会喜欢。

超神的菠萝  的博客地址：

http://www.jianshu.com/u/1ae0f1a98794

糖护士IOS版效果

image.png

image.png

自定义效果

ScreenGif7.gif

适配效果

ScreenGif8.gif

实现思路

将view拆分为4个部分绘制

• 绘制横向线段+文字，即2.5-33.0以及对应的线段横向无变化。

• 绘制纵向线段+文字，即日期以及对应的纵向线段，在滑动时候要一直变换

• 绘制中间的阴影块以及文字

• 绘制曲线

实现步骤

• 重写 onMeasure()，当高度的测量模式为 EXACTLY 时，方格的高度为，view 高-1个半字体的高度/（纵列字数-1）即 segmentLone = (height - textRect.height() / 2 * 3) / (vPoints - 1);。高度测量模式为 AT_MOST 时，通过固定的方格高度计算 view 高度 即 height = segmentLone * (vPoints + 1);代码如下所示：

• 重写 onDraw() 将 view 拆分为4个部分绘制,画横线，纵线，阴影以及曲线，代码如下所示：

• drawHLinesAndText() 先裁剪画布为屏幕宽度及高度，第一条线的高度为 text 的高度的一半，之后的线段递增固定高度，代码如下所示：

• drawVLinesAndText() 画纵向线段，先需要工具类获取今天以及今天前N天的日期放入 list中，根据  module 设置不同取不同的日期，在绘制后，将画布平移到最新的日期。代码如下所示：

• drawTransRectAntText() 绘制阴影,这部分比较简单，代码如下所示：

• drawLinesAndPoint() 绘制曲线，根据预先封装好的用来获取坐标原点的方法，并且根据module 设置的不同，来获取某一点在表格中实际的位置，代码如下所示：

• 处理 onTouchEvent()，滑动时，记录横向滑动产生的 offset 不断重新绘制，使表格可以移动，并且通过速度监听器以及属性动画实现惯性滑动，代码如下所示：

• 供外部刷新 view 的方法

• 更新模式 5天 1天 1天+小时段，代码如下所示：

• 定位到某一天，适配以上3种模式，代码如下所示：

更多的优化

• 动态设置阴影的位置，以及要显示的文字，代码如下所示：

• 动态更新点，代码如下所示：

画曲线时，根据阴影的位置设置不同的线段颜色，任意2个相连的点之间，若分为3个象限，则需要处理11,12,13,22,23,33这6种不同的情况，最主要的是需要得到y点差值的比例值去计算交叉点线段的距离，再通过 pathMeasure.getPosTan() 这个方法来获取曲线与阴影的交叉点位置。代码有点长就不贴了~~~

image.png

具体源码，请查看该链接：

https://git.oschina.net/super_sp/zidingyiviewceshi/blob/master/app/src/main/java/com/administrator/customviewtest/successview/CurveChartView.java

更多

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

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

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