基于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