ListView项(Item)的三种布局使用例子

在使用ListView的时候，经常看到需要为List中的item添加诸如“android.R.layout.simple_list_item_2”、“android.R.layout.two_line_list_item”之类的布局。用起来虽然简单，但却不明其所以然。下面来探究一下、学习一下它的源码和应用一下：

 

例子代码：//main.xml

[xhtml]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:orientation="vertical"  
6.     >  
7.     <ListView android:id="@+id/android:list"  
8.             android:layout_width="fill_parent"  
9.             android:layout_height="fill_parent"  
10.             android:layout_weight="1"  
11.             android:drawSelectorOnTop="false"  
12.     />  
13.     <LinearLayout  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="wrap_content"  
16.         android:orientation="horizontal"  
17.         android:gravity="center_horizontal"  
18.     >  
19.         <Button android:id="@+id/btnPrevious"  
20.                 android:layout_width="wrap_content"  
21.                 android:layout_height="wrap_content"  
22.                 android:layout_marginRight="10dip"  
23.                 android:text="Previous">  
24.         </Button>  
25.         <Button android:id="@+id/btnNext"  
26.                 android:layout_width="wrap_content"  
27.                 android:layout_height="wrap_content"  
28.                 android:text="Next">  
29.         </Button>  
30.     </LinearLayout>  
31. </LinearLayout>  

//list_item.xml

[c-sharp]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.   android:layout_width="fill_parent"  
4.   android:layout_height="wrap_content">  
5.     <ImageView android:id="@+id/imageView"  
6.         android:layout_width="wrap_content"  
7.         android:layout_height="wrap_content"  
8.         android:layout_centerVertical="true"  
9.         android:layout_marginLeft="5px"  
10.         android:layout_marginRight="5px"  
11.         android:src="@drawable/tea_80x59"  
12.     />  
13.       
14.     <TextView android:id="@+id/titleTextView"  
15.         android:layout_width="fill_parent"  
16.         android:layout_height="wrap_content"  
17.         android:layout_toRightOf="@id/imageView"  
18.         android:textSize="22px"  
19.     />  
20.     <TextView android:id="@+id/descTextView"  
21.         android:layout_width="fill_parent"  
22.         android:layout_height="wrap_content"  
23.         android:layout_toRightOf="@id/imageView"  
24.         android:layout_below="@id/titleTextView"  
25.         android:textSize="12px"  
26.     />  
27. </RelativeLayout>  

//MySimpleAdapterActivity.java

[java]  view plain copy

