基于Android的自定義通用可視化控件①

鄭秋梅, 劉 真, 蘇 政, 李 松

?

基于Android的自定義通用可視化控件①

鄭秋梅, 劉 真, 蘇 政, 李 松

(中國石油大學(華東) 計算機與通信工程學院, 青島 266580)

基于存在Android系統控件不能完全滿足開發人員需求的情況, 提出一種自定義通用可視化控件, 介紹了基于Android開發的UI設計原理和圖表的實現方法, 著重討論了該自定義控件中使用的AsyncTask異步任務機制. 控件包括圓形圖、柱狀圖和折線圖三個圖表, 其中圓形圖可以動態地顯示. 應用實驗表明, 該控件修改簡單, 使用方便, 具有較強的通用性.

Android; 自定義; 控件; 異步; 通用性

在進行Android應用系統開發時, 經常需要使用各種系統控件來設計UI(用戶界面). Android系統本身提供了許多控件, 經常用到的有: 文本框(TextView)與編輯框(EditText)、按鈕(Button)與圖片按鈕(ImageButton)、單項選擇(RadioGroup)與復選框(CheckBox)、圖片視圖(ImageView)、狀態開關按鈕(ToggleButton)和時鐘(AnalogClock和DigitalClock)等. 此外, 還可以使用一些高級控件, 如下拉列表(Spinner)、進度條(ProgressBar)和滾動視圖(ScrollView)等[1]. 大多數情況下這些Android系統控件可以滿足應用開發的需求, 但仍然存在現有控件不能完全實現系統功能的問題. 例如有時系統需要設計圖表控件來顯示數據, Web開發中有比較多的開源方案, 圖表繪制相對較容易. 但在Android系統中的開源方案并不多, 因此需要開發者從現有的控件派生或重寫控件屬性、方法或事件來創建自定義控件, 實現用戶的特殊需求.

自定義控件是一項十分靈活的新興技術, 具有可編程性和可復用性. 該技術對外部環境開放且能被各種環境使用, 正被越來越多的應用程序開發者所關注. 鑒于自定義控件的靈活性以及應用程序支持插入控件這個功能[2-5], 本文通過設計一個基于Android的自定義通用控件, 實現了統計數據的可視化展示. 該控件由圓形圖、柱狀圖和折線圖三個圖表組成, 通過自定義View層和設置Paint、Canvas等類的屬性實現它們的繪制, 并采用AsyncTask異步任務機制重寫其中關鍵方法, 實現后臺任務初始化、調用webservice接口和將后臺任務結果更新到UI等功能. 本文自定義控件的通用性體現在: 一是可通過更改輸入數據來實現類似的統計可視化問題, 二是可增加或修改繪制圖表的類, 實現任意圖表的顯示. 該控件已應用于開發完成的手機端數字校園系統中, 實現用戶對校園一卡通消費統計的查詢功能.

1　關鍵技術介紹

1.1 View層介紹

在開發一款手機應用軟件時, UI設計是其中至關重要的部分. 好的用戶界面能夠激發用戶的興趣, 給其帶來優越的用戶體驗. Android系統借助了Java的UI設計思想, 包括事件響應機制和布局管理, 給開發人員提供了諸如菜單、對話框、按鈕和進度條等豐富的可視化用戶界面. 這使得開發者能夠為廣大的Android用戶設計出非常人性化、極具親切感的界面[6].

View是Android系統中圖形界面的基類, 提供給用戶可視化的界面. View又分為兩個子類, 即View和ViewGroup. 其中View包含一些基本組件, 例如菜單、按鈕、列表等, 一個View對應界面上的一個矩形區域, 它負責該區域的屬性設置和事件處理等. 而ViewGroup則可以看成是容納View的一個容器, 負責裝載和管理界面上的各種View來排列布局. Android的用戶界面都是由View和ViewGroup以及它們的派生類組合而成的, 因此UI可以用View的樹形結構來表示, 如圖1所示.

