吸引用户的眼球,是我们至死不渝的追求;
第一时间呈现最有价值的信息,简明大方,告诉客户,你的选择是多么的明智,这正是你寻觅已久的东西。
分组的应用场合还是很多的,有数据集合的地方往往要分组显示;
分组的形式也很多,最常见的就是镶嵌在列表中,网上说的很多ExpandListView的也是一种。
Android自带的通讯录中的联系人是按照拼音首字母(A,B,C,D......)分组分类的,效果如下:
我们今天也是要实现这样类似的一个效果。
1.样本数据:
为了突出重点,直击要点,这里提供一个整理好的数据样本:
02 | private List<String> list = new ArrayList<String>(); |
04 | private List<String> listTag = new ArrayList<String>(); |
19 | for ( int i= 0 ;i< 30 ;i++){ |
2.Activity布局准备:
放置一个listView来呈现数据。
group_list_activity.xml:
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
03 | android:orientation = "vertical" |
04 | android:layout_width = "fill_parent" |
05 | android:layout_height = "fill_parent" |
08 | < ListView android:id = "@+id/group_list" |
09 | android:layout_width = "fill_parent" |
10 | android:layout_height = "fill_parent" |
11 | android:cacheColorHint = "#00000000" /> |
3.自定义Adapter(本文继承ArrayAdapter):
这个是本文的重点和核心。
Adapter接口为数据和界面搭建了一个访问的桥梁,最重要的就是getView()方法,用这个方法我们可以实现一定程度的界面自定义。
ArrayAdapter间接实现了Adapter接口,这里我们简单起见,数据源只是提供单一的String数组。
01 | private static class GroupListAdapter extends ArrayAdapter<String>{ |
04 | private List<String> listTag = null ; |
05 | public GroupListAdapter(Context context, List<String> objects, List<String> tags) { |
06 | super (context, 0 , objects); |
11 | public View getView( int position, View convertView, ViewGroup parent) { |
我们来看看getView方法:
4 | View getView( int position, View convertView, ViewGroup parent); |
现在我们就是要重写getView方法,来实现列表中嵌入分组标签。
分组标签也是列表数据项之一,也是被一行一行的画上去的,但是它和其他数据项UI是不一致的,所以我们需要准备2套数据项布局模板:
数据项模板group_list_item.xml:
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
03 | android:orientation = "horizontal" |
04 | android:layout_width = "fill_parent" |
05 | android:layout_height = "wrap_content" |
06 | android:padding = "5dip" > |
10 | android:src = "@drawable/list_icon" |
11 | android:layout_width = "wrap_content" |
12 | android:layout_height = "wrap_content" /> |
14 | android:id = "@+id/group_list_item_text" |
15 | android:layout_width = "wrap_content" |
16 | android:layout_height = "fill_parent" |
17 | android:paddingLeft = "5dip" |
18 | android:gravity = "center_vertical" /> |
标签项模板group_list_item_tag.xml:
02 | <? xml version = "1.0" encoding = "utf-8" ?> |
04 | android:layout_width = "fill_parent" |
05 | android:layout_height = "wrap_content" |
06 | android:background = "#555555" |
07 | android:paddingLeft = "10dip" > |
09 | android:id = "@+id/group_list_item_text" |
10 | android:layout_width = "wrap_content" |
11 | android:layout_height = "20dip" |
12 | android:textColor = "#ffffff" |
13 | android:gravity = "center_vertical" /> |
好,我们现在把这两个模板应用到getView方法中去:
02 | public View getView( int position, View convertView, ViewGroup parent) { |
03 | View view = convertView; |
05 | if (listTag.contains(getItem(position))){ |
07 | view = LayoutInflater.from(getContext()).inflate(R.layout.group_list_item_tag, null ); |
10 | view = LayoutInflater.from(getContext()).inflate(R.layout.group_list_item, null ); |
13 | TextView textView = (TextView) view.findViewById(R.id.group_list_item_text); |
14 | textView.setText(getItem(position)); |
4.禁止标签项的响应事件:
在ArrayAdapter的父类BaseAdapter中提供了isEnable的()方法,我们看看这个方法:
4 | public boolean isEnabled ( int position) |
这个方法刚好用来禁用标签项的响应事件。具体实现如下:
2 | public boolean isEnabled( int position) { |
3 | if (listTag.contains(getItem(position))){ |
6 | return super .isEnabled(position); |
现在标签项不会再有任何触控效果了,犹如一块死木板。
5.完整代码:
整个Activity和Adapter代码如下:
01 | public class GroupListActivity extends Activity { |
03 | private GroupListAdapter adapter = null ; |
04 | private ListView listView = null ; |
05 | private List<String> list = new ArrayList<String>(); |
06 | private List<String> listTag = new ArrayList<String>(); |
09 | protected void onCreate(Bundle savedInstanceState) { |
10 | super .onCreate(savedInstanceState); |
11 | setContentView(R.layout.group_list_activity); |
14 | adapter = new GroupListAdapter( this , list, listTag); |
15 | listView = (ListView)findViewById(R.id.group_list); |
16 | listView.setAdapter(adapter); |
19 | public void setData(){ |
32 | for ( int i= 0 ;i< 30 ;i++){ |
36 | private static class GroupListAdapter extends ArrayAdapter<String>{ |
38 | private List<String> listTag = null ; |
39 | public GroupListAdapter(Context context, List<String> objects, List<String> tags) { |
40 | super (context, 0 , objects); |
45 | public boolean isEnabled( int position) { |
46 | if (listTag.contains(getItem(position))){ |
49 | return super .isEnabled(position); |
52 | public View getView( int position, View convertView, ViewGroup parent) { |
53 | View view = convertView; |
54 | if (listTag.contains(getItem(position))){ |
55 | view = LayoutInflater.from(getContext()).inflate(R.layout.group_list_item_tag, null ); |
57 | view = LayoutInflater.from(getContext()).inflate(R.layout.group_list_item, null ); |
59 | TextView textView = (TextView) view.findViewById(R.id.group_list_item_text); |
60 | textView.setText(getItem(position)); |
6.最终效果: