自定义折线图

作者: 徐大哈_401d | 来源:发表于2018-05-02 11:27 被阅读19次

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

    实现思路:

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

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

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

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

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

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

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

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

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

    相关文章

      网友评论

        本文标题:自定义折线图

        本文链接:https://www.haomeiwen.com/subject/aiwqrftx.html