天天看點

Android開發中的AchartEngine及ListView

       在開發Android應用的過程中,常需要将資料庫中的資料進行可視化顯示,比較常用的顯示方式有兩種:圖和表。這裡将對圖形庫AchartEngine以及清單視圖ListView進行說明,以期對您的項目有所幫助。

        一、AchartEngine的原理

就我的使用體會來講,AchartEngine是将資料與圖像分離,分别用XYMultipleSeriesDataset與XYMultipleSeriesRenderer來進行封裝。XYMultipleSeriesDataset中可以添加各種類型的Series(如RangeCategorySeries,XYSeries等),而XYMultipleSeriesRenderer可以添加各種SeriesRenderer(如SimpleSeriesRenderer,XYSeriesRenderer等),然後通過AchartEngine的工廠類得到相應的圖形View或者Intent。

         這裡舉一例進行說明,先給出一張截圖如下:

Android開發中的AchartEngine及ListView

上圖是兩種圖形的疊加,即SimpleSeriesRenderer與XYSeriesRenderer。SimpleSeriesRenderer負責三個柱線圖的顯示,XYSeriesRenderer負責折線圖的顯示。

首先,擷取兩類圖形的資料。柱線圖要表示出最大值與最小值,用數組來表示。

// range graph
double[] minValues = new double[LabelsGraphWhichDays.size()];
double[] maxValues = new double[LabelsGraphWhichDays.size()];
           

當然,minValues的值一般來自資料庫SQLite,這裡需要對資料庫進行讀取(資料庫檔案、表的設立需要根據使用情況靈活對待,這裡不重點講述資料庫了),讀取方式不再贅述。由圖形即可推測,上述數組長度為3,minValues的資料分别為3.1,6.1,13.8,maxValues的值類似。

得到柱線圖的資料之後,需要擷取折線圖的資料,折線圖的資料包含x軸坐标和y軸坐标。

double[] xData = new double[xList.size()];
double[] yData = new double[yList.size()];
           

其中,xData分别為1,2,3,yData分别為3.1, 12.5,13.8。

得到資料以後,将資料添加到相應的Series。

RangeCategorySeries series0 = new RangeCategorySeries("Title");
int length = minValues.length;
for (int k = 0; k < length; k++) {
BigDecimal min = new BigDecimal(minValues[k]); 
BigDecimal max = new BigDecimal(maxValues[k]);
double minValue = min.setScale(1, BigDecimal.ROUND_HALF_UP).doubleValue();
double maxValue = max.setScale(1, BigDecimal.ROUND_HALF_UP).doubleValue();
//RangeCategorySeries
series0.add(minValue, maxValue);
}
           
XYSeries series1 = new XYSeries("Title");
for(int i = 0; i<xData.length; i++)
{
     //series1
     series1.add(xHungryData[i],yHungryData[i]);
}
           

得到兩個含有資料的Series後,隻需要将兩個Series分别添加至XYMultipleSeriesDataset即可。

XYMultipleSeriesDataset multipleSeriesDataset = new XYMultipleSeriesDataset();
// addSeries
multipleSeriesDataset.addSeries(0, series1);
multipleSeriesDataset.addSeries(0, series0.toXYSeries());
           

然後,設定相應的SeriesRenderer,即圖形顯示。

與上述設定資料的步驟類似,設定圖形也需要從SeriesRenderer開始。對于柱線圖的RangeCategorySeries,采用SimpleSeriesRenderer來顯示,而對于XYSeries,也就用XYSeriesRenderer來顯示。

