自定义折线图

这段时间接手了一个金融产品的项目,底层使用MVP构架,刚好项目中需要实现一个折线图展示每月的收益。所以准备自己动手搞一个出来,自给自主。


实现思路:

1.最底层背景是一个XY轴的坐标,但是我们项目中并没有明显的X轴跟Y轴,只是X方向上是月份,Y方向上是固定的对应收益率。画上去的都是Text,并没有要求画线出来。所以只需要在onDraw中先画X跟Y上的文字即可:

自定义折线图_第1张图片

因为文字与文字之间是需要分隔开的,所以需要画布平移给定的space。


自定义折线图_第2张图片

紧接着我们开始绘制Y方向上的文字,间隔跟X上的方法绘制一样,但是需要注意的是android上的坐标系跟数学坐标系是有点区别的,它是以屏幕左上角为圆点,X轴往右为正方向,Y轴往下为正方向,所以如果想把Y轴上的文字从下到上增长,需要先把画布平移到最底部。

在画Y上文字的同时,把Y上对应的虚线一同画好。虚线的画法是一小段一小段的实线,再把画布平移一小段,效果就等同于虚线了。

这样我们就把折线图的背景画好了,接下来到了绘制折线了。

2.绘制折线可以借助Path这个东西。通过从接口获取来的每月对应的收益率,把Path的起点设置好,然后再lineTo到下一个点。

自定义折线图_第3张图片

大概的流程如上所述了,具体的细节可以再开发中优化实现。比如通过手指的移动展示出每月的具体收益率等等。


测量那一块在自定义View中都是大同小异的,主要区别还是在Wrap的情况下需要自己来计算,这里我就不贴出来了。


项目GitHub:  https://github.com/coderxuyueping/BrokenLineView

你可能感兴趣的:(自定义折线图)