基于A(yíng)ndroid平臺(tái)的柱狀圖組件的設(shè)計(jì)實(shí)現(xiàn)

高毅，楊克光，王昕

（云南師范大學(xué)文理學(xué)院，昆明650222）

基于A(yíng)ndroid平臺(tái)的柱狀圖組件的設(shè)計(jì)實(shí)現(xiàn)

高毅，楊克光，王昕

（云南師范大學(xué)文理學(xué)院，昆明650222）

在很多移動(dòng)應(yīng)用開(kāi)發(fā)中，開(kāi)發(fā)人員都會(huì)用到柱狀圖工具。但是，Android平臺(tái)并不提供這種組件。提出一種基于A(yíng)ndroid平臺(tái)的柱狀圖組件的設(shè)計(jì)及實(shí)現(xiàn)方法，實(shí)現(xiàn)的柱狀圖效果良好，這對(duì)移動(dòng)應(yīng)用的開(kāi)發(fā)有很好的意義。

Android平臺(tái)；柱狀圖；組件

0　引言

隨著信息技術(shù)的飛速發(fā)展和人類(lèi)社會(huì)的日益進(jìn)步，用戶(hù)對(duì)移動(dòng)應(yīng)用的需求越來(lái)越多，不僅是對(duì)移動(dòng)應(yīng)用的數(shù)量，對(duì)移動(dòng)應(yīng)用的種類(lèi)也要求要越來(lái)越豐富，這其中，很多移動(dòng)應(yīng)用都和柱狀圖組件有著緊密的聯(lián)系，然而，Android平臺(tái)并沒(méi)有提供柱狀圖組件，雖然可以從開(kāi)源項(xiàng)目中獲得，但都存在一些不足，不能滿(mǎn)足項(xiàng)目開(kāi)發(fā)的需求。為此，本文結(jié)合View類(lèi)重寫(xiě)、畫(huà)布、畫(huà)筆技術(shù)，提出一種自定義的柱狀圖組件的設(shè)計(jì)實(shí)現(xiàn)方法。

1　相關(guān)概念

1.1柱狀圖[1]

柱狀圖，也稱(chēng)條狀圖，是一種以長(zhǎng)方形的長(zhǎng)度為變量的表達(dá)圖形的統(tǒng)計(jì)報(bào)告圖，由一系列高度不等的縱向條紋表示數(shù)據(jù)分布的情況，用來(lái)比較兩個(gè)或以上的價(jià)值（不同時(shí)間或者不同條件），只有一個(gè)變量，通常利用于較小的數(shù)據(jù)集分析。

1.2 View類(lèi)[2]

雖然Android提供了很多繼承了View類(lèi)的UI組件，但是在實(shí)際開(kāi)發(fā)時(shí)，還會(huì)出現(xiàn)不足以滿(mǎn)足程序需要的情況。用戶(hù)可以通過(guò)繼承View來(lái)派生自定義組件。首先定義一個(gè)繼承View基類(lèi)的子類(lèi)，然后重寫(xiě)View類(lèi)的一個(gè)或者多個(gè)方法。下面就View類(lèi)的主要方法進(jìn)行簡(jiǎn)單介紹：

（1）構(gòu)造器：重寫(xiě)構(gòu)造器是定制View的最基本方式，當(dāng)Java代碼創(chuàng)建一個(gè)View實(shí)例，或根據(jù)XML布局文件加載并構(gòu)建界面時(shí)將需要調(diào)用構(gòu)造器。

（2）onMeasure（int,int）：調(diào)用該方法來(lái)檢測(cè)View組件及它所包含的所有子組件的大小。

（3）onLayout（boolean,int,int,int,int）：當(dāng)該組件需要分配其子組件的位置、大小時(shí)，該方法就會(huì)被回調(diào)。

（4）onSizeChanged（int,int,int,int）：當(dāng)該組件的大小被改變時(shí)回調(diào)該方法。

（5）onDraw（Canvas）：當(dāng)該組件將要繪制它的內(nèi)容時(shí)回調(diào)該方法進(jìn)行繪制。

（6）onKeyDown（int,KeyEvent）：當(dāng)某個(gè)鍵被按下時(shí)觸發(fā)該方法。

（7）onKeyUp（int,KeyEvent）：當(dāng)松開(kāi)某個(gè)鍵時(shí)觸發(fā)該方法。

（8）onTouchEvent（MotionEvent）：當(dāng)發(fā)生觸摸屏事件時(shí)觸發(fā)該方法。

2　柱狀圖組件的設(shè)計(jì)

2.1柱狀圖組件的空間布局設(shè)計(jì)

柱狀圖組件的空間布局由標(biāo)題區(qū)、Y軸區(qū)、X軸區(qū)、繪制區(qū)、CheckBox區(qū)五個(gè)區(qū)域組成。設(shè)計(jì)如圖1所示。標(biāo)題區(qū)用來(lái)繪制柱狀圖的標(biāo)題，Y軸區(qū)用來(lái)繪制Y軸的線(xiàn)條、Y軸的刻度、Y軸的單位，X軸區(qū)用來(lái)繪制X軸的線(xiàn)條、X軸的刻度、X軸的單位，繪制區(qū)用來(lái)繪制柱狀圖，CheckBox區(qū)用來(lái)顯示多選按鈕，本文設(shè)計(jì)的柱狀圖組件支持多組柱狀圖的繪制，可以根據(jù)多選按鈕的選擇狀態(tài)來(lái)控制柱狀圖的顯示。