圖1　Android用戶界面樹形結構圖

對于本文設計的自定義控件, 圖表的可視化是其最終目的, 因此自定義View層并為其增加屬性是重要任務.

1.2 繪制圖形

本文討論的問題中, 需要將數據的統計結果以圖表的方式進行清晰直觀的可視化展示, 因此需要繪制圖形. Android的graphics包提供了很多操作二維圖形的類, 可以利用這些類來實現繪圖功能. 在本控件中, 為圓形圖、柱狀圖和折線圖分別定義了ICardConsume Arc、ICardConsumeColume和ICardConsumeLine三個繼承自View的類來實現各自的繪圖功能, 其中主要用到的工具類有Paint、Canvas和Path.

① Paint: 要實現繪圖功能, 首先需要畫筆工具, Paint類便是Android的畫筆. 它包含了繪制幾何圖形、文本和位圖所需的一些風格和顏色信息, 如線寬、字體和大小等. 通過Paint類提供給用戶的公共方法, 可以對其屬性進行設置[6].

② Canvas: 各類圖形是要在一張畫布上繪制的, Canvas類則實現了畫布這一功能. 在繪制圖形之前, 需要對Canvas設置一些畫布的屬性, 如畫布的顏色、尺寸等[6].

③ Path: 在進行畫線等操作時還需要連接路徑, 這個工具由Path提供[6,7], Path類中包含一些直線或曲線連接到指定點的方法. 該自定義控件中的折線圖則使用Path類進行直線的連接.

合理利用這些工具類, 則可以在手機界面設計并繪制開發人員需要的各種可視化圖形.

1.3 AsyncTask異步任務機制

由于本文設計的自定義控件包含圓形圖、柱狀圖和折線圖三個圖表, 且跳轉到該功能Activity時, 三個圖表的后臺任務是并發執行的, 因此涉及多線程異步任務處理問題.

在Android中實現異步任務機制有Handler和AsyncTask兩種方式. 前者需要為每一個任務創建一個新的線程, 任務完成后通過Handler實例向UI線程發送消息, 完成界面的更新. 這種方式對于整個過程的控制比較精細, 可以處理較為復雜的線程間通信及消息處理, 但也存在缺點, 例如代碼相對臃腫, 在多個任務同時執行時, 不易對線程進行精確的控制等. AsyncTask是Android提供的一個輕量級的基于多線程的進行后臺異步工作處理的類, 在后臺的工作比較簡單, 只需要向UI線程傳遞一些簡單數據, 不再需要編寫任務線程和Handler實例, 只使用AsyncTask類即可[8]. 使用AsyncTask類的方法是創建一個子類, 重寫該類中的相關方法, 通過在UI線程中調用execute()方法運行這個自定義類.

使用AsyncTask類時, 要重寫它的子類. 需要重寫的方法如下:

① onPreExecute(): 當后臺任務的execute()方法被調用后, 該方法立即執行, 一般用于一些初始化操作和在界面上顯示后臺任務的初始狀態.

② doInBackground(Params…): 當onPreExecute()方法被調用后, 該方法被執行, 用于執行一些較為費時的后臺任務. 在任務執行過程中可以調用publishProgress(Progress…)方法來更新程序界面.

③onProgressUpdate(Progress…): 在調用publishProgress(Progress…)方法后, 該方法被執行用來將進度信息更新到UI上.

④ onPostExecute(Result): 當后臺任務全部執行結束后, 該方法被調用, 用來將計算結果更新顯示到用戶界面[9].

上述方法包含3類參數. Params表示后臺任務執行時傳入參數的類型; Progress表示后臺任務執行的進度; Result表示后臺任務執行結束后返回計算結果的類型. 在本文自定義控件的圖表中都要重寫上述4個方法.

2　通用控件設計實現及展示