1. package com.tutor.simpleadapter;  
2. import java.util.ArrayList;  
3. import java.util.HashMap;  
4. import java.util.List;  
5. import java.util.Map;  
6. import android.app.Activity;  
7. import android.app.ListActivity;  
8. import android.content.Intent;  
9. import android.os.Bundle;  
10. import android.util.Log;  
11. import android.view.View;  
12. import android.widget.Button;  
13. import android.widget.ListView;  
14. import android.widget.SimpleAdapter;  
15. import android.widget.Toast;  
16. public class MySimpleAdapterActivity extends ListActivity {  
17.     private Button btnPrevious = null;  
18.     private Button btnNext = null;  
19.     private String TAG = "SimpleAdapter";  
20.     private int index = 0;  
21.       
22.     /** Called when the activity is first created. */  
23.     @Override  
24.     public void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.         setContentView(R.layout.main);  
27.           
28.         btnPrevious = (Button)findViewById(R.id.btnPrevious);  
29.         btnNext = (Button)findViewById(R.id.btnNext);  
30.         btnPrevious.setOnClickListener(new ButtonClickListener(this));  
31.         btnNext.setOnClickListener(new ButtonClickListener(this));  
32.           
33.         Intent intent = getIntent();  
34.         index = intent.getIntExtra("Index", 0);  
35.         Log.d(TAG, "onCreate "+index);  
36.         switch((index % 3)) {  
37.         case 0://自定义的List Item布局  
38.             setListAdapter(new SimpleAdapter(this,   
39.                     getData("custom-item"),   
40.                     R.layout.list_item,   
41.                     new String[]{"title", "description"},   
42.                     new int[]{R.id.titleTextView, R.id.descTextView}));  
43.             Log.i(TAG, "SimpleAdapter with R.layout.list_1");  
44.             break;  
45.         case 1://Android提供的simple_list_item_2布局  
46.             setListAdapter(new SimpleAdapter(this,   
47.                     getData("simple-list-item-2"),   
48.                     android.R.layout.simple_list_item_2,   
49.                     new String[]{"title", "description"},   
50.                     new int[]{android.R.id.text1, android.R.id.text2}));  
51.             Log.i(TAG, "SimpleAdapter with android.R.layout.simple_list_item_2");  
52.             break;  
53.         case 2://Android提供的two_line_list_item布局  
54.             setListAdapter(new SimpleAdapter(this,   
55.                     getData("two-line-list-item"),   
56.                     android.R.layout.two_line_list_item,   
57.                     new String[]{"title", "description"},   
58.                     new int[]{android.R.id.text1, android.R.id.text2}));  
59.             Log.i(TAG, "SimpleAdapter with android.R.layout.two_line_list_item");  
60.             break;  
61.         default:  
62.             Log.i(TAG, "no SimpleAdapter");  
63.         }  
64.           
65.     }  
66.       
67.     protected void onRestart() {  
68.         super.onRestart();  
69.         Log.d(TAG, "onRestart "+index);  
70.     }  
71.       
72.     protected void onStart() {  
73.         super.onStart();  
74.         Log.d(TAG, "");  
75.     }  
76.       
77.     protected void onResume() {  
78.         super.onResume();  
79.         Log.d(TAG, "onResume "+index);  
80.     }  
81.       
82.     protected void onPause() {  
83.         super.onPause();  
84.         Log.d(TAG, "onPause "+index);  
85.     }  
86.       
87.     protected void onStop () {  
88.         super.onStop();  
89.         Log.d(TAG, "onStop "+index);  
90.     }  
91.       
92.     protected void onDestroy() {  
93.         Log.d(TAG, "onDestroy "+index);  
94.         if(btnPrevious != null) {  
95.             btnPrevious.setOnClickListener(null);  
96.             btnPrevious = null;  
97.         }  
98.           
99.         if(btnNext != null) {  
100.             btnNext.setOnClickListener(null);  
101.             btnNext = null;  
102.         }  
103.           
104.         super.onDestroy();  
105.     }  
106.       
107.     /** 
108.      * 构造SimpleAdapter的第二个参数，类型为List<Map<?,?>> 
109.      * @param title 
110.      * @return 
111.      */  
112.     private List<Map<String, String>> getData(String title) {  
113.         List<Map<String, String>> listData = new ArrayList<Map<String, String>>();  
114.         for(int i = 1; i<=10; i++) {  
115.             Map<String, String> map = new HashMap<String, String>();  
116.             map.put("title", title+" "+i);  
117.             map.put("description", "This is the description of "+title+" "+i);  
118.             listData.add(map);  
119.         }  
120.           
121.         return listData;  
122.     }  
123.       
124.     /** 
125.      * 当List的项被选中时触发 
126.      */  
127.     protected void onListItemClick(ListView listView, View v, int position, long id) {  
128.         Map map = (Map)listView.getItemAtPosition(position);  
129.         Toast toast = Toast.makeText(this, map.get("title")+" is selected.", Toast.LENGTH_LONG);  
130.         toast.show();  
131.     }  
132.       
133.     class ButtonClickListener implements View.OnClickListener  {  
134.         private Activity context = null;  
135.         public ButtonClickListener(Activity context) {  
136.             this.context = context;  
137.         }  
138.         @Override  
139.         public void onClick(View v) {  
140.             // TODO Auto-generated method stub  
141.             if(context != null) {  
142.                 Intent intent = context.getIntent();  
143.                 int index = intent.getIntExtra("Index", 0);  
144.                   
145.                 if(v.getId() == R.id.btnNext) {  
146.                     index += 1;  
147.                 }else if(v.getId() == R.id.btnPrevious) {  
148.                     index -= 1;  
149.                     if(index < 0) {  
150.                         index = Math.abs(index);  
151.                     }  
152.                 }  
153.                   
154.                 //发起新的Activity  
155.                 Intent newIntent = new Intent(context, MySimpleAdapterActivity.class);  
156.                 newIntent.putExtra("Index", index);  
157.                 context.startActivity(newIntent);  
158.                   
159.                 //关闭原来的Activity  
160.                 context.finish();  
161.             }  
162.         }  
163.           
164.     }  
165. }  

 

 

