listview的用法总结

Android中ListView这个组件比较常用，但对初学者来说，又比较难掌握，在此分享一下我的使用经验。
ListView是以列表的形式展示数据，这里面有三个要素：数据、视图、适配器。
常用的适配器有三种：ArrayAdapter, SimpleAdapter, SimpleCursorAdapter。
其中SimpleAdapter扩展性最好，几乎能实现所有展示需求的列表，我在实际开发中用的全是这个，这里也只介绍这个。

假设要实现如下效果的列表视图：

下面一步步来实现。

首先设计视图，主要设计ListView里面item的显示效果，在layout中创建item.xml文件，如下：

Xml代码  

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" android:layout_height="75dp"  
4.     android:paddingLeft="10dp" android:paddingRight="10dp">  
5.     <ImageView  
6.         android:id="@+id/img"  
7.         android:layout_height="fill_parent"  
8.         android:layout_width="60dp"  
9.         android:layout_alignParentLeft="true" />  
10.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
11.         android:orientation="vertical" android:layout_height="fill_parent"  
12.         android:layout_width="fill_parent" android:layout_toRightOf="@id/img"  
13.         android:paddingLeft="8dp">  
14.         <TextView  
15.             android:id="@+id/title1"  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:textColor="#cbcaca"  
19.             android:textSize="20dp" />  
20.         <TextView  
21.             android:id="@+id/title2"  
22.             android:layout_width="wrap_content"  
23.             android:layout_height="wrap_content"  
24.             android:textColor="#cbcaca"  
25.             android:textSize="14dp" />  
26.         <TextView  
27.             android:id="@+id/time"  
28.             android:layout_width="wrap_content"  
29.             android:layout_height="wrap_content"  
30.             android:textColor="#cbcaca"  
31.             android:textSize="12dp" />  
32.     </LinearLayout>  
33.     <CheckBox  
34.         android:id="@+id/checked"  
35.         android:layout_height="fill_parent"  
36.         android:layout_width="wrap_content"  
37.         android:layout_alignParentRight="true"  
38.         android:checked="false"  
39.         android:focusable="false" />  
40. </RelativeLayout>  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="75dp"
	android:paddingLeft="10dp" android:paddingRight="10dp">
	<ImageView
		android:id="@+id/img"
		android:layout_height="fill_parent"
		android:layout_width="60dp"
		android:layout_alignParentLeft="true" />
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
		android:orientation="vertical" android:layout_height="fill_parent"
		android:layout_width="fill_parent" android:layout_toRightOf="@id/img"
		android:paddingLeft="8dp">
		<TextView
			android:id="@+id/title1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textColor="#cbcaca"
			android:textSize="20dp" />
		<TextView
			android:id="@+id/title2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textColor="#cbcaca"
			android:textSize="14dp" />
		<TextView
			android:id="@+id/time"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:textColor="#cbcaca"
			android:textSize="12dp" />
	</LinearLayout>
	<CheckBox
		android:id="@+id/checked"
		android:layout_height="fill_parent"
		android:layout_width="wrap_content"
		android:layout_alignParentRight="true"
		android:checked="false"
		android:focusable="false" />
</RelativeLayout>

此xml文件定义列表中每个项目的布局，如果想要不同的布局，修改此文件的布局即可。

这个文件中给每个需要在程序中动态赋值的地方都取了id，看到后面的代码时，注意对应关系。

 

然后是适配器和数据，这两个联系比较紧密，就放一起了。

先上代码：

Java代码  

1. //获取ListView对象   
2. ListView mListView = (ListView)findViewById(R.id.listview);   
3. //下面是数据映射关系,mFrom和mTo按顺序一一对应   
4. String[] mFrom = new String[]{"img","title1","title2","time"};   
5. int[] mTo = new int[]{R.id.img,R.id.title1,R.id.title2,R.id.time};   
6. //获取数据,这里随便加了10条数据,实际开发中可能需要从数据库或网络读取   
7. List<Map<String,Object>> mList = new ArrayList<Map<String,Object>>();   
8. Map<String,Object> mMap = null;   
9. for(int i = 0;i < 10;i++){   
10.     mMap = new HashMap<String,Object>();   
11.     mMap.put("img", R.drawable.icon);   
12.     mMap.put("title1", "标题");   
13.     mMap.put("title2", "副标题");   
14.     mMap.put("time", "2011-08-15 09:00");   
15.     mList.add(mMap);   
16. }   
17. //创建适配器   
18. SimpleAdapter mAdapter = new SimpleAdapter(this,mList,R.layout.item,mFrom,mTo);   
19. mListView.setAdapter(mAdapter);  