在目前比較流行的掌上數字校園應用中, 針對一卡通消費問題, 學生們除了希望可以查詢每次消費的相關明細外, 還經常關心自己一個月之內總的消費金額、分類消費金額和每日消費金額等. 下面具體介紹該控件的設計和實現過程.

2.1 界面布局

ViewGroup類是View類的子類, 是所有組件的容器, 界面的布局管理器作為ViewGroup的子類, 負責控制Android中各個組件的大小、間距和對齊方式等[10]. 本文的自定義控件用來統計近一個月內的消費情況, 主要實現三個功能: 圓形圖顯示總消費金額, 柱狀圖顯示分類消費金額, 折線圖顯示每日消費金額. 界面布局如圖2所示.

圖2　界面布局設計

該界面還設計了兩個HorizontalScrollView(橫向滾動條), 用于顯示完整的柱狀圖和折線圖. 柱狀圖用來顯示一個月的分類消費金額, 折線圖則顯示每日消費金額. 由于要顯示的內容較多, 一般的手機屏幕顯示不全, 因此使用HorizontalScrollView實現水平方向的滑動來查看完整信息.

2.2 圖表設計

本文自定義控件涉及圓形圖、柱狀圖和折線圖三個圖表, 且各自元素不同, 因此定義了三個繪制圖表的類.

① 圓形圖: 定義ICardConsumeArc類來繪制. 與柱狀圖和折線圖的定義不同, 圓形圖的設計思路為: 跳轉到該界面時, 圓形圖內部為動態增長的近一個月的消費金額總數, 外部是動態增長的圓形弧線. 數字與圓弧的動態增長是同步的, 當圓形弧線封閉時, 數字增長結束, 最終顯示的數字即為近一個月一卡通的消費金額總數. 此功能涉及多線程問題, 因此定義了一個實現Runnable接口的thread類. 線程對象創建后, 需要通過調用線程的start()方法來啟動線程[11]. 在線程類中最關鍵的是重寫run()方法, 它包含了線程進入后臺任務執行狀態時要執行的代碼, 該控件的run()方法直接調用postInvalidate()刷新界面, 實現數字和圓形弧線同步動態增長. 該類還調用了一個自定義的方法init(param), 負責畫布和畫筆的初始化操作.

② 柱狀圖: 定義ICardConsumeColume類來繪制. 該部分通過調用后臺服務器的getFenleiConsume接口, 讀取webservice信息, 將一卡通消費記錄按不同的類別顯示到該界面. 后臺服務器中自定義的消費類別有水果店、超市、餐廳、開水房、圖書館等. ICardConsumeColume類中同樣包含設置畫筆屬性和動態布局的init(param)方法. 在onDraw(Canvas)方法中, 本文調用了兩個自定義方法drawRectf(Canvas)和drawName(Canvas), 前者用來繪制柱狀圖中的矩形柱, 后者顯示類別名. 在控件的實際運行過程中, 各類別矩形柱的背景顏色會在一定范圍內隨機變化, 這是因為該類定義了一個存儲背景顏色的數組, 其中包含7種用int類型標記的顏色, 在drawRectf(Canvas)方法中通過產生1-7之間的隨機數來顯示對應顏色.

③ 折線圖: 定義ICardConsumeLine類來繪制. 同理, 該部分調用服務器的getMonthConsume接口, 讀取并顯示近一個月的每日消費金額. 根據測試手機屏幕尺寸, 在init(param)方法中預先定義手機屏幕可顯示8天的記錄, 通過水平滑動顯示剩余記錄. 該類中onDraw(Canvas)調用了drawStraightLine(Canvas)和drawBrokenLine(Canvas)兩個方法, 分別用來繪制豎線和折線. 在繪制折線時, 還定義了Path類的對象, 用于連點成線.

2.3 主Activity的設計

