Android平台下折线图组件的研究和实现

高毅，王昕，杨克光

（云南师范大学文理学院，昆明　650222）



Android平台下折线图组件的研究和实现

高毅，王昕，杨克光

（云南师范大学文理学院，昆明650222）

摘要：

关键词：

0　引言

随着移动互联网技术的飞速发展和人类生活需求的多样化，移动应用数量越来越多，种类也越来越丰富，其中，很多应用都和折线图组件有着密切的关系。现有的Android平台没有提供折线图组件，虽然可以从第三方获取到，但都存在一些不足，如：使用复杂、不够灵活、效果呆板等。这给相关的移动应用开发带来了不便，成为项目实施的瓶颈。

为此，本文结合类重写、Canvas、Paint等技术，提出一种灵活的、可定制的折线图组件的设计及实现方法。实现的折线图组件易使用，效率高。

1　相关技术

1.1View类［1］

虽然Android提供了很多继承了View类的UI组件，但是在实际开发时，还会出现不足以满足程序需要的情况。用户可以通过继承View来派生自定义组件。首先定义一个继承View的子类，然后重写View类的一个或者多个方法。

1.2Canvas类［1］

Canvas类就是表示一块画布，你可以在上面画你想画的东西。当然，你还可以设置画布的属性，如画布的颜色/尺寸等。Canvas类可以用来实现各种图形的绘制工作。

1.3Paint类［2］

要绘制图形，首先得调整画笔，按照自己的开发需要设置画笔的相关属性。Android中的画笔是Paint类，Paint中包含了很多方法对其属性进行设置。

2　折线图组件设计与实现

2.1折线图的实体类

实体类是用于对必须存储的信息和相关行为建模的类。实体对象（实体类的实例）用于保存和更新一些现象的有关信息。

（1）折线图实体类的主要属性

（2）折线图实体类的主要方法

①折线图实体类有两个构造方法，一个是没有参数的，一个是有参数的。其中，没有参数的构造方法主要是用来实现折线图实体类属性的默认值设置。

②实体类所有属性的get方法和set方法。为了折线图实体类的封装性和安全性，实体类的属性设置为私有的，对每一个属性设置公有的get方法和set方法，对象通过这两个方法就可以实现对属性的读写［3］。

2.2折线图的绘制类

（1）折线图的空间布局设计

折线图组件的空间布局分为折线图标题区、Y轴区、X轴区、折线绘制区、多选按钮区五个区域。设计如图1所示。

折线图标题区用来绘制折线图的标题，Y轴区用来绘制Y轴的线条、Y轴的刻度、Y轴的单位，X轴区用来绘制X轴的线条、X轴的刻度、X轴的单位，折线绘制区用来绘制折线，多选按钮区用来显示多选按钮，本文设计的折线图组件支持多条折线的绘制，可以根据多选按钮的选择状态来控制折线的显示。

图1　布局设计图

（2）重写View类的onDraw方法

①相关的计算公式

在绘制Y轴和X轴时，不光要考虑轴的线条和刻度，还要考虑单位的绘制，单位是文本类型，要占一定的布局空间，并要和相关的刻度对齐。所以，要计算Y轴左边距、Y轴最大刻度值，Y轴最小刻度值、Y轴刻度数目、X轴下边距等。它们的计算公式如下所示。

其中，Ym表示Y轴左边距，Yts表示Y轴单位字体大小（单位：sp），Yfs表示Y轴单位字体伸缩度，可以通过获取context.getResources（）.getDisplayMetrics（）.scaled-Density属性值得到，Ymvtl表示初始化Y轴的数据序列值中的最大值所占的字符个数，Ymaxu表示Y轴最大刻度值，Ymuih表示初始化Y轴的数据序列值中的最大值的整数部分最高位的值，Ymvic表示初始化Y轴的数据序列值中的最大值的整数部分位数，Ymaxu表示Y轴最小刻度值，Ymvin表示初始化Y轴的数据序列值中的最小值的第n位整数的值（n为Ymvic-1），Yuc表示Y轴刻度数目，Ymaxu表示Y轴最大刻度值，Yminu表示Y轴最小刻度值，Xm表示X轴左边距，Xts表示X轴单位字体大小（单位：sp），Xfs表示X轴单位字体伸缩度，可以通过获取context.getResources（）.getDisplayMetrics（）.scaled-Density属性值得到。

（2）onDraw方法的核心代码

以下程序片段是重写onDraw方法的核心代码，这一部分的作用是在折线绘制区绘制折线。先是把数据对应的点绘制出来，再在相邻的点之间绘制线条。

3　实验

我们选择搭载Android4.0操作系统的移动终端作为实验环境，移动终端的屏幕尺寸为4寸屏，分辨率为480×800，CPU为ARM（主频为2.3GHz），内存为2G。实验效果如图2、图3所示。折线图组件的调用实验效果良好，布局整齐，响应速度快，用户体验好。下面的多选按钮的文本颜色和对应数据的折线颜色一致，如图2所示，“2014年度”用的是绿色，对应折线的颜色也为绿色；“2015年度”用的是红色，对应折线的颜色也为红色；“2016年度”用的是蓝色，对应折线的颜色也为蓝色。该折线图组件可以通过下面的多选按钮选项的选择来显示相应的折线图，如图3所示，“2014年度”的按钮没有被选中，在折线绘制区只显示成选中状态的“2015年度”和“2016年度”对应的折线。

4　结语

本文从现有技术出发，提出一种灵活的、可定制的折线图组件的设计及实现方法，实验效果良好，布局整齐，响应速度快，用户体验好。虽然能满足很多移动应用开发者的需要，但还是存在一些缺点，该折线图组件属于静态而不是动态，就会有些应用领域的需求得不到满足，例如动态心电图的显示等。未来，我们将在这一方面做进一步研究。

图2　实验效果图一

图3　实验效果图二

参考文献：

［1］左军. Android程序设计经典教程［M］.北京：清华大学出版社，2015，4.

［2］王鹏杰，霍建同. Android高级编程［M］.北京：清华大学出版社，2010，6.

［3］李刚.疯狂Android讲义（第2版）［M］.北京：电子工业出版社，2013，4.

Research and Implementation of the Line Chart Component in the Android Platform

GAO Yi，WANG Xin，YANG Ke-guang
（College of Arts and Sciences，Yunnan Normal University，Kunming 650222）

Abstract：

Keywords：

折线图是一种很好的统计工具，在很多应用软件中都得到大量的使用。但在Android平台下，并没有提供折线图组件。结合现有技术，提出一种基于Android平台的折线图组件的设计及实现方法。实验效果良好，这对移动应用的开发有很好的意义。

Android平台；折线图；组件；类重写

基金项目：

云南省教育厅科学研究基金项目（No.2015Y523）

文章编号：1007-1423（2016）13-0069-04

DOI：10.3969/j.issn.1007-1423.2016.13.018

作者简介：

高毅（1980-），男，云南宣威人，硕士研究生，讲师，研究方向为程序设计方法、编译技术

王昕（1975-），男，云南昆明人，硕士研究生，讲师，研究方向为通信与信息系统、网络管理

杨克光（1977-），男，云南临沧人，硕士研究生，讲师，研究方向为数据库技术、信息系统

收稿日期：2016-03-22修稿日期：2016-04-25

The line chart is a kind of very good statistical tools，in many applications have been a lot of use. But，it does not provide a line chart component in the Android platform. Combining with the existing technology，comes up a line chart component for design and implementation method based on the Android platform. The experimental effect is good，this is a very meaningful for the development of mobile applications.

Android Platform；Line Chart；Component；Overridden By A Class