//下面两个是Android自带的布局，直接引用即可，不用添加到工程中：

//base/core/res/res/layout/simple_list_item_2.xml

[xhtml]  view plain copy

1. <TwoLineListItem xmlns:android="http://schemas.android.com/apk/res/android"   
2.     android:paddingTop="2dip"  
3.     android:paddingBottom="2dip"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="wrap_content"  
6.     android:minHeight="?android:attr/listPreferredItemHeight"  
7.     android:mode="twoLine"  
8. >  
9.       
10.     <TextView android:id="@android:id/text1"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         android:layout_marginLeft="6dip"  
14.         android:layout_marginTop="6dip"  
15.         android:textAppearance="?android:attr/textAppearanceLarge"  
16.     />  
17.           
18.     <TextView android:id="@android:id/text2"  
19.         android:layout_width="match_parent"  
20.         android:layout_height="wrap_content"  
21.         android:layout_below="@android:id/text1"  
22.         android:layout_alignLeft="@android:id/text1"  
23.         android:textAppearance="?android:attr/textAppearanceSmall"  
24.     />  
25. </TwoLineListItem>  

//base/core/res/res/layout/two_line_list_item.xml

[xhtml]  view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="wrap_content"  
4.     android:orientation="vertical">  
5.     <TextView android:id="@android:id/text1"  
6.         android:textSize="16sp"  
7.         android:textStyle="bold"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="wrap_content"/>  
10.     <TextView android:id="@android:id/text2"  
11.         android:textSize="16sp"  
12.         android:layout_width="match_parent"  
13.         android:layout_height="wrap_content"/>  
14. </LinearLayout>  

 

运行的结果如下：

    

 

例子中，List中的item布局有三种：

1. 自定义的布局，使用了相对布局(RelativeLayout，见list_item.xml)，左侧一个图片，右侧上方是字体比较大的title，下方是字体稍小的description；
2. 第二种是Android自带的布局（见源码里的simple_list_item_2.xml），主要是一个垂直的LinearLayout，里面包含两个ID分别为text1、text2的TextView，这两个TextView的字体大小不一样，一个带textAppearanceLarge属性，另外一个带textAppearanceSmall属性；
3. 第三种也是Android自带的布局（见源码里的two_line_list_item.xml），主要是一个垂直的LinearLayout，里面包含两个ID分别为text1、text2的TextView，这两个TextView的字体大小一样，但每个TextView还带一个字体加粗的属性。

SimpleAdapter的使用：

构造函数： SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)

参数有5个：

1. context：也就是上下文，而Activity都是继承于Context的，所以这个参数一般使用Activity的实例；
2. data：类型要为一个List的子类，且List中的每个元素都必须为Map的子类，每个Map中以有一对或多对的Key-Value对，这些值与下面的参数from有对应；
3. resource：这是每个List项(Item)对应的XML布局资源文件名，在里面控制List项显示的元素以及相对位置；
4. from：是一个字符串数组，可以理解为列名，对应于data数据中Map元素的Key值，只有包含在这个字符串数组的元素对应到Map中的Value值才能显示到TextView中（这些TextView在最后一个参数to配置），所以这些Value值需要为字符串或者有toString()的方法；
5. to：TextView组件ID的数组，上面的from参数配置了Key值，而根据这个Key值从data参数里的map取出的value值需要设置到TextView中，而这些TextView的id需要在这个数组中配置。而且这些TextView需要在参数resource对应的XML资源文件中配置。

 

补充：

例子中使用了ListActivity，它有默认的XML资源文件；但由于本例需要添加两个按钮（原来的布局是没有按钮），所以重新在main.xml中配置了一个ListView，且ListActivity要求放到它里面的ListView的ID必须是 android:list 。本例的两个按钮主要是切换不同的ListActivity来显示ListView项的三种不同布局，一种是自定义的，另外两种是Android自带的常用ListView项布局。