//获取ListView对象
ListView mListView = (ListView)findViewById(R.id.listview);
//下面是数据映射关系,mFrom和mTo按顺序一一对应
String[] mFrom = new String[]{"img","title1","title2","time"};
int[] mTo = new int[]{R.id.img,R.id.title1,R.id.title2,R.id.time};
//获取数据,这里随便加了10条数据,实际开发中可能需要从数据库或网络读取
List<Map<String,Object>> mList = new ArrayList<Map<String,Object>>();
Map<String,Object> mMap = null;
for(int i = 0;i < 10;i++){
	mMap = new HashMap<String,Object>();
	mMap.put("img", R.drawable.icon);
	mMap.put("title1", "标题");
	mMap.put("title2", "副标题");
	mMap.put("time", "2011-08-15 09:00");
	mList.add(mMap);
}
//创建适配器
SimpleAdapter mAdapter = new SimpleAdapter(this,mList,R.layout.item,mFrom,mTo);
mListView.setAdapter(mAdapter);

这里要注意对应关系，Layout中的id，程序中对它的引用，Map中的数据。 

到这里已经实现了上面那张图的效果。但是程序需要一些交互操作，比如单击某一项，长按某一项，怎么办？

看下面：

添加点击事件：

Java代码  

1. mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {   
2.     @Override  
3.     public void onItemClick(AdapterView<?> parent, View view, int position, long id) {   
4.         @SuppressWarnings("unchecked")   
5.         //获取被点击的item所对应的数据   
6.         HashMap<String,Object> map = (HashMap<String, Object>) parent.getItemAtPosition(position);   
7.         //下面是你的其他事务逻辑   
8.     }   
9. });  

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
		@SuppressWarnings("unchecked")
		//获取被点击的item所对应的数据
		HashMap<String,Object> map = (HashMap<String, Object>) parent.getItemAtPosition(position);
		//下面是你的其他事务逻辑
	}
});

这里可以通过position获取被点击的item所对应的Map数据，拿到这个数据了，还怕有什么功能实现不了吗？

举个最常见的例子，数据是从数据库里取的，每条数据有唯一的id，点了某一项之后，需要得到这个id进行数据操作，怎么办？很简单，在准备数据的时候，往Map中多添加一条数据，map.put("id",id)，在上面的事件处理中，可以通过(Long) map.get("id")来获取id（此处假设id是long类型），取到id之后就可以进行数据库操作了。放心，添加的额外数据不会影响View的显示，因为有对应关系在。

长按事件和这个类似，无非是注册OnItemLongClickListener事件，在此就不列代码了。

还有最后一个问题，界面中每个item后面显示了一个单选框，明显是为批处理留的，该如何实现呢？

仔细想一下，会发现难点在于单选框状态的记录及获取。下面是我的方法：

在定义SimpleAdapter对象的时候，重写它的getView方法。如下：

Java代码  

1. mAdapter = new SimpleAdapter(this, pictureList, R.layout.picturelist, mFrom, mTo){   
2.     @Override     
3.     public View getView(final int position, View convertView, ViewGroup parent) {   
4.         View view = super.getView(position, convertView, parent);   
5.         @SuppressWarnings("unchecked")   
6.         final HashMap<String,Object> map = (HashMap<String, Object>) this.getItem(position);   
7.         //获取相应View中的Checkbox对象   
8.         CheckBox checkBox = (CheckBox)view.findViewById(R.id.checked);   
9.         checkBox.setChecked((Boolean) map.get("checked"));   
10.         //添加单击事件,在map中记录状态   
11.         checkBox.setOnClickListener(new View.OnClickListener() {   
12.             @Override  
13.             public void onClick(View view) {   
14.                 map.put("checked", ((CheckBox)view).isChecked());   
15.             }   
16.         });   
17.         return view;   
18.     }   
19. };  

