Android學習系列(9)--App列表之分組ListView

吸引使用者的眼球，是我們至死不渝的追求；
      第一時間呈現最有價值的資訊，簡明大方，告訴客戶，你的選擇是多麼的明智，這正是你尋覓已久的東西。
      分組的應用場合還是很多的，有資料集合的地方往往要分組顯示；
      分組的形式也很多，最常見的就是鑲嵌在列表中，網上說的很多ExpandListView的也是一種。
      Android內建的通訊錄中的連絡人是按照拼音首字母(A,B,C,D......)分組分類的，效果如下：

      我們今天也是要實現這樣類似的一個效果。
1.樣本資料:
      為了突出重點，直擊要點，這裡提供一個整理好的資料樣本：
01
//list:資料集合
02
private List<String> list = new ArrayList<String>();
03
//listTag:Tag集合，其中Tag是分類的分割標籤，每個分組的header
04
private List<String> listTag = new ArrayList<String>();
05
 
06
public void setData(){
07
        list.add("A");
08
        listTag.add("A");
09
        for(int i=0;i<3;i++){
10
            list.add("阿凡達"+i);
11
        }
12
        list.add("B");
13
        listTag.add("B");
14
        for(int i=0;i<3;i++){
15
            list.add("位元風暴"+i);
16
        }
17
        list.add("C");
18
        listTag.add("C");
19
        for(int i=0;i<30;i++){
20
            list.add("查理風雲"+i);
21
        }
22
}
2.Activity布局準備：
      放置一個listView來呈現資料。
      group_list_activity.xml：
01
<?xml version="1.0" encoding="utf-8"?>
02
    android:orientation="vertical"
03
    android:layout_width="fill_parent"
04
    android:layout_height="fill_parent"
05
    >
06
    <!--簡單的列表顯示-->
07
    <ListView android:id="@+id/group_list"
08
       android:layout_width="fill_parent"
09
       android:layout_height="fill_parent"
10
       android:cacheColorHint="#00000000"/>
11
</LinearLayout>
3.自訂Adapter（本文繼承ArrayAdapter）：
     這個是本文的重點和核心。
     Adapter介面為資料和介面搭建了一個訪問的橋樑，最重要的就是getView()方法，用這個方法我們可以實現一定程度的介面自訂。
     ArrayAdapter間接實現了Adapter介面，這裡我們簡單起見，資料來源只是提供單一的String數組。
01
private static class GroupListAdapter extends ArrayAdapter<String>{
02
    //存放標籤的列表，用來判斷資料項目的類型
03
    //如果資料項目在標籤列表中，則是標籤項，否則是資料項目
04
    private List<String> listTag = null;
05
    public GroupListAdapter(Context context, List<String> objects, List<String> tags) {
06
        super(context, 0, objects);
07
        this.listTag = tags;
08
    }
09
    
10
    @Override
11
    public View getView(int position, View convertView, ViewGroup parent) {
12
        ... ....
13
    }
14
}
     我們來看看getView方法：
1
//該方法根據adapter的順序一行一行的組織列表
2
//其中position表示第幾行，也就是當前行在adapter的位置，
3
//convertView表示第幾行的View
4
View getView(int position, View convertView, ViewGroup parent);
     現在我們就是要重寫getView方法，來實現列表中嵌入分組標籤。
     分組標籤也是列表資料項目之一，也是被一行一行的畫上去的，但是它和其他資料項目UI是不一致的，所以我們需要準備2套資料項目布局模板：
     資料項目模板group_list_item.xml:
01
<?xml version="1.0" encoding="utf-8"?>
02
    android:orientation="horizontal"
03
    android:layout_width="fill_parent"
04
    android:layout_height="wrap_content"
05
    android:padding="5dip">
06
    <!-- 圖片和文字 -->
07
    <!-- 隨便放了一張圖片，稍微美化一下 -->
08
    <ImageView
09
       android:src="@drawable/list_icon"
10
       android:layout_width="wrap_content"
11
       android:layout_height="wrap_content"/>
12
    <TextView
13
       android:id="@+id/group_list_item_text"
14
       android:layout_width="wrap_content"
15
       android:layout_height="fill_parent"
16
       android:paddingLeft="5dip"
17
       android:gravity="center_vertical"/>
18
</LinearLayout>
    標籤項目範本group_list_item_tag.xml:
01
<!-- 只有文字，但是高度小店，背景色設定為555555灰色 -->
02
<?xml version="1.0" encoding="utf-8"?>
03
    android:layout_width="fill_parent"
04
    android:layout_height="wrap_content"
05
    android:background="#555555"
06
    android:paddingLeft="10dip">
07
    <TextView
08
       android:id="@+id/group_list_item_text"
09
       android:layout_width="wrap_content"
10
       android:layout_height="20dip"
11
       android:textColor="#ffffff"
12
       android:gravity="center_vertical"/>
13
</LinearLayout>
好，我們現在把這兩個模板應用到getView方法中去：
01
@Override
02
public View getView(int position, View convertView, ViewGroup parent) {
03
    View view = convertView;
04
    //根據標籤類型載入不通的布局模板
05
    if(listTag.contains(getItem(position))){
06
        //如果是標籤項
07
        view = LayoutInflater.from(getContext()).inflate(R.layout.group_list_item_tag, null);
08
    }else{            
09
        //否則就是資料項目了    
10
        view = LayoutInflater.from(getContext()).inflate(R.layout.group_list_item, null);
11
    }
12
    //顯示名稱
13
    TextView textView = (TextView) view.findViewById(R.id.group_list_item_text);
14
    textView.setText