自定义Adapter实现多视图Item的ListView

From http://www.devdiv.com/adapter_item_listview-article-3730-1.html

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，代码如下：

[代码]xml代码：

1	<!--?xml version="1.0" encoding="utf-8"?-->

2	<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical">

3

4	<textview android:id="@+id/firstletter" style="?android:attr/listSeparatorTextViewStyle" android:layout_width="fill_parent"android:layout_height="wrap_content" android:textcolor="@android:color/white">

5	</textview></linearlayout>

 word_item.xml，代码如下：

[代码]xml代码：

1	<!--?xml version="1.0" encoding="utf-8"?-->

2	<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent" android:layout_height="fill_parent"android:orientation="vertical" android:paddingbottom="8dp">

3

4

<textview android:id="@+id/word" android:layout_width="fill_parent"android:layout_height="wrap_content" android:paddingleft="8dp"android:paddingright="8dp" android:paddingtop="8dp" android:singleline="true"android:textcolor="?android:attr/textColorPrimary" android:textsize="10pt"android:textstyle="bold">

5

6	</textview></linearlayout>

  这两个Item的布局文件非常简单，都是用了LinearLayout布局，布局中只有一个TextView显示文字，不做过多介绍。

        JAVA代码如下：

[代码]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比之前的要复杂一些，通过复写一下方法实现分别显示两种视图的效果。
代码如下：

[代码]java代码：

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事件，也是根据字符串的长度，代码如下：

[代码]java代码：

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) 方法的实现。代码如下：

[代码]java代码：

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、运行效果

示例代码地址： http://www.devdiv.com/thread-123930-1-1.html