Android平臺下折線圖組件的研究和實現

高毅，王昕，楊克光

（云南師范大學文理學院，昆明　650222）

?

Android平臺下折線圖組件的研究和實現

高毅，王昕，楊克光

（云南師范大學文理學院，昆明650222）

摘要：

關鍵詞：

0　引言

隨著移動互聯網技術的飛速發展和人類生活需求的多樣化，移動應用數量越來越多，種類也越來越豐富，其中，很多應用都和折線圖組件有著密切的關系?，F有的Android平臺沒有提供折線圖組件，雖然可以從第三方獲取到，但都存在一些不足，如：使用復雜、不夠靈活、效果呆板等。這給相關的移動應用開發帶來了不便，成為項目實施的瓶頸。

為此，本文結合類重寫、Canvas、Paint等技術，提出一種靈活的、可定制的折線圖組件的設計及實現方法。實現的折線圖組件易使用，效率高。

1　相關技術

1.1View類［1］

雖然Android提供了很多繼承了View類的UI組件，但是在實際開發時，還會出現不足以滿足程序需要的情況。用戶可以通過繼承View來派生自定義組件。首先定義一個繼承View的子類，然后重寫View類的一個或者多個方法。

1.2Canvas類［1］

Canvas類就是表示一塊畫布，你可以在上面畫你想畫的東西。當然，你還可以設置畫布的屬性，如畫布的顏色/尺寸等。Canvas類可以用來實現各種圖形的繪制工作。

1.3Paint類［2］

要繪制圖形，首先得調整畫筆，按照自己的開發需要設置畫筆的相關屬性。Android中的畫筆是Paint類，Paint中包含了很多方法對其屬性進行設置。

2　折線圖組件設計與實現

2.1折線圖的實體類

實體類是用于對必須存儲的信息和相關行為建模的類。實體對象（實體類的實例）用于保存和更新一些現象的有關信息。

（1）折線圖實體類的主要屬性

（2）折線圖實體類的主要方法

①折線圖實體類有兩個構造方法，一個是沒有參數的，一個是有參數的。其中，沒有參數的構造方法主要是用來實現折線圖實體類屬性的默認值設置。

②實體類所有屬性的get方法和set方法。為了折線圖實體類的封裝性和安全性，實體類的屬性設置為私有的，對每一個屬性設置公有的get方法和set方法，對象通過這兩個方法就可以實現對屬性的讀寫［3］。

2.2折線圖的繪制類

（1）折線圖的空間布局設計

折線圖組件的空間布局分為折線圖標題區、Y軸區、X軸區、折線繪制區、多選按鈕區五個區域。設計如圖1所示。

折線圖標題區用來繪制折線圖的標題，Y軸區用來繪制Y軸的線條、Y軸的刻度、Y軸的單位，X軸區用來繪制X軸的線條、X軸的刻度、X軸的單位，折線繪制區用來繪制折線，多選按鈕區用來顯示多選按鈕，本文設計的折線圖組件支持多條折線的繪制，可以根據多選按鈕的選擇狀態來控制折線的顯示。

圖1　布局設計圖

（2）重寫View類的onDraw方法

①相關的計算公式

在繪制Y軸和X軸時，不光要考慮軸的線條和刻度，還要考慮單位的繪制，單位是文本類型，要占一定的布局空間，并要和相關的刻度對齊。所以，要計算Y軸左邊距、Y軸最大刻度值，Y軸最小刻度值、Y軸刻度數目、X軸下邊距等。它們的計算公式如下所示。

