Android 自定义控件之折线图

最新推荐文章于 2017-07-03 16:28:45 发布

原创最新推荐文章于 2017-07-03 16:28:45 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#折线图

自定义控件专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一款自定义图表控件的设计与实现过程。该控件主要包括三个实体类：横向刻度、纵向刻度和折线点。文章详细阐述了如何通过这些实体类绘制图表，并提供了使用方法和布局属性设置指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

世面上有很多图表类的控件但有很多坑，于是就自己动手写。在这个控件中最难的不是知识点而是对坐标的把控。这个控件很多属性都可以开放出来的。同学可以根据自己的情况进行修改，另外也写了很详细的注释帮助同学们进行理解。

下载地址请点击点击

一、实现原理

本控件有三个实体类：
1、CrossAxisScale 用于自定义横向刻度
2、VerticalAxisScale 用于定义纵向刻度
3、FoldLinePoint 用于定义每个折线点
若横向刻度为空则FoldLinePoint的scaleTip用于定义刻度值。
首先根据CrossAxisScale来画纵轴的刻度
再用VerticalAxisScale或FoldLinePoint来画横轴的刻度
最后FoldLinePoint把所有的点连接起来

二、使用方法

1、添加横向刻度（若不定义则使用折线点刻度）
2、添加纵向刻度
3、添加折线点
4、调用initData（）方法将这些添加进去
5、设置Listener
注：刻度的宽度、颜色属性等需要在layout里面进行设置如下：

android:id="@+id/fl_content"
android:layout_width="match_parent"
android:layout_height="300dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
app:axisScaleWidth="5dp"
app:axisWidth="1dp"
app:crossAxisColor="#F88D3D"
app:foldLineCircleColor="@android:color/white"
app:foldLineCircleRadius="1dp"
app:foldLineColor="#3396C574"
app:foldLineOuterColor="#8CBA68"
app:isDrawFoldLineCircle="true"
app:isFillMode="true"
app:verticalAxisColor="#F88D3D" />