// SeriesRenderer Range
SimpleSeriesRenderer renderer0 = new SimpleSeriesRenderer();
renderer0.setDisplayChartValues(true);
renderer0.setChartValuesTextSize(16);
renderer0.setChartValuesSpacing(3);
renderer0.setChartValuesTextAlign(Align.CENTER);
renderer0.setColor(Color.rgb(0, 220, 173));
renderer0.setGradientEnabled(false);
// SeriesRenderer XY
XYSeriesRenderer renderer1 = new XYSeriesRenderer();
renderer1.setColor(Color.rgb(255, 7, 87));
renderer1.setDisplayChartValues(false);
renderer1.setLineWidth(2);
// addSeriesRenderer
multipleSeriesRenderer.addSeriesRenderer(0, renderer1);
multipleSeriesRenderer.addSeriesRenderer(0, renderer0);
           

對于上述圖形,還需要對multipleSeriesRenderer進行一些設定,這裡不再詳細說明。

最後,隻需一步,即可完成。即通過工廠類獲得相應的圖形View。

String[] types = new String[] {RangeBarChart.TYPE, LineChart.TYPE};// 
displayView = ChartFactory.getCombinedXYChartView(getActivity(), multipleSeriesDataset, multipleSeriesRenderer, types);
           

擷取displayView後,就可以将其在Layout中進行顯示,得到上述圖形。

細心的朋友會發現這裡還有對X軸标簽的設定。在對标簽設定時,需要首先将原始的标簽屏蔽掉。

//set X label
multipleSeriesRenderer.setXLabels(0);
multipleSeriesRenderer.setXLabelsColor(Color.BLACK);
           

然後添加自定義的标簽。

for(int i = 0; i < LabelsGraphWhichDays.size(); i++)
{
     multipleSeriesRenderer.addXTextLabel(i+1, xDateLabel[i] + "\n" + xTimesLabel[i]);
}
           

好啦,大功告成。

二、ListView解析

在需要以清單顯示大量資訊時,ListView應該是一個很常用的View。ListView屬于AdapterView,即在使用ListView時,需要為ListView配置一個Adapter。Adapter常見的實作類有ArrayAdapter,SimpleAdapter,SimpleCursorAdapter,BaseAdapter。ArrayAdapter屬于簡單、易用的Adapter,通常用于将數組或者List集合的多個值包裝成清單項;SimpleAdapter功能非常強大,可用于将List集合的多個對象包裝成多個清單項;SimpleCursorAdapter與SimpleAdapter不同的是,它用于包裝Cursor提供的資料;BaseAdapter通常用于被擴充,擴充BaseAdapter可以對清單項進行最大限度的定制。

這裡重點說明SimpleAdapter以及BaseAdapter。

SimpleAdapter可以将清單的每一項都采用一個布局檔案來顯示,是以,清單項的顯示就可以很豐富(因為可以自定義顯示内容以及布局)。SimpleAdapter的教程較多,這裡不詳細說明,隻針對SimpleAdapter的建立進行闡述。

SimpleAdapter simpleAdapter = new SimpleAdapter(this, listItems, R.layout.simple_item, 
new String[]{"Name", "ID", "Gender"},
new int[]{R.id.name, R.id.id, R.id.gender});
           

this是指代上下文,即Context,可能在某些應用中,這些需要用到getActivity()。listItems是一個重點參數,包含該Adapter的資料來源。它的格式應該是List<? extends Map<String, ?>>,該集合中每個Map<String, ?>對象将生産一個清單。R.layout.simple_item指定一個布局界面的ID,即用于在ListView中的每個Item的顯示的布局,此布局根據自定義而實作SimpleAdapter的豐富顯示。後兩個數組中,String數組決定提取Map<String, ?>對象中哪些key對應的value值來生産清單項。int數組就是布局界面上元件的ID,決定哪些元件被填充。

建立此SimpleAdapter之後,将此Adapter應用某個ListView即可。

可能,你已經覺得SimpleAdapter已經足夠強大,可以實作豐富的顯示,但是,在很多對清單有個性化要求的場合,比如需要根據需要對不同的清單項進行顔色區分,SimpleAdapter依然顯得不夠用,這時,你就需要考慮擴充BaseAdapter了,好吧,重點來了。請先看下圖:

Android開發中的AchartEngine及ListView

如果某一天,你突然被要求實作上圖中的效果,你會打算怎麼實作呢?(請忽略圖中的上部分的圖形Title,隻關注中間的資料清單)。說明一下,上述資料清單首先根據左側的時間進行分欄,不同天之間用不同 顔色背景區分(比如這裡18/04的背景顔色是Color.argb(100, 226, 215, 247),19/04的背景顔色是Color.argb(100, 243, 241, 250)),其次,在18/04的顯示中,第四欄的背景顔色為Color.argb(100, 0xff, 00 , 00)。

好啦,說說實作方案吧,這裡采用了兩層擴充的BaseAdapter,外層BaseAdapter負責每一天的所有顯示,即上圖中的外層BaseAdapter的getCount()将傳回2,分别為18/04和19/04。外層BaseAdapter的getView()方法傳回的View的布局包括左側的文本TextView(顯示18/04)和右側的ListView,這裡即是ListView的嵌套。内層BaseAdapter的getCount()方法将根據每天的資料多少來決定,在上圖中18/04為4,19/04為1。其getView()方法将傳回每一行的從時間到最後的所有資訊。其中的紅色背景的那一行則根據對本行顯示的資料的判斷來決定。

具體實作時,首先擷取外層ListView,設定其Adapter為adapterForListOuter。

LinearLayout history_data_list_layout = (LinearLayout) getActivity().getLayoutInflater().inflate(R.layout.history_data_list, null);
ListView history_data_list = (ListView) history_data_list_layout.findViewById(R.id.myList);
history_data_list.setAdapter(adapterForListOuter);
           

在adapterForListOuter的getView()方法中,擷取内層ListView,并為其設定adapterForListInner。

ListView history_data_list_content = (ListView) history_data_list_outer.findViewById(R.id.history_data_list_content);
// Set the data display
TextView history_data_list_date = (TextView) history_data_list_outer.findViewById(R.id.history_data_list_date);
history_data_list_date.setText(history_data_list_date_display[position]);
// Update outer position
history_data_list_content.setAdapter(adapterForListInner);
           

在adapterForListInner的getView()方法中,首先擷取顯示資訊的行的布局。

if (convertView == null) {
history_data_list_inner = getActivity().getLayoutInflater().inflate(R.layout.history_data_list_cell, parent, false);
} else {
	history_data_list_inner = convertView;
}
           

然後,對每一行的資料以及顯示背景進行設定就可以了。

三、兩個其他的問題。

在實作過程中,遇到兩個其他的問題,這裡指出,供交流。

第一:ListView中每一項的高度問題。在進行内層List顯示時,出現過隻能顯示一行的情況,即上述18/04本來有四行,結果隻能顯示第一行,經調試,發現原因在于外層List的每一清單項的高度設定。這裡需要根據顯示的内容對其進行最小高度的設定。

stackoverflow上面有對此問題的描述,具體分析可搜尋stackoverflow。

第二:在進行圖形及清單的繪制時,經常需要用到參數的傳遞。在傳遞過程中,可能會出現一種情況如下:

ObjectA objectA = new ObjectA();
ObjectB objectB = new ObjectB();
objectB.add(objectA);
objectA.clear();
           

objectA傳遞給objectB的隻是對對象ObejectA的一個引用(reference),将objectA清除掉以後,objectB中持有的對ObejectA的引用也随之清除,并不能達到将objectA的内容(value)傳遞給objectB。(這個問題是Java中基本的對象、引用、參數傳遞的問題,可在開發過程中卻常犯的一個錯誤)不過對于基本資料類型,則不存在此問題。如int a = 1; int b =2; a = b; 之後即使将b clear, a 的值依然為2,因為這裡不存在引用的問題(Integer則與此不同)。

很多時候,浮躁源于我們的眼睛看外界太多,看内心太少。