其中，Ym表示Y軸左邊距，Yts表示Y軸單位字體大小（單位：sp），Yfs表示Y軸單位字體伸縮度，可以通過獲取context.getResources（）.getDisplayMetrics（）.scaled-Density屬性值得到，Ymvtl表示初始化Y軸的數據序列值中的最大值所占的字符個數，Ymaxu表示Y軸最大刻度值，Ymuih表示初始化Y軸的數據序列值中的最大值的整數部分最高位的值，Ymvic表示初始化Y軸的數據序列值中的最大值的整數部分位數，Ymaxu表示Y軸最小刻度值，Ymvin表示初始化Y軸的數據序列值中的最小值的第n位整數的值（n為Ymvic-1），Yuc表示Y軸刻度數目，Ymaxu表示Y軸最大刻度值，Yminu表示Y軸最小刻度值，Xm表示X軸左邊距，Xts表示X軸單位字體大?。▎挝唬簊p），Xfs表示X軸單位字體伸縮度，可以通過獲取context.getResources（）.getDisplayMetrics（）.scaled-Density屬性值得到。

（2）onDraw方法的核心代碼

以下程序片段是重寫onDraw方法的核心代碼，這一部分的作用是在折線繪制區繪制折線。先是把數據對應的點繪制出來，再在相鄰的點之間繪制線條。

3　實驗

我們選擇搭載Android4.0操作系統的移動終端作為實驗環境，移動終端的屏幕尺寸為4寸屏，分辨率為480×800，CPU為ARM（主頻為2.3GHz），內存為2G。實驗效果如圖2、圖3所示。折線圖組件的調用實驗效果良好，布局整齊，響應速度快，用戶體驗好。下面的多選按鈕的文本顏色和對應數據的折線顏色一致，如圖2所示，“2014年度”用的是綠色，對應折線的顏色也為綠色；“2015年度”用的是紅色，對應折線的顏色也為紅色；“2016年度”用的是藍色，對應折線的顏色也為藍色。該折線圖組件可以通過下面的多選按鈕選項的選擇來顯示相應的折線圖，如圖3所示，“2014年度”的按鈕沒有被選中，在折線繪制區只顯示成選中狀態的“2015年度”和“2016年度”對應的折線。

4　結語

本文從現有技術出發，提出一種靈活的、可定制的折線圖組件的設計及實現方法，實驗效果良好，布局整齊，響應速度快，用戶體驗好。雖然能滿足很多移動應用開發者的需要，但還是存在一些缺點，該折線圖組件屬于靜態而不是動態，就會有些應用領域的需求得不到滿足，例如動態心電圖的顯示等。未來，我們將在這一方面做進一步研究。

圖2　實驗效果圖一

圖3　實驗效果圖二

參考文獻：

［1］左軍. Android程序設計經典教程［M］.北京：清華大學出版社，2015，4.

［2］王鵬杰，霍建同. Android高級編程［M］.北京：清華大學出版社，2010，6.

［3］李剛.瘋狂Android講義（第2版）［M］.北京：電子工業出版社，2013，4.

Research and Implementation of the Line Chart Component in the Android Platform

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

Abstract：

Keywords：

折線圖是一種很好的統計工具，在很多應用軟件中都得到大量的使用。但在Android平臺下，并沒有提供折線圖組件。結合現有技術，提出一種基于Android平臺的折線圖組件的設計及實現方法。實驗效果良好，這對移動應用的開發有很好的意義。

Android平臺；折線圖；組件；類重寫

基金項目：

云南省教育廳科學研究基金項目（No.2015Y523）

文章編號：1007-1423（2016）13-0069-04

DOI：10.3969/j.issn.1007-1423.2016.13.018

作者簡介：

高毅（1980-），男，云南宣威人，碩士研究生，講師，研究方向為程序設計方法、編譯技術

王昕（1975-），男，云南昆明人，碩士研究生，講師，研究方向為通信與信息系統、網絡管理

楊克光（1977-），男，云南臨滄人，碩士研究生，講師，研究方向為數據庫技術、信息系統

收稿日期：2016-03-22修稿日期：2016-04-25

The line chart is a kind of very good statistical tools，in many applications have been a lot of use. But，it does not provide a line chart component in the Android platform. Combining with the existing technology，comes up a line chart component for design and implementation method based on the Android platform. The experimental effect is good，this is a very meaningful for the development of mobile applications.

Android Platform；Line Chart；Component；Overridden By A Class