Android--listview多种类型item

时间:2022-12-11 19:37:45
 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,代码如下:

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

Android--listview多种类型item




--------------------------------------------------------------------------------------------------------------------------------------------

ListView 多布局Item复用优化

1、在BaseAdapter 中复写两个方法

getViewTypeCount();该方法返回多少个不同的布局,系统会缓存相应个数的convertView

getItemViewType(int position);根据position返回相应的Item类型

注意:

只有在Item布局类型循环展示时,才可复用到相应类型convertView。

如果随机展示不同类型的item,无法准确复用convertView,此时应保存记录每个posotion的view到一个集合中,这样每次展示该 position位置时,不用重新加载每个item view和findviewById()。

2、getView中:

1、先获取到当前item的类型

2、判断convertView是否为null

convertView 为null时,根据布局类型加载布局,findview,设置相应的Holder,并convertView.setTag(Holder);

convertView 不为null时;根据布局类型,通过convertView.getTag(); 获取Holder,并强转成当前类型的Holder。

例子:

package com.example.lvitems;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {

	private ListView listview;
	private MyListAdapter1 adapter1;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listview = (ListView) findViewById(R.id.listview);
		adapter1 = new MyListAdapter1(this);
		listview.setAdapter(adapter1);
	}
}

class MyListAdapter1 extends BaseAdapter {
	private LayoutInflater mInflater;

	public MyListAdapter1(Context context) {
		mInflater = (LayoutInflater) context
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	}

	@Override
	public int getCount() {
		return 1000;
	}

	@Override
	public Object getItem(int position) {
		return null;
	}

	/**
	 * 该方法返回多少个不同的布局
	 */
	@Override
	public int getViewTypeCount() {
		return 5;
	}

	/**
	 * 根据position返回相应的Item类型
	 */
	@Override
	public int getItemViewType(int position) {
		// if (position >= 5) {
		// return new Random().nextInt(5);
		// }
		return position % 5;
	}

	@Override
	public long getItemId(int position) {
		return 0;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// 1获取当前item的类型
		int type = getItemViewType(position);
		System.out.println("convertView =  " + convertView);
		System.out.println("当前item的类型 " + type);
		ViewHolder1 holder1 = null;
		ViewHolder2 holder2 = null;
		ViewHolder3 holder3 = null;
		ViewHolder4 holder4 = null;
		ViewHolder5 holder5 = null;

		// 2判断是否有缓存,以及获取缓存的类型 如果item布局类型循环展示,不用走第2步直接走第4步
		int temp = -1;
		if (convertView != null) {
			if (convertView.getTag() instanceof ViewHolder1) {
				temp = 0;
			} else if (convertView.getTag() instanceof ViewHolder2) {
				temp = 1;
			} else if (convertView.getTag() instanceof ViewHolder3) {
				temp = 2;
			} else if (convertView.getTag() instanceof ViewHolder4) {
				temp = 3;
			} else if (convertView.getTag() instanceof ViewHolder5) {
				temp = 4;
			}
			System.out.println("缓存的类型  " + temp);
			// 3判断缓存的类型是否是当前item要显示的类型?是,可复用;不是,设置convertView为空重新加载。
			if (temp != type) {
				convertView = null;
			}
		}
		// 4 判断convertView是否为空?是,复用;不是,重新加载。
		if (convertView == null) {
			// 5.1根据类型 加载当前item要显示的布局,并让convertView setTag当前布局的holder
			switch (type) {
			case 0:
				convertView = mInflater.inflate(R.layout.item1, null);
				holder1 = new ViewHolder1();
				holder1.tv = (TextView) convertView.findViewById(R.id.item1_tv);
				convertView.setTag(holder1);
				break;
			case 1:
				convertView = mInflater.inflate(R.layout.item2, null);
				holder2 = new ViewHolder2();
				holder2.tv1 = (TextView) convertView
						.findViewById(R.id.item2_tv1);
				holder2.tv2 = (TextView) convertView
						.findViewById(R.id.item2_tv2);
				convertView.setTag(holder2);
				break;
			case 2:
				convertView = mInflater.inflate(R.layout.item3, null);
				holder3 = new ViewHolder3();
				holder3.tv1 = (TextView) convertView
						.findViewById(R.id.item3_tv1);
				holder3.tv2 = (TextView) convertView
						.findViewById(R.id.item3_tv2);
				holder3.tv3 = (TextView) convertView
						.findViewById(R.id.item3_tv3);
				convertView.setTag(holder3);
				break;
			case 3:
				convertView = mInflater.inflate(R.layout.item4, null);
				holder4 = new ViewHolder4();
				holder4.tv1 = (TextView) convertView
						.findViewById(R.id.item4_tv1);
				holder4.tv2 = (TextView) convertView
						.findViewById(R.id.item4_tv2);
				holder4.tv3 = (TextView) convertView
						.findViewById(R.id.item4_tv3);
				holder4.tv4 = (TextView) convertView
						.findViewById(R.id.item4_tv4);
				convertView.setTag(holder4);
				break;
			case 4:
				convertView = mInflater.inflate(R.layout.item5, null);
				holder5 = new ViewHolder5();
				holder5.tv1 = (ImageView) convertView
						.findViewById(R.id.item5_tv1);
				holder5.tv2 = (TextView) convertView
						.findViewById(R.id.item5_tv2);
				holder5.tv3 = (TextView) convertView
						.findViewById(R.id.item5_tv3);
				holder5.tv4 = (TextView) convertView
						.findViewById(R.id.item5_tv4);
				convertView.setTag(holder5);
				break;
			}

		} else {
			// 5.2根据类型 复用convertView getTag获取当前布局的holder
			switch (type) {
			case 0:
				holder1 = (ViewHolder1) convertView.getTag();
				holder1.tv.setText(type + "--" + position);
				break;
			case 1:
				holder2 = (ViewHolder2) convertView.getTag();
				holder2.tv1.setText(type + "--" + position);
				holder2.tv2.setText(type + "--" + position);
				break;
			case 2:
				holder3 = (ViewHolder3) convertView.getTag();
				holder3.tv1.setText(type + "--" + position);
				holder3.tv2.setText(type + "--" + position);
				holder3.tv3.setText(type + "--" + position);
				break;
			case 3:
				holder4 = (ViewHolder4) convertView.getTag();
				holder4.tv1.setText(type + "--" + position);
				holder4.tv2.setText(type + "--" + position);
				holder4.tv3.setText(type + "--" + position);
				holder4.tv4.setText(type + "--" + position);
				break;
			case 4:
				holder5 = (ViewHolder5) convertView.getTag();
				holder5.tv2.setText(type + "--" + position);
				holder5.tv3.setText(type + "--" + position);
				holder5.tv4.setText(type + "--" + position);
				break;
			}

		}
		// 6根据类型 获取当前布局的holder.并设置数据
		return convertView;
	}

	class ViewHolder1 {
		TextView tv;
	}

	class ViewHolder2 {
		TextView tv1;
		TextView tv2;
	}

	class ViewHolder3 {
		TextView tv1;
		TextView tv2;
		TextView tv3;
	}

	class ViewHolder4 {
		TextView tv1;
		TextView tv2;
		TextView tv3;
		TextView tv4;
	}

	class ViewHolder5 {
		ImageView tv1;
		TextView tv2;
		TextView tv3;
		TextView tv4;
	}

}