圖1　空間布局設(shè)計(jì)圖

2.2柱狀圖寬度的計(jì)算公式

本文設(shè)計(jì)的柱狀圖組件，可以在X軸的每一個(gè)刻度的地方顯示多條柱狀圖。若設(shè)計(jì)不好，不同刻度的柱狀圖可能會(huì)發(fā)生覆蓋的情況，所以，一定要對(duì)每條柱狀圖的寬度進(jìn)行計(jì)算。每條柱狀圖寬度的計(jì)算公式如下：

其中，Wbar表示每條柱狀寬度；Xlen表示X軸長(zhǎng)度；Xuc表示X軸的刻度數(shù)；Bdis表示柱狀圖間距；Xbcpu表示X軸每一個(gè)刻度對(duì)應(yīng)的柱狀圖條數(shù)。

3　柱狀圖組件的實(shí)現(xiàn)

3.1顏色值轉(zhuǎn)換方法

為了方便用戶(hù)使用，用戶(hù)在設(shè)置顏色值時(shí)可以用形如“#AARRGGBB”或“#RRGGBB”的字符串表示。其中，’#’是一個(gè)標(biāo)志符；“AA”是兩位十六進(jìn)制字符，表示顏色的alpha分量；”RR”是兩位十六進(jìn)制字符，表示顏色的red分量；“GG”是兩位十六進(jìn)制字符，表示顏色的green分量；“BB”是兩位十六進(jìn)制字符，表示顏色的blue分量[3]。在繪制圖形時(shí)，Android代碼不支持這樣的表示形成，只支持用int類(lèi)型來(lái)表示顏色分量[4]。所以，需要一個(gè)方法把形如“#AARRGGBB”或“#RRGGBB”的字符串值轉(zhuǎn)換為四個(gè)int類(lèi)型的值。該方法的核心代碼如下：

3.2 onDraw方法的關(guān)鍵代碼

以下程序片段是重寫(xiě)onDraw方法的關(guān)鍵代碼，這一部分的作用是在繪制區(qū)繪制柱狀圖。

4　實(shí)驗(yàn)

我們選擇的實(shí)驗(yàn)環(huán)境為：操作系統(tǒng)為Android4.0，移動(dòng)終端的屏幕尺寸為4寸屏，分辨率為480×800，CPU為ARM（主頻為2.3GHz），內(nèi)存為2G。實(shí)驗(yàn)效果如圖2、圖3所示。柱狀圖組件的調(diào)用實(shí)驗(yàn)效果良好，布局整齊，響應(yīng)速度快，用戶(hù)體驗(yàn)好。下面的多選按鈕的文本顏色和對(duì)應(yīng)數(shù)據(jù)的柱狀圖顏色一致，如圖2所示，“2014年度”用的是紅色，對(duì)應(yīng)柱狀圖的顏色也紅色；“2015年度”用的是綠色，對(duì)應(yīng)柱狀圖的顏色也綠色；“2016年度”用的是藍(lán)色，對(duì)應(yīng)柱狀圖的顏色也藍(lán)色。該柱狀圖組件可以通過(guò)下面的多選按鈕選項(xiàng)的選擇來(lái)顯示相應(yīng)的柱狀圖。如圖3所示，“2016年度”的按鈕沒(méi)有被選中，在繪制區(qū)只顯示成選中狀態(tài)的“2014年度”和“2015年度”對(duì)應(yīng)的柱狀圖。

圖2　實(shí)驗(yàn)效果圖一

圖3　實(shí)驗(yàn)效果圖二

5　結(jié)語(yǔ)

本文從現(xiàn)有技術(shù)的角度出發(fā)，提出一種靈活的、自定義的柱狀圖組件的設(shè)計(jì)實(shí)現(xiàn)方法，經(jīng)過(guò)實(shí)驗(yàn)測(cè)試，效果良好，布局整齊，響應(yīng)速度快。雖然能滿(mǎn)足很多移動(dòng)應(yīng)用開(kāi)發(fā)者的需要，但還是存在一些缺點(diǎn)，該柱狀圖組件還沒(méi)有實(shí)現(xiàn)簇狀和堆積的效果，在以后的研究工作中，我們將在這些方面做深入研究。

[1]馬崇華,方嬌莉.信息處理技術(shù)基礎(chǔ)教程[M].北京：清華大學(xué)出版社，2009.7.

[2]左軍.Android程序設(shè)計(jì)經(jīng)典教程[M].北京：清華大學(xué)出版社，2015.4.

[3]王鵬杰,霍建同.Android高級(jí)編程[M].北京：清華大學(xué)出版社，2010.6.

[4]李剛.瘋狂Android講義（第2版）[M].北京：電子工業(yè)出版社，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

云南省教育廳科學(xué)研究基金項(xiàng)目（No.2015Y523）

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

高毅（1980-），男，云南宣威人，碩士，講師，研究方向?yàn)槌绦蛟O(shè)計(jì)方法、編譯技術(shù)

楊克光（1977-），男，云南臨滄人，碩士，講師，研究方向?yàn)閿?shù)據(jù)庫(kù)技術(shù)、信息系統(tǒng)

王昕（1975-），男，云南昆明人，碩士，講師，研究方向?yàn)橥ㄐ排c信息系統(tǒng)、網(wǎng)絡(luò)管理

2016-03-22

2016-05-16