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