基于Android 的自定义散点图组件

高毅，王昕，丁勇

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

0 引言

在进行Android 应用开发时，离不开应用界面的设计，Android 系统本身提供了很多组件用于界面设计，常用的有文本框、编辑框、按钮、单选按钮与单选按钮组、复选框、图片框、下拉列表框、列表框、开关按钮等。这些组件基本上能满足大多数应用的开发需求，但仍然有一些需求是满足不了的，现今的大多数应用离不开数据展示，尤其是移动端的开发，需要用到图表来向用户展示数据，而散点图是其中最为常见的一种，但Android 系统本身并不提供散点图组件，因此需要开发者来创建自定义的散点图组件，以实现用户的特殊需求。

然而，Android 系统中的散点图组件的开源方案并不多，第三方的散点图组件或多或少都存在一些问题，要么使用不便，要么不够灵活，要么用户体验差。本文通过设计一个基于Android 的散点图组件，实现了数据的可视化展示，该组件的实现继承了View 类，重写了多个方法，加入了好多的组件属性作为类的数据成员，并编写了get 方法和set 方法，丰富了散点图组件的显示样式，根据ValueAnimator 对象值不断的重绘散点图，以实现动画效果，增强了用户体验。

1 相关概念

1.1 散点图

散点图是指在回归分析中，数据点在直角坐标系平面上的分布图，散点图表示因变量随自变量而变化的大致趋势，据此可以选择合适的函数对数据点进行拟合。

用两组数据构成多个坐标点，考察坐标点的分布，判断两变量之间是否存在某种关联或总结坐标点的分布模式。散点图将序列显示为一组点。值由点在图表中的位置表示。类别由图表中的不同标记表示。散点图通常用于比较跨类别的聚合数据[1]。

1.2 View类

Android 应用的绝大部分UI 组件都放在android.widget 包及其子包、android. view 包及其子包中，Android 应用的所有UI 组件都继承了View 类，View 组件非常类似于Swing 编程的JPanel，它代表一个空白的矩形区域。

View 类还有一个重要的子类ViewGroup，但View-Group 通常作为其他组件的容器使用。Android 的所有UI 组件都是建立在View、ViewGroup 基础上的，Android 采用了“组合器”设计模式来设计View 和View-Group：ViewGroup 是View 的子类，因此ViewGroup 也可以被当成View 使用。对于一个Android 应用的图形用户界面来说，ViewGroup 作为容器来盛装其他组件，而ViewGroup 里除了可以包含普通View 组件之外，还可以再次包含ViewGroup 组件。

基于Android UI 组件的实现原理，开发者完全可以开发出项目定制的组件，当Android 系统提供的UI组件不足以满足需求时，可以通过继承View 来派生自定义组件。过程为，首先定义一个继承View 基类的子类，然后重写View 类的一个或多个方法来实现[2]。

2 散点图组件的设计

2.1 布局空间设计

移动端应用开发最大的特点之一就是可用显示空间小，要让有限的布局空间去展示更多数据和信息，所以散点图组件的布局空间设计尤为关键。散点图的布局空间设计如图1 所示，由图表标题区、Y 轴区、X 轴区、空白区、系列标题区和图表绘制区组成，其中空白区并不绘制内容，为了在水平方向上对称，它的大小和Y 轴区大小一致[3-4]。在该组件的设计过程中，为了能让Android 应用开发者可以自由地去设置文本的大小，首先计算该组件在移动设备端的显示大小，再计算Y轴区、X 轴区、空白区、系列标题区所占大小，最后得到图表绘制区的大小。

图1 布局空间设计图

2.2 点绘制

本文实现的散点图组件支持显示多个系列值，为了区别不同的系列，不仅使用了不同的颜色，还使用了不同的形状标志。本文的散点图组件支持的点标志有8 种，分别为圆形、正方形、等边三角形、菱形、正五边形、正六边形、十字形状和五角星形。

在点标志绘制过程中，圆形和正方形的绘制相对简单，使用drawCircle 方法来绘制圆形，使用drawRect方法来绘制正方形。而其他六种点标志的绘制相对复杂，需要用到Android 中的Path 方面的技术。下面先对Path 做一个简单的介绍，然后介绍这六种点标志的绘制过程。

（1）Path 类

在进行画线等操作时还需要连接路径，这个工具由Path 提供，Path 类中包含一些直线或曲线连接到指定点的方法。Android 提供的Path 是一个非常有用的类，它可以预先在View 上将N 个点连成一条“路径”，然后调用Canvas 的drawPath 方法即可沿着路径绘制图形。

（2）等边三角形

在绘制等边三角形时，首先固定一个中心点坐标（centerX，center），在以width 的一半为半径的圆上面计算出等边三角形的3 个点的坐标，依次为（centerX，centerY-width/2）、（centerX+width/2，centerY+width/2）、（centerX-width/2，centerY+width/2），用Path 对象把这3 个点连接起来并闭合，就可以绘制出等边三角形了。

（3）菱形

在绘制菱形时，首先固定一个中心点坐标（centerX，center），在以width 的一半为半径的圆上面计算出菱形的4 个点的坐标，依次为（centerX，centerYwidth/2）、（centerX+width/2，centerY）、（centerX，centerY+width/2）、（centerX-width/2，centerY），用Path 对象把这4 个点连接起来并闭合，就可以绘制出菱形了。

（4）正五边形

在绘制正五边形时，首先固定一个中心点坐标（centerX，center），在以width 的一半为半径的圆上面计算出正五边形的5 个点的坐标，依次为（centerX，centerYwidth/2）、（centerX+width/2，centerY-disY）、（centerX+disX，centerY+width/2）、（centerX-disX，centerY+width/2）、（centerX-width/2，centerY-disY），用Path 对象把这5 个点连接起来并闭合，就可以绘制出正五边形了。

（5）正六边形

在绘制正六边形时，首先固定一个中心点坐标（centerX，center），在以width 的一半为半径的圆上面计算出正六边形的6 个点的坐标，依次为（centerX-（width/4），centerY-width/2）、（centerX+（width/4），centerYwidth/2）、（centerX+width/2，centerY）、（centerX+（width/4），centerY+width/2）、（centerX-（width/4），centerY+width/2）、（centerX-width/2，centerY），用Path 对象把这6 个点连接起来并闭合，就可以绘制出正六边形了。

（6）十字形状

在绘制十字形状时，首先固定一个中心点坐标（centerX，center），在以width 的一半为半径的圆上面计算出十字形状的12 个点的坐标，依次为（centerXwidth/6，centerY-width/2）、（centerX+width/6，centerYwidth/2）、（centerX+width/6，centerY-width/6）、（centerX+width/2，centerY-width/6）、（centerX+width/2，centerY+width/6）、（centerX+width/6，centerY+width/6）、（centerX+width/6，centerY+width/2）、（centerX-width/6，centerY+width/2）、（centerX-width/6，centerY+width/6）、（centerX-width/2，centerY+width/6）、（centerXwidth/2，centerY-width/6）、（centerX-width/6，centerYwidth/6），用Path 对象把这12 个点连接起来并闭合，就可以绘制出十字形状了。

（7）五角星形

在绘制五角星形时，首先固定一个中心点坐标（centerX，center），在以width 的一半为半径的圆上面计算出五角星形的5 个点的坐标，依次为（centerX，centerY-width/2）、（centerX-disX，centerY+width/2）、（centerX+width/2，centerY-disY）、（centerX-width/2，centerY-disY）、（centerX+disX，centerY+width/2），用Path对象把这5 个点连接起来并闭合，就可以绘制出五角星形了。其中，disX 和disY 的计算公式如下：

使用上面方法绘制的8 种点标志的效果如图2所示。

图2 点标志效果图

2.3 散点图绘制

在Android 系统中实现自定义组件，需要继承View 类，重写其中的一个或者多个方法，其中对on-Draw 方法的重写尤为关键。本文描述的散点图组件是有动画效果的，在绘制过程中把背景的绘制和图表区的绘制分开，这样有利于控制图表区的动画效果。下面先对ValueAnimator 技术做简单介绍，再对方法中的关键代码做描述。

（1）ValueAnimator 类

Android 系统中的属性动画最关键的就是时间引擎，它负责计算各个帧的属性值。它定义了属性动画的绝大部分核心功能，包括计算各帧的相关属性值，负责处理更新事件，按属性值的类型控制计算规则。属性动画主要由两方面责成：计算各帧的相关属性值；为指定对象设置这些计算后的值。ValueAnimator 只负责第一方面内容，因此，要实现动画必须根据ValueAnimator 计算并监听值更新来更新对象的相关属性[2]。

（2）onDraw 方法的关键代码

重写onDraw 方法的关键代码如下：

//根据android 系统属性动画的监听值animatedValue 计算将要绘制第几个点标志

int no=getScope（animatedValue）；

//把第no 前面的所有点标志再绘制一遍

for（int j=1；j＜no；j++）{

if（j＜scatterPlotSeries.get（i）.getSeriesValues（）.size（））{

v=scatterPlotSeries.get（i）.getSeriesValues（）.get（j）；

//计算绘制点标志的中心点坐标

stopX=startLeft+（j）*avgDis；

stopY=startTop+（（Float. valueOf（yItemTitle. get（yItemsCount-1））-（float）v）/（Float. valueOf（yItemTitle. get（yItemsCount-1））-Float. valueOf（yItemTitle. get（0））））*contentHeight；

//调用绘制点标志的方法绘制点标志

rawMark（canvas，seriesMark[i%seriesMark. length]，seriesItemColor.get（i%seriesItemColor.size（）），stopX，stopY，dp-Topx（markWidth））；

3 实验效果

本文实现的散点图组件的效果如图3 和图4 所示，该散点图可以显示多个系列，不同的系列，不仅颜色不一样，点标志的样式也不一样，而且还具有动画效果，动画效果为依次从左到右显示点标志，相比现有的第三方类似的组件，具有更好的用户体验。在实际应用中，该散点图还可以自定义背景颜色、背景线条粗细、背景线条颜色、文本大小、文本颜色等属性，满足了Android 开发者更多的需求，显示效果的设置多样化，使用更加灵活。

尽管目前也有一些基于Android 的散点图组件，或多或少都存在一些问题，如使用不便、不够灵活等，相比之下，本文描述的散点图组件还是具有一定的实用性和创新性。

4 结语

本文提出的基于Android 的自定义散点图组件可以解决一些数据展示的问题，可以展示多个系列的数据，方便不同系列的数据进行对比，经过测试，布局整齐，响应速度快，动画效果良好，大大增强了用户体验，能满足大多数Android 应用开发人员的需求。但是，还是有一些方面需要进一步研究，如气泡图、基于地图的散点图等，在下一步的研究工作中，将在这些方面做深入研究。

图3 实验效果图一

图4 实验效果图二