http://123.103.97.242/article/show/331;jsessionid=C71DF9368842F30AB4F45CCCBA533AC2

絢麗的ListView表格效果的實現(xiàn)

OPhone平臺開發(fā), 2010-10-22 16:32:58

標簽 : 表格 ListView

　　簡介：
　　在業(yè)務(wù)系統(tǒng)中經(jīng)常會用到表格控件去顯示數(shù)據(jù)，但Android自帶的ListView控件本身無法實現(xiàn)一種較為美觀的表格效果，但我們可以通過其他的方式讓ListView表格變得更漂亮。讓我們一起來探討下。

　　我們先來看看以下兩幅圖：

　　圖（一）

　　圖（二）

　　很明顯，圖一比較簡潔，而圖二看上去明亮耀眼。從用戶體驗的角度來講，圖二界面效果明顯比圖一好，那邊框是怎么加進去的呢？
　　ListView的adapter我們使用了SimapleAdapter，從上圖可以看出ListView的每行包含了許多項，ListView的數(shù)據(jù)內(nèi)容我們可以通過構(gòu)建List以及設(shè)置每一項為一個map實現(xiàn)：

ArrayList<HashMap<String, String>> mylist = newArrayList<HashMap<String, String>>(); 　　HashMap<String, String> map1 = newHashMap<String, String>(); 　　map1.put("Num", "220503432"); 　　map1.put("Receive", "張三"); 　　map1.put("Payway", "貨到付款"); 　　map1.put("TotalPrice", "$98.30"); 　　map1.put("State", "已發(fā)貨"); 　　map1.put("Date", "2010-09-23"); 　　mylist.add(map1);

　　ListView相當(dāng)于一個顯示數(shù)據(jù)的容器，里面每一行都是一個訂單信息，這些行信息我們需要在另外一個XML文件里面定義，具體的表格邊框也是在這個XML文件里面實現(xiàn)。下面我們先介ListView中如何實現(xiàn)表格的豎線邊框。在Android里面，View是android線條的基礎(chǔ)，ListView里面的邊框就是用View實現(xiàn)的，ListView里面的內(nèi)容我們可以用一個xml文件裝載ListView的內(nèi)容，而TableLayout也是不存在邊框的，那么下面我們用View在xml文件里面畫邊框，以下是實現(xiàn)ListView邊框的核心代碼：

<TableLayoutandroid:id="@+id/a07_ls_rlo" 　　 android:layout_width="wrap_content" 　　xmlns:android="http://schemas./apk/res/android" 　　 android:layout_height="wrap_content"> 　　<TableRow> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkleft" 　　android:id="@+id/a07_ls_txtYF"/> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkright" 　　android:layout_width="80dip" 　　android:gravity="center" 　　android:id="@+id/a07_ls_txtXXSR"/> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkright" 　　android:layout_width="100dip" 　　android:gravity="center" 　　android:id="@+id/a07_ls_txtYNSE"/> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkright" 　　android:layout_width="80dip" 　　android:id="@+id/a07_ls_txtSNSE"/> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkleft" 　　android:layout_width="92dip" 　　android:gravity="center" 　　android:id="@+id/a07_ls_txtSBRQ"/> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkleft" 　　android:layout_width="92dip" 　　android:id="@+id/a07_ls_txtJNRQ"/> 　　<View style="@style/view2" /> 　　<TextView 　　style="@style/txtNolinkleft" 　　android:layout_width="80dip" 　　android:gravity="center" 　　android:id="@+id/a07_ls_txtSPDM"/> 　　<View style="@style/view2" /> 　　</TableRow> 　　</TableLayout>

　　數(shù)據(jù)源以及ListView每行的內(nèi)容都定義好后，就可以使用SimapleAdapter將ListView、數(shù)據(jù)內(nèi)容、每行的定義關(guān)聯(lián)起來，代碼如下：

SpecialAdapter mSchedule = new SpecialAdapter(this,mylist,R.layout.listview,new String[]{"Num","Receive","Payway","TotalPrice","State","Date"},newint[]{R.id.a07_ls_txtNum,R.id.a07_ls_txtReceive,R.id.a07_ls_txtPayway,R.id.a07_ls_txtTotalPrice,R.id.a07_ls_txtState,R.id.a07_ls_txtDate}; 　　list.setAdapter(mSchedule);

　　可能有人看到上面代碼中的SpecialAdapter會奇怪這是什么類？不是用SimpleAdapter么？下面會講解到SpecialAdapter是做什么用的。
　　在Android布局中，基本的5大布局方式是沒有邊框的，我們通過上面View的方式實現(xiàn)了邊框效果，而通常在做一些業(yè)務(wù)系統(tǒng)的時候客戶除了要求在數(shù)據(jù)列表頁面中能以表格的形式呈現(xiàn)數(shù)據(jù)外還要求能有選中行高亮、單雙行顏色交替等比較絢麗的效果，當(dāng)然這對于用戶體驗來說是很好的。下面將介紹這兩個效果的實現(xiàn)方式。

　　 我們先看一下選中行高亮的效果如圖（三）所示：

　　圖（三）

　　高亮效果通過設(shè)置背景圖來實現(xiàn)，實現(xiàn)的代碼如下：

ListView list=(ListView)this.findViewById(R.id.listview); 　　 Drawabledrawable = getResources().getDrawable(R.drawable.listview_hoverbg); 　　list.setSelector(drawable);

　　從圖（三）可看出該列表實現(xiàn)了單雙行顏色交替效果，其實現(xiàn)就和前面提到的SpecialAdapter有關(guān)，SpecialAdapter繼承了SimpleAdapter類，SpecialAdapter重寫了父類的getView方法，通過對參數(shù)position的判斷區(qū)分單雙行，通過對列表單元格每個view的背景色設(shè)置從而達到設(shè)置整行背景色的效果，代碼如下：

privateint[] colors = new int[] { 0x30FF0000, 0x300000FF }; 　　@Override 　　public View getView(int position, View convertView, ViewGroup parent) { 　　View view = super.getView(position, convertView, parent); 　　intcolorPos = position % colors.length; 　　if(colorPos==1)
　　  iew.setBackgroundColor(Color.argb(250, 255  255, 255));
　　else
　　  iew.setBackgroundColor(Color.argb(250, 224  243, 250));
　　return view;
　　}

　　SimpleAdapter是一個十分有用的類，不僅僅是數(shù)據(jù)源適配器，在里面可以取得或者設(shè)置每一行的許多信息，如可以獲取到每一行每個單元格的控件以及樣式等等，在開發(fā)絢麗的ListView表格方面是非常有用的和實用的一個類，具有很強的靈活性與擴展性。
　　以上是本人對ListView在表格表現(xiàn)方面的一些遇見，如有不正確的地方還望各位多指教。