专栏名称: 郭霖
Android技术分享平台,每天都有优质技术文章推送。你还可以向公众号投稿,将自己总结的技术心得分享给大家。
目录
相关文章推荐
鸿洋  ·  卡顿监测的方方面面 ·  2 天前  
鸿洋  ·  大图检测插件的落地 ·  3 天前  
鸿洋  ·  初识Android内存优化 ·  4 天前  
鸿洋  ·  Android AppOpsService是什么? ·  5 天前  
鸿洋  ·  打造Android热修复专家 ·  6 天前  
51好读  ›  专栏  ›  郭霖

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

郭霖  · 公众号  · android  · 2017-08-14 08:00

正文

今日科技快讯

日前,锤子科技创始人罗永浩在极客公园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

更多

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

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

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