Android--listview多种类型item

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;
}

}

秒客网

Android--listview多种类型item

相关文章