mAdapter = new SimpleAdapter(this, pictureList, R.layout.picturelist, mFrom, mTo){
	@Override  
	public View getView(final int position, View convertView, ViewGroup parent) {
		View view = super.getView(position, convertView, parent);
		@SuppressWarnings("unchecked")
		final HashMap<String,Object> map = (HashMap<String, Object>) this.getItem(position);
		//获取相应View中的Checkbox对象
		CheckBox checkBox = (CheckBox)view.findViewById(R.id.checked);
		checkBox.setChecked((Boolean) map.get("checked"));
		//添加单击事件,在map中记录状态
		checkBox.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View view) {
				map.put("checked", ((CheckBox)view).isChecked());
			}
		});
		return view;
	}
};

在其他地方获取状态并处理：

Java代码  

1. //获取列表中的项目总数   
2. int count = pictureListView.getCount();   
3. Map<String,Object> map = null;   
4. boolean isChecked;   
5. long id;   
6. for(int i = 0;i < count;i++){   
7.     map = (Map<String, Object>) pictureListView.getItemAtPosition(i);   
8.     isChecked = (Boolean) map.get("isChecked");   
9.     if(isChecked){   
10.         id = (Long) map.get("id");   
11.         //被选中的逻辑   
12.     }   
13.     else{   
14.         id = (Long) map.get("id");   
15.         //未被选中的逻辑   
16.     }   
17. }   
18. //如果操作过程中对列表内容进行了添加或删除,需要调用下面这个方法来更新视图   
19. mAdapter.notifyDataSetChanged();  

//获取列表中的项目总数
int count = pictureListView.getCount();
Map<String,Object> map = null;
boolean isChecked;
long id;
for(int i = 0;i < count;i++){
	map = (Map<String, Object>) pictureListView.getItemAtPosition(i);
	isChecked = (Boolean) map.get("isChecked");
	if(isChecked){
		id = (Long) map.get("id");
		//被选中的逻辑
	}
	else{
		id = (Long) map.get("id");
		//未被选中的逻辑
	}
}
//如果操作过程中对列表内容进行了添加或删除,需要调用下面这个方法来更新视图
mAdapter.notifyDataSetChanged();

还有一点忘了写了，demo中的图片是drawable里面的图片，如果map中只有图片的地址，如何把它转成drawable对象显示出来呢？我在这里也研究了好久，map中放入drawable对象传过去好像没用，不会显示，怎么办？好在前面有重写SimpleAdapter的getView方法。map中把图片地址放进去，在getView方法里面，把此地址转成drawable对象，然后设置给ImageView，大功告成！代码如下：

Java代码  

1. mAdapter = new SimpleAdapter(this, pictureList, R.layout.picturelist, mFrom, mTo){   
2.     @Override     
3.     public View getView(final int position, View convertView, ViewGroup parent) {   
4.         View view = super.getView(position, convertView, parent);   
5.         @SuppressWarnings("unchecked")   
6.         final HashMap<String,Object> map = (HashMap<String, Object>) this.getItem(position);   
7.         ImageView imageView = (ImageView)view.findViewById(R.id.img);   
8.         FileInputStream fin;   
9.         try {   
10.             if(map.get("img") == null){   
11.                 throw new IOException();   
12.             }   
13.             fin = getApplicationContext().openFileInput((String) map.get("img"));   
14.             imageView.setImageDrawable(Drawable.createFromStream(fin, "src"));   
15.             fin.close();   
16.         } catch (FileNotFoundException e) {   
17.             imageView.setImageResource(R.drawable.default);   
18.         } catch (IOException e) {   
19.             imageView.setImageResource(R.drawable.default);   
20.         }   
21.         return view;   
22.     }   
23. };  

mAdapter = new SimpleAdapter(this, pictureList, R.layout.picturelist, mFrom, mTo){
	@Override  
	public View getView(final int position, View convertView, ViewGroup parent) {
		View view = super.getView(position, convertView, parent);
		@SuppressWarnings("unchecked")
		final HashMap<String,Object> map = (HashMap<String, Object>) this.getItem(position);
		ImageView imageView = (ImageView)view.findViewById(R.id.img);
		FileInputStream fin;
		try {
			if(map.get("img") == null){
				throw new IOException();
			}
			fin = getApplicationContext().openFileInput((String) map.get("img"));
			imageView.setImageDrawable(Drawable.createFromStream(fin, "src"));
			fin.close();
		} catch (FileNotFoundException e) {
			imageView.setImageResource(R.drawable.default);
		} catch (IOException e) {
			imageView.setImageResource(R.drawable.default);
		}
		return view;
	}
};

 好了，就到这里了。