现在的位置: 首页 > 综合 > 正文

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

2018年08月01日 ⁄ 综合 ⁄ 共 10098字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.