Android學習系列(9)–App列表之分組ListView – Android移動開發技術文章_手機開發 Android移動開發教學課程

吸引用戶的眼球,是我們至死不渝的追求;
      第一時間呈現最有價值的信息,簡明大方,告訴客戶,你的選擇是多麼的明智,這正是你尋覓已久的東西。
      分組的應用場合還是很多的,有數據集合的地方往往要分組顯示;
      分組的形式也很多,最常見的就是鑲嵌在列表中,網上說的很多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

You May Also Like