基于Android平台的柱状图组件的设计实现

高毅，杨克光，王昕

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

基于Android平台的柱状图组件的设计实现

高毅，杨克光，王昕

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

在很多移动应用开发中，开发人员都会用到柱状图工具。但是，Android平台并不提供这种组件。提出一种基于Android平台的柱状图组件的设计及实现方法，实现的柱状图效果良好，这对移动应用的开发有很好的意义。

Android平台；柱状图；组件

0　引言

随着信息技术的飞速发展和人类社会的日益进步，用户对移动应用的需求越来越多，不仅是对移动应用的数量，对移动应用的种类也要求要越来越丰富，这其中，很多移动应用都和柱状图组件有着紧密的联系，然而，Android平台并没有提供柱状图组件，虽然可以从开源项目中获得，但都存在一些不足，不能满足项目开发的需求。为此，本文结合View类重写、画布、画笔技术，提出一种自定义的柱状图组件的设计实现方法。

1　相关概念

1.1柱状图[1]

柱状图，也称条状图，是一种以长方形的长度为变量的表达图形的统计报告图，由一系列高度不等的纵向条纹表示数据分布的情况，用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。

1.2 View类[2]

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

（1）构造器：重写构造器是定制View的最基本方式，当Java代码创建一个View实例，或根据XML布局文件加载并构建界面时将需要调用构造器。

（2）onMeasure（int,int）：调用该方法来检测View组件及它所包含的所有子组件的大小。

（3）onLayout（boolean,int,int,int,int）：当该组件需要分配其子组件的位置、大小时，该方法就会被回调。

（4）onSizeChanged（int,int,int,int）：当该组件的大小被改变时回调该方法。

（5）onDraw（Canvas）：当该组件将要绘制它的内容时回调该方法进行绘制。

（6）onKeyDown（int,KeyEvent）：当某个键被按下时触发该方法。

（7）onKeyUp（int,KeyEvent）：当松开某个键时触发该方法。

（8）onTouchEvent（MotionEvent）：当发生触摸屏事件时触发该方法。

2　柱状图组件的设计

2.1柱状图组件的空间布局设计

柱状图组件的空间布局由标题区、Y轴区、X轴区、绘制区、CheckBox区五个区域组成。设计如图1所示。标题区用来绘制柱状图的标题，Y轴区用来绘制Y轴的线条、Y轴的刻度、Y轴的单位，X轴区用来绘制X轴的线条、X轴的刻度、X轴的单位，绘制区用来绘制柱状图，CheckBox区用来显示多选按钮，本文设计的柱状图组件支持多组柱状图的绘制，可以根据多选按钮的选择状态来控制柱状图的显示。

图1　空间布局设计图

2.2柱状图宽度的计算公式

本文设计的柱状图组件，可以在X轴的每一个刻度的地方显示多条柱状图。若设计不好，不同刻度的柱状图可能会发生覆盖的情况，所以，一定要对每条柱状图的宽度进行计算。每条柱状图宽度的计算公式如下：

其中，Wbar表示每条柱状宽度；Xlen表示X轴长度；Xuc表示X轴的刻度数；Bdis表示柱状图间距；Xbcpu表示X轴每一个刻度对应的柱状图条数。

3　柱状图组件的实现

3.1颜色值转换方法

为了方便用户使用，用户在设置颜色值时可以用形如“#AARRGGBB”或“#RRGGBB”的字符串表示。其中，’#’是一个标志符；“AA”是两位十六进制字符，表示颜色的alpha分量；”RR”是两位十六进制字符，表示颜色的red分量；“GG”是两位十六进制字符，表示颜色的green分量；“BB”是两位十六进制字符，表示颜色的blue分量[3]。在绘制图形时，Android代码不支持这样的表示形成，只支持用int类型来表示颜色分量[4]。所以，需要一个方法把形如“#AARRGGBB”或“#RRGGBB”的字符串值转换为四个int类型的值。该方法的核心代码如下：

3.2 onDraw方法的关键代码

以下程序片段是重写onDraw方法的关键代码，这一部分的作用是在绘制区绘制柱状图。

4　实验

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

图2　实验效果图一

图3　实验效果图二

5　结语

本文从现有技术的角度出发，提出一种灵活的、自定义的柱状图组件的设计实现方法，经过实验测试，效果良好，布局整齐，响应速度快。虽然能满足很多移动应用开发者的需要，但还是存在一些缺点，该柱状图组件还没有实现簇状和堆积的效果，在以后的研究工作中，我们将在这些方面做深入研究。

[1]马崇华,方娇莉.信息处理技术基础教程[M].北京：清华大学出版社，2009.7.

[2]左军.Android程序设计经典教程[M].北京：清华大学出版社，2015.4.

[3]王鹏杰,霍建同.Android高级编程[M].北京：清华大学出版社，2010.6.

[4]李刚.疯狂Android讲义（第2版）[M].北京：电子工业出版社，2013.4.

Design and Implementation of the Bar Chart Component Based on the Android Platform

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

In lots of mobile application development,developers can use bar chart.However,Android platform does not provide this kind of components.Proposes a bar chart component for design and implementation method based on Android platform,the experimental effect of bar chart is good,this is a very meaningful for the development of mobile applications.

Android Platform;Bar Chart;Componen

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

1007-1423（2016）16-0077-04DOI：10.3969/j.issn.1007-1423.2016.16.021

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

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

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

2016-03-22

2016-05-16