1、原理分析
Adapter对于ListView是非常重要的,它处于listView和数据源的中间,负责为ListView创建具体的视图。之前提到过ListView采用了View复用技术,即使需要显示大量的数据列表时它也能高效的工作,它总是试图复用已经存在的View。
下面就对View复用技术,做简单的讲解:
简单来说,假设一个ListView中存在7个Item,从上到下分别是Item1~Item7,当用户向上滑动屏幕时,Item1会滚动到屏幕区域以外,item1并没有被销毁,而是被放入了回收站(Recycler)。当ListView需要显示下一个item时,它会首先检查回收站里是否有可用的Item,刚好发现了item1,直接复用item1。ListView把获取到的Item1和新的位置(position8)传递给Adapter的getView方法,在getView方法中根据position8从数据源中取出对应的数据覆盖到item1,这时item1就变成了item8。最后,ListView把新生成item8显示到界面上。
而当ListView中存在不同视图的Item的时候,Adapter中存在一个int getViewTypeCount()方法返回item使用的View类型的数量(默认为1)。listView根据Adapter的这个方法的返回值,在回收站中建立对应数量的保存区域。而Adapter的int getItemViewType(int position):根据position获取对应item使用的View类型。 ListView会在回收站中根据类型建立不同的保存区域,listView会在调用Adapter 的getView方法之前,根据position获取正确类型的View进行复用。
通过以上两种方式,ListView实现了在单一Item视图和多种Item视图情况下,View的复用。
在上一次“ListView绑定EmptyView”的讲解中,进行了简单的Adapter的自定义实现,今天我们来讲解在ListView中显示不同时视图的Item。如果只显示单一视图的Item,只需要重写BaseAdapter的以下四个方法:
int getCount():返回数据源中数据项的总数量
Object getItem(int position):根据position从数据源中获取数据项
long getItemId(int position): 根据position从数据源中获取数据项ID
View getView(int position, View convertView, ViewGroup parent):根据position创建View,它是Adapter中最重要的方法,listView通过它创建View。
这也是进行自定义Adapter时必须要重写的方法。
要想实现多视图的Item的ListView,还需要重写Adapter的以下几个方法(不是必须要重写的):
int getViewTypeCount():返回item使用的View类型的数量,默认为1。
int getItemViewType(int position):根据position获取对应item使用的View类型。
boolean isEnabled (int position):根据position设置对应的item是否可用,即是否能接收UI事件。
其中,getItemViewType和getViewTypeCount通常需要配对使用
2、示例分析
这次的Demo实现的效果是,根据单词不同的首字母,在ListView中对字母进行分别显示。其中,单词的首字母作为各部分的分隔,使用不同于字母的显示视图。
因此在Demo中需要两种不同风格的视图。分别为:
first_letter_item.xml,代码如下:
word_item.xml,代码如下:
这两个Item的布局文件非常简单,都是用了LinearLayout布局,布局中只有一个TextView显示文字,不做过多介绍。
JAVA代码如下:
该Demo中使用的自定义Adapter比之前的要复杂一些,通过复写一下方法实现分别显示两种视图的效果。
代码如下:
其中public int getViewTypeCount() 方法返回2,代表有两种视图,在public int getItemViewType(int position) 方法中根据字符串的长度,分别返回FIRST_LETTER_ITEM(0,代表“首字母视图”)和WORD_ITEM(1,代表“单词视图”)。
将“首字母”Item设置为不接收UI事件,也是根据字符串的长度,代码如下:
在以上整个JAVA代码中,最重要的是public View getView(int position, View convertView, ViewGroup parent) 方法的实现。代码如下:
该方法中,采用了View复用技术,如果converView为空,则根据不同的position,解析相应的xml布局文件,通过findViewById()的方式将获取到的TextView,并通过convertView.setTag(vh)将控件存放在ViewHolder中。如果convertView不为空,则直接通过vh = (ViewHolder) convertView.getTag()的方式取到之前存入的ViewHolder。
需要注意的是:
View中的setTag(Object tag)表示给View添加一个格外的数据(或理解为标志,可以用来区分一组相同类型的控件),以后可以用getTag()将这个数据取出来。
另外,将ViewHolder放入converView中,方便View复用的时候取出vh,可以对其中的TextView直接进行设置,省去了findViewById的过程。这是使用ListView时的一个技巧。
Adapter对于ListView是非常重要的,它处于listView和数据源的中间,负责为ListView创建具体的视图。之前提到过ListView采用了View复用技术,即使需要显示大量的数据列表时它也能高效的工作,它总是试图复用已经存在的View。
下面就对View复用技术,做简单的讲解:
简单来说,假设一个ListView中存在7个Item,从上到下分别是Item1~Item7,当用户向上滑动屏幕时,Item1会滚动到屏幕区域以外,item1并没有被销毁,而是被放入了回收站(Recycler)。当ListView需要显示下一个item时,它会首先检查回收站里是否有可用的Item,刚好发现了item1,直接复用item1。ListView把获取到的Item1和新的位置(position8)传递给Adapter的getView方法,在getView方法中根据position8从数据源中取出对应的数据覆盖到item1,这时item1就变成了item8。最后,ListView把新生成item8显示到界面上。
而当ListView中存在不同视图的Item的时候,Adapter中存在一个int getViewTypeCount()方法返回item使用的View类型的数量(默认为1)。listView根据Adapter的这个方法的返回值,在回收站中建立对应数量的保存区域。而Adapter的int getItemViewType(int position):根据position获取对应item使用的View类型。 ListView会在回收站中根据类型建立不同的保存区域,listView会在调用Adapter 的getView方法之前,根据position获取正确类型的View进行复用。
通过以上两种方式,ListView实现了在单一Item视图和多种Item视图情况下,View的复用。
在上一次“ListView绑定EmptyView”的讲解中,进行了简单的Adapter的自定义实现,今天我们来讲解在ListView中显示不同时视图的Item。如果只显示单一视图的Item,只需要重写BaseAdapter的以下四个方法:
int getCount():返回数据源中数据项的总数量
Object getItem(int position):根据position从数据源中获取数据项
long getItemId(int position): 根据position从数据源中获取数据项ID
View getView(int position, View convertView, ViewGroup parent):根据position创建View,它是Adapter中最重要的方法,listView通过它创建View。
这也是进行自定义Adapter时必须要重写的方法。
要想实现多视图的Item的ListView,还需要重写Adapter的以下几个方法(不是必须要重写的):
int getViewTypeCount():返回item使用的View类型的数量,默认为1。
int getItemViewType(int position):根据position获取对应item使用的View类型。
boolean isEnabled (int position):根据position设置对应的item是否可用,即是否能接收UI事件。
其中,getItemViewType和getViewTypeCount通常需要配对使用
2、示例分析
这次的Demo实现的效果是,根据单词不同的首字母,在ListView中对字母进行分别显示。其中,单词的首字母作为各部分的分隔,使用不同于字母的显示视图。
因此在Demo中需要两种不同风格的视图。分别为:
first_letter_item.xml,代码如下:
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
02 | < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" |
03 | android:layout_width = "fill_parent" |
04 | android:layout_height = "fill_parent" |
05 | android:orientation = "vertical" > |
06 | |
07 | < TextView android:id = "@+id/firstletter" |
08 | style = "?android:attr/listSeparatorTextViewStyle" |
09 | android:layout_width = "fill_parent" |
10 | android:layout_height = "wrap_content" |
11 | android:textColor = "@android:color/white" |
12 | /> |
13 | </ LinearLayout > |
word_item.xml,代码如下:
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
02 | < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" |
03 | android:layout_width = "fill_parent" |
04 | android:layout_height = "fill_parent" |
05 | android:orientation = "vertical" |
06 | android:paddingBottom = "8dp" > |
07 | |
08 | < TextView |
09 | android:id = "@+id/word" |
10 | android:layout_width = "fill_parent" |
11 | android:layout_height = "wrap_content" |
12 | android:paddingLeft = "8dp" |
13 | android:paddingRight = "8dp" |
14 | android:paddingTop = "8dp" |
15 | android:singleLine = "true" |
16 | android:textColor = "?android:attr/textColorPrimary" |
17 | android:textSize = "10pt" |
18 | android:textStyle = "bold" /> |
19 |
20 | </ LinearLayout > |
这两个Item的布局文件非常简单,都是用了LinearLayout布局,布局中只有一个TextView显示文字,不做过多介绍。
JAVA代码如下:
001 | package com.devdiv.test.listviewtest6; |
002 |
003 | import android.app.ListActivity; |
004 | import android.os.Bundle; |
005 | import android.view.LayoutInflater; |
006 | import android.view.View; |
007 | import android.view.ViewGroup; |
008 | import android.widget.BaseAdapter; |
009 | import android.widget.ListView; |
010 | import android.widget.TextView; |
011 |
012 | public class ListViewTest6Activity extends ListActivity { |
013 | |
014 | private LayoutInflater mInflater = null ; |
015 | |
016 | private static final String[] DATA = { "a" , "abnormal" , "acute" , "ambitious" , "b" , "bed" , "bad" , |
017 | "c" , "compare" , "communication" , "d" , "dad" , "e" , "element" }; |
018 | |
019 | private LetterAdapter mLetterAdapter; |
020 | |
021 | /** Called when the activity is first created. */ |
022 | @Override |
023 | public void onCreate(Bundle savedInstanceState) { |
024 | super .onCreate(savedInstanceState); |
025 | |
026 | mInflater = LayoutInflater.from( this ); |
027 | |
028 | mLetterAdapter = new LetterAdapter(DATA); |
029 | setListAdapter(mLetterAdapter); |
030 | } |
031 | |
032 | private class LetterAdapter extends BaseAdapter { |
033 | |
034 | private String[] letter = {}; |
035 | |
036 | //定义两个int常量标记不同的Item视图 |
037 | public static final int FIRST_LETTER_ITEM = 0 ; |
038 | public static final int WORD_ITEM = 1 ; |
039 | |
040 | public LetterAdapter(String[] data) { |
041 | letter = data; |
042 | } |
043 |
044 | @Override |
045 | public int getItemViewType( int position) { |
046 | // TODO Auto-generated method stub |
047 | |
048 | if (letter[position].length() == 1 ) { |
049 | return FIRST_LETTER_ITEM; |
050 | } else { |
051 | return WORD_ITEM; |
052 | } |
053 | } |
054 |
055 | @Override |
056 | public int getViewTypeCount() { |
057 | // TODO Auto-generated method stub |
058 | //因为有两种视图,所以返回2 |
059 | return 2 ; |
060 | } |
061 |
062 | @Override |
063 | public boolean isEnabled( int position) { |
064 | // TODO Auto-generated method stub |
065 | return (letter[position].length() != 1 ); |
066 | } |
067 |
068 | @Override |
069 | public int getCount() { |
070 | // TODO Auto-generated method stub |
071 | return letter.length; |
072 | } |
073 |
074 | @Override |
075 | public Object getItem( int position) { |
076 | // TODO Auto-generated method stub |
077 | return letter[position]; |
078 | } |
079 |
080 | @Override |
081 | public long getItemId( int position) { |
082 | // TODO Auto-generated method stub |
083 | return position; |
084 | } |
085 |
086 | @Override |
087 | public View getView( int position, View convertView, ViewGroup parent) { |
088 | // TODO Auto-generated method stub |
089 | |
090 | ViewHolder vh = null ; |
091 | |
092 | if (convertView == null ) { |
093 | |
094 | vh = new ViewHolder(); |
095 | |
096 | if (getItemViewType(position) == FIRST_LETTER_ITEM) { |
097 | convertView = getLayoutInflater().inflate(R.layout.first_letter_item, parent, false ); |
098 | //convertView = mInflater.inflate(R.layout.first_letter_item, null); |
099 | vh.tv = (TextView) convertView.findViewById(R.id.firstletter); |
100 | |
101 | } else { |
102 | convertView = getLayoutInflater().inflate(R.layout.word_item, parent, false ); |
103 | //convertView = mInflater.inflate(R.layout.word_item, null); |
104 | vh.tv = (TextView) convertView.findViewById(R.id.word); |
105 | } |
106 | convertView.setTag(vh); |
107 | } else { |
108 | vh = (ViewHolder) convertView.getTag(); |
109 | } |
110 | vh.tv.setText(letter[position]); |
111 | return convertView; |
112 | } |
113 | class ViewHolder{ |
114 | TextView tv; |
115 | } |
116 | } |
117 | } |
该Demo中使用的自定义Adapter比之前的要复杂一些,通过复写一下方法实现分别显示两种视图的效果。
代码如下:
01 | @Override |
02 | public int getItemViewType( int position) { |
03 | // TODO Auto-generated method stub |
04 | |
05 | if (letter[position].length() == 1 ) { |
06 | return FIRST_LETTER_ITEM; |
07 | } else { |
08 | return WORD_ITEM; |
09 | } |
10 | } |
11 |
12 | @Override |
13 | public int getViewTypeCount() { |
14 | // TODO Auto-generated method stub |
15 | //因为有两种视图,所以返回2 |
16 | return 2 ; |
17 | } |
其中public int getViewTypeCount() 方法返回2,代表有两种视图,在public int getItemViewType(int position) 方法中根据字符串的长度,分别返回FIRST_LETTER_ITEM(0,代表“首字母视图”)和WORD_ITEM(1,代表“单词视图”)。
将“首字母”Item设置为不接收UI事件,也是根据字符串的长度,代码如下:
1 | @Override |
2 | public boolean isEnabled( int position) { |
3 | // TODO Auto-generated method stub |
4 | return (letter[position].length() != 1 ); |
5 | } |
在以上整个JAVA代码中,最重要的是public View getView(int position, View convertView, ViewGroup parent) 方法的实现。代码如下:
01 | @Override |
02 | public View getView( int position, View convertView, ViewGroup parent) { |
03 | // TODO Auto-generated method stub |
04 | |
05 | ViewHolder vh = null ; |
06 | |
07 | if (convertView == null ) { |
08 | |
09 | vh = new ViewHolder(); |
10 | |
11 | if (getItemViewType(position) == FIRST_LETTER_ITEM) { |
12 | convertView = getLayoutInflater().inflate(R.layout.first_letter_item, parent, false ); |
13 | //convertView = mInflater.inflate(R.layout.first_letter_item, null); |
14 | vh.tv = (TextView) convertView.findViewById(R.id.firstletter); |
15 | |
16 | } else { |
17 | convertView = getLayoutInflater().inflate(R.layout.word_item, parent, false ); |
18 | //convertView = mInflater.inflate(R.layout.word_item, null); |
19 | vh.tv = (TextView) convertView.findViewById(R.id.word); |
20 | } |
21 | convertView.setTag(vh); |
22 | } else { |
23 | vh = (ViewHolder) convertView.getTag(); |
24 | } |
25 | vh.tv.setText(letter[position]); |
26 | return convertView; |
27 | } |
28 | class ViewHolder{ |
29 | TextView tv; |
30 | } |
该方法中,采用了View复用技术,如果converView为空,则根据不同的position,解析相应的xml布局文件,通过findViewById()的方式将获取到的TextView,并通过convertView.setTag(vh)将控件存放在ViewHolder中。如果convertView不为空,则直接通过vh = (ViewHolder) convertView.getTag()的方式取到之前存入的ViewHolder。
需要注意的是:
View中的setTag(Object tag)表示给View添加一个格外的数据(或理解为标志,可以用来区分一组相同类型的控件),以后可以用getTag()将这个数据取出来。
另外,将ViewHolder放入converView中,方便View复用的时候取出vh,可以对其中的TextView直接进行设置,省去了findViewById的过程。这是使用ListView时的一个技巧。
3、运行效果