在一卡通功能的Activity點擊相關圖標會跳轉到該自定義控件的主Activity, 將其命名為ICardGraphMainActivity. 在該java文件中, 本文為柱狀圖和折線圖的異步任務處理各自定義了AsyncTask的子類: ColumTask和LineTask, 由于圓形圖中顯示的總消費金額可從柱狀圖訪問的服務器接口獲得, 因此不再另外定義類來處理. 在這兩個子類中, 重寫了上文中提到的異步任務機制的4個方法. 由于項目前期已將后臺服務器搭建完畢, 本控件中需要的近一個月的分類消費記錄和每日消費記錄可直接調用服務器的getFenleiConsume和getMonthConsume接口, 讀取WebService信息[11-13]. 以柱狀圖為例, 在ICardGraphMainActivity類的onCreate方法中調用execute()以后, 便執行onPreExecute()方法; 緊接著doInBackground(Params)執行, 該方法負責訪問服務器的getFenleiConsume接口讀取分類消費信息, 并調用publishProgress()更新程序界面; 隨后onProgressUpdate(Params)執行, 將進度信息更新到UI界面上; 最后調用onPostExecute(Result), 給計算結果賦值并顯示到用戶界面[14,15].

2.4 應用實例及效果展示

本文自定義的通用控件目前已應用于開發完成的數字校園手機端系統, 近一個月消費統計的最終展示效果如圖3.

(a) 隨機狀態1 ?? (b) 隨機狀態2 ?? (c) 隨機狀態3

圖3中最上方圓形圖的中心數字表示總消費金額, 外圍的白色圓環與中心數字同步動態增長, 數字增長結束時圓環閉合, (a)(b)(c)為隨機截取的三個狀態.

本文的自定義圖表控件給類似的統計問題提供了一個模板, 只要輸入的原始數據符合一定格式, 均可以使用該控件實現用戶的展示需求. 其中實現分類功能的柱狀圖的輸入數據需滿足格式:

實現每日消費的折線圖的輸入數據格式為:

除了校園一卡通的消費統計以外, 本文還通過自定義模擬數據, 實現了家電銷售統計和個人財務管理兩個類似的典型案例, 圖4展示了近一個月家電銷售情況, 圖5為近一個月個人生活支出情況.

3　通用控件效果評價

如上文的控件展示圖所示, 圓形圖的動態變化是本文自定義控件的一個亮點, 隨著中心數字和外圍曲線的同步增長, 師生對本月的總消費金額會有一個心理上的變化, 相比現有的大部分圖表控件的直接靜態顯示, 具有更優的用戶體驗. 若該控件應用在其他系統, ICardConsumeColume類中數組內的顏色范圍也可隨意設定, 本文設置了7種矩形柱顏色, 使得每次跳轉到該Activity時, 分類矩形柱的填充顏色都是不同的, 可視化效果比固定顏色設置的方式更加靈活.

盡管目前也有一些基于Android界面設計的自定義可視化控件開源案例, 相比部分相似案例[16,17], 本文提出的自定義控件從使用條件和可視化方式等方面都具有一定的創新性和新穎性, 對比如表1所示.

表1　本文控件與現有相似成果的對比評估

上表中的通用性指控件的適用條件, 本文的自定義控件包含圓形圖、柱狀圖和折線圖三種圖表, 若根據用戶需求想顯示任意其他種類的圖表, 只需添加或刪改繪制相應的圖表類, 并在ICardGraphMainActivity中重新調用即可. 而現有的類似成果中, 自定義控件一般對所屬系統的依賴性較強, 系統功能改變, 圖表控件需要作出較大的改動, 相比之下, 本文提出的自定義控件具有較強的通用性.

美觀性方面, 本文控件的背景顏色和填充顏色等均由參數控制, 可根據用戶需求修改設置成不同的皮膚使用, 三個圖表在同一個界面可全部顯示. 而在對比的控件中, 圖表不能完全占據手機屏幕, 且用色簡單, 本文控件布局相對更加合理, 具有較好的美觀性.

用戶體驗方面, 跳轉到該控件所在界面時, 用戶無需任何操作, 圓形圖自動動態增長, 柱狀圖顏色隨機顯示. 相對于部分已有控件來說, 該控件更容易掌握且靈活性強, 用戶體驗更佳.

4　結語

本文提出的基于Android的自定義通用可視化控件能解決各種類似的數據統計問題, 該控件在滿足一定格式要求的條件下, 只需要替換輸入數據, 即可實現圓形圖、柱狀圖、折線圖三類圖表的可視化展示; 控件通用性較強, 若需要展示其他任意類型圖表, 只需額外增加繪制該圖表的類或修改當前類, 并略加修改布局和主Activity即可; 該控件能夠實現圓形圖中心數字和外圍曲線的同步動態增長以及柱狀圖填充顏色的隨機顯示, 相比現有的部分圖表控件具有更好的用戶體驗效果, 但仍可進一步改進.

1 李維勇.Android UI設計.北京:機械工業出版社,2015.

2 曾健平,邵艷潔.Android系統架構及應用程序開發研究.微計算機信息,2011,27(9).

3 季玉茹,王德忠.基于安卓的音樂播放器設計.電腦知識與技術,2013,9(25):5641–5658.

4 徐虎,彭正濤,趙俊逸.基于WiFi的Android移動設備語音通信系統的設計開發.計算機應用與軟件,2012,29(11): 225–238.

5 黃藝鋒,閆巧.基于Android平臺電子詞典的設計與實現. 計算機應用,2011,31(2):228–232.

6 羅雷,韓建文,汪杰.Android系統應用開發實戰詳解.北京: 人民郵電出版社,2014.

7 李剛.瘋狂Android講義.北京:電子工業出版社,2011.

8 楊杰.基于Android的多線程處理技術.電腦知識與技術,2013,9(18):4251–4254.

9 李光明,孫英爽,黨小娟.基于安卓的遠程監控系統的設計與實現.計算機工程與設計,2016,37(2):556–561.

10 Ostrander J,劉文斌,譯.Android UI基礎教程:Develop& Design.北京:人民郵電出版社,2012.

11 巫志勇.Android開發中Web Service網絡編程研究.電腦知識與技術,2012,8(20):4904–4906.

12 羅國濤,裴廣.基于WebService和Android的C/S+B/S結構手機電影系統.計算機應用與軟件,2015,32(9):328–333.

13 倪凱,夏海波,魏建明,程嘉昇,李焱.一種移動終端遠程數據訪問控制方法.計算機應用與軟件,2012,29(6):230–232.

14 彭海文.Android Web Services應用研究.電腦知識與技術, 2011,7(12):2851–2852.

15 陳望挺,林滿足,陳健,章躍,傅奇佳,竺樂慶.基于JSP和Android的C/S結構問卷系統.計算機應用,2013,33(3): 886–889.

16 李雙麟.基于Android的智能供水控制系統的設計與實現[碩士學位論文].長春:吉林大學,2015.

17 秦建波,王巍,李冬晨.基于Android 的股市App的技術研究與實現.電腦知識與技術,2014,10(32):7653–7656.

Custom General Visual Component Based on Android

ZHENG Qiu-Mei, LIU Zhen, SU Zheng, LI Song

(College of Computer and Communication Engineering, China University of Petroleum, Qingdao 266580, China)

Since Android system components cannot fully meet the needs of developers, this paper proposes a custom general visual component, introduces the UI design principles based on Android and the realization methods of tables, and mainly discusses the asynchronous task mechanism used in the custom component. This component includes a circular diagram, a histogram and a line chart, and the circular diagram can display dynamically. Experimental results show that the component is simple and easy to use, and also has a strong commonality.

Android; custom; component; asynchronous; commonality

國家自然科學基金(51274232,61305008);中央高校基本科研業務費專項(14CX06008A);山東省自然科學基金(ZR2011FQ018)

2016-04-14;收到修改稿時間:2016-06-12

[10.15888/j.cnki.csa.005584]