Android常用复杂控件使用(二)--ListView

ListView的实际使用其实并不是非常复杂，但是如果需要设计一个非常漂亮的界面也是需要下一番努力的。这一章将从最简单的显示效果一步一步深入。

原理

对于ListView、GirdView、Gallery等复杂控件，Android提供了一个非常好用的MVC模式供我们开发使用，具体如下：

Model，模型，在实际中就是我们程序所使用到的数据；
View，视图，我们程序的展现界面，这里就是我们的ListView；
Controller，控制器，Android提供的是一个Adapter工具类；

以上对于初学者来说可能不是很好理解，我们下面通过一个小例子进行说明。

最简单的例子

我们的例子如下：

xml布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- ListView使用 -->
<ListView android:id="@+id/lv_ui_listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>

Activity代码：

package com.freesoft.activity.ui;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListAdapter;
import android.widget.ListView;

import com.freesoft.android_learning.R;

public class ActivityListview extends Activity {
private ListView lv;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui_listview);

lv = (ListView) findViewById(R.id.lv_ui_listview);
ListAdapter adapter = new ListAdapter();
lv.setAdapter(adapter);
}
}

这里我们注意到ListAdapter就是我们的Controller，View已经使用xml描述过，那么数据呢？不着急，我们一步一步来。

我们去查看ListAdapter的帮助。能够发现，ListAdapter应该是一个abstract类，连构造方法都不能直接使用new创建对象，所以只能在他的子类中想办法。

我们看一个最简单子类的例子，这里我们使用到了ArrayAdapter<T>这个模版类：

package com.freesoft.activity.ui;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;

import com.freesoft.android_learning.R;

public class ActivityListview extends Activity {
private ListView lv;
private String[] model = new String[]{"北京", "上海", "广州", "深圳"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui_listview);

lv = (ListView) findViewById(R.id.lv_ui_listview);
ListAdapter adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, model);
lv.setAdapter(adapter);
}
}

注意这样一改造，我们能够发现：

我们的数据（也就是model）是直接传递给adapter的；
具体显示的样式是通过adapter来控制的，这里我们用的是simple_list_item_1；

如果我们想实现单选和多选，则使用下面的代码（多选使用multi_choice）：

package com.freesoft.activity.ui;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;

import com.freesoft.android_learning.R;

public class ActivityListview extends Activity {
private ListView lv;
private String[] model = new String[]{"北京", "上海", "广州", "深圳"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui_listview);

lv = (ListView) findViewById(R.id.lv_ui_listview);
ListAdapter adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, model);
lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
lv.setAdapter(adapter);
}
}

多字段数据显示

上面的例子我们看过后发现，每条纪录仅能显示一个字段的数据，那么我们如果想显示一个表格效果怎么办呢？这就需要用到了另一个常见的Adapter——SimpleAdapter。

首先，我们既然需要在每一个列表项中显示我们自定义的布局，那么我们需要定义一个布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<!-- ListView使用中的每一行显示 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

<TextView
android:id="@+id/tv_ui_listview_item_province"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />

<TextView
android:id="@+id/tv_ui_listview_item_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>

</LinearLayout>

我们的主界面布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- ListView使用 -->
<!-- 表格显示效果 -->
<ListView android:id="@+id/lv_ui_listview"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>

最后看我们的java代码是如何使用Adapter的：

package com.freesoft.activity.ui;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

import com.freesoft.android_learning.R;

public class ActivityListview extends Activity {
private ListView lv;
//	private String[] model = new String[]{"北京", "上海", "广州", "深圳"};
private List<Map<String, String>> model = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui_listview);

//		lv = (ListView) findViewById(R.id.lv_ui_listview);
//		ListAdapter adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, model);
//		lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
//		lv.setAdapter(adapter);

lv = (ListView) findViewById(R.id.lv_ui_listview);
model = getModel();
SimpleAdapter adapter = new SimpleAdapter(this, model, R.layout.activity_ui_listview_item, new String[]{"province", "city"}, new int[]{R.id.tv_ui_listview_item_province, R.id.tv_ui_listview_item_city});
lv.setAdapter(adapter);
}

// 组装数据
private List<Map<String, String>> getModel() {
List<Map<String, String>> model = new ArrayList<Map<String, String>>();

Map<String, String> data;

data = new HashMap<String, String>();
data.put("province", "北京");
data.put("city", "北京");
model.add(data);

data = new HashMap<String, String>();
data.put("province", "上海");
data.put("city", "上海");
model.add(data);

data = new HashMap<String, String>();
data.put("province", "广东");
data.put("city", "深圳");
model.add(data);

data = new HashMap<String, String>();
data.put("province", "广东");
data.put("city", "广州");
model.add(data);

return model;
}
}

我们发现，对于表格类型的显示，实际上就是构造一个Map类型的List，每一个map中按照key-value对保存我们的数据，其中key会被adapter用来查找并显示我们的value，最终是value显示在我们的ListView中。

更复杂的单行混合排版界面

现在很多界面设计中列表单行会显示更多的内容，例如下面的图片+名称+描述的形式：

ListItem布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<!-- ListView使用中的每一行显示 -->
<ImageView android:id="@+id/iv_ui_listview_item_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >

<TextView
android:id="@+id/tv_ui_listview_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>

<TextView
android:id="@+id/tv_ui_listview_item_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"/>
</LinearLayout>

</LinearLayout>

我们建立一个实体类用来获取数据：

package com.freesoft.entity.ui;

import java.util.ArrayList;
import java.util.List;

import com.freesoft.android_learning.R;

public class City {
public int img;
public String name;
public String description;

public static List<City> getCities() {
List<City> cities = new ArrayList<City>();

City c1 = new City();
c1.name = "北京";
c1.description = "北京，中华人民共和国首都、直辖市和国家中心城市，中国的政治、文化、科教和国际交往中心，中国经济、金融的决策和管理中心，中华人民共和国中央人民政府和全国人民代表大会所在地，也是中国大陆第二大城市和世界上最大的城市之一。";
c1.img = R.drawable.liehuo_net_001;

City c2 = new City();
c2.name = "上海";
c2.description = "上海（Shanghai），简称“沪”或“申”，中国第一大城市，中华人民共和国直辖市，中国国家中心城市，繁荣的国际大都市，魔幻大都市。";
c2.img = R.drawable.liehuo_net_002;

City c3 = new City();
c3.name = "广州";
c3.description = "广州，简称穗，地处广东中南部，珠江三角洲中北缘，是中国的南大门，中国国家中心城市，国际大都市，国家三大综合性门户城市之一，世界著名的港口城市，国家的经济、金融、贸易、航运和会展中心，中国南方的政治、军事、文化、科教中心，国家综合交通枢纽，社会经济文化辐射力直指东南亚。";
c3.img = R.drawable.liehuo_net_003;

City c4 = new City();
c4.name = "深圳";
c4.description = "深圳（shenzhen）中华人民共和国副省级城市之一，计划单列市，全国文明城市，国际花园城市，是中国四大一线城市之一，国际重要的空海枢纽和外贸口岸。";
c4.img = R.drawable.liehuo_net_004;

cities.add(c1);
cities.add(c2);
cities.add(c3);
cities.add(c4);

return cities;
}

}

Activity代码：

public class ActivityListview extends Activity {
private ListView lv;
private List<City> cities = City.getCities();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui_listview);
// 复杂布局
lv = (ListView) findViewById(R.id.lv_ui_listview);
BaseAdapter adapter = new MyAdapter(this);
lv.setAdapter(adapter);
}

class MyAdapter extends BaseAdapter {
private LayoutInflater inflater;

public MyAdapter(Context c) {
inflater = LayoutInflater.from(c);
}

// 通过convertView+ViewHolder来实现，ViewHolder就是一个静态类，使用 ViewHolder 的关键好处是缓存了显示数据的视图（View），加快了 UI 的响应速度。
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
// 如果缓存convertView为空，则需要创建View
if (convertView == null) {
// 根据自定义的Item布局加载布局
convertView = inflater.inflate(
R.layout.activity_ui_listview_item_v2, null);
holder = new ViewHolder();
holder.name = (TextView) convertView
.findViewById(R.id.tv_ui_listview_item_name);
holder.description = (TextView) convertView
.findViewById(R.id.tv_ui_listview_item_description);
holder.img = (ImageView) convertView
.findViewById(R.id.iv_ui_listview_item_thumbnail);
// 将设置好的布局保存到缓存中，并将其设置在Tag里，以便后面方便取出Tag
convertView.setTag(holder);
} else {
// 取出ViewHolder对象
holder = (ViewHolder) convertView.getTag();
}

holder.name.setText(cities.get(position).name);
holder.description.setText(cities.get(position).description);
holder.img.setImageResource(cities.get(position).img);
return convertView;
}

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

@Override
public Object getItem(int position) {
return cities.get(position);
}

@Override
public int getCount() {
return cities.size();
}
};

/** 存放控件 */
public final class ViewHolder {
public TextView name;
public TextView description;
public ImageView img;
}
}

注意Adapter的getView方法是核心，其中用到了判断convertView是否是null来对视图进行缓存，而不是每次都重新刷新的操作；另一个优化是缓存视图中显示的数据视图(使用ViewHolder)。

带分组的例子

好吧，这个例子比之前的更为复杂，主要实现分组并且小组可以展开的情况。这种情况下我们需要使用到ExpandableListView和ExpandableListAdapter了。为了我们描述简便，我们这里将小组称之为group，小组中的具体对象称之为child。

首先我们看看我们的布局文件，这次要两个item布局，一个是group用的，另外一个是child用的。

ExpandableListView的布局没啥特殊的，就是将ListView换成ExpandableListView：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!-- ExpandableListView使用 -->
<ExpandableListView android:id="@+id/elv_ui_listview"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ExpandableListView>
</LinearLayout>

我们的group布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<TextView android:id="@+id/iv_ui_expandablelistview_item_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="35dp"
android:gravity="center_vertical"
android:singleLine="true"/>
<TextView android:id="@+id/iv_ui_expandablelistview_item_group_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="center_vertical"
android:singleLine="true" />
</LinearLayout>

每个Child的布局是：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<!-- ListView使用中的每一行显示 -->
<ImageView android:id="@+id/iv_ui_expandablelistview_item_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_ui_expandablelistview_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"/>
<TextView
android:id="@+id/tv_ui_expandablelistview_item_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"/>
</LinearLayout>

</LinearLayout>

我们的核心Adapter代码：

package com.freesoft.activity.ui;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.freesoft.android_learning.R;
import com.freesoft.entity.ui.City;

public class MyExpandableListAdapter extends BaseExpandableListAdapter {
private List<String> groupString = new ArrayList<String>();
private Context context;
private List<List<City>> groups;

public MyExpandableListAdapter(Context context, List<List<City>> groups) {
super();
this.context = context;
this.groups = groups;

groupString.add("北京");
groupString.add("上海");
groupString.add("广东");
groupString.add("江苏");

}
@Override
public Object getChild(int groupPosition, int childPosition) {
return groups.get(groupPosition).get(childPosition);
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(context);

ChildViewHolder holder = null;
// 如果缓存convertView为空，则需要创建View
if (convertView == null) {
// 根据自定义的Item布局加载布局
convertView = inflater.inflate(
R.layout.activity_ui_expandablelistview_item_city, null);
holder = new ChildViewHolder();
holder.name = (TextView) convertView
.findViewById(R.id.tv_ui_expandablelistview_item_name);
holder.description = (TextView) convertView
.findViewById(R.id.tv_ui_expandablelistview_item_description);
holder.img = (ImageView) convertView
.findViewById(R.id.iv_ui_expandablelistview_item_thumbnail);
// 将设置好的布局保存到缓存中，并将其设置在Tag里，以便后面方便取出Tag
convertView.setTag(holder);
} else {
// 取出ViewHolder对象
holder = (ChildViewHolder) convertView.getTag();
}

holder.name.setText(groups.get(groupPosition).get(childPosition).name);
holder.description.setText(groups.get(groupPosition).get(childPosition).description);
holder.img.setImageResource(groups.get(groupPosition).get(childPosition).img);
return convertView;
}

@Override
public int getChildrenCount(int groupPosition) {
return groups.get(groupPosition).size();
}
@Override
public Object getGroup(int groupPosition) {
return groups.get(groupPosition);
}
@Override
public int getGroupCount() {
return groups.size();
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
LayoutInflater inflater = LayoutInflater.from(context);

GroupViewHolder holder = null;
// 如果缓存convertView为空，则需要创建View
if (convertView == null) {
// 根据自定义的Item布局加载布局
convertView = inflater.inflate(
R.layout.activity_ui_expandablelistview_item_group, null);
holder = new GroupViewHolder();
holder.groupName = (TextView) convertView
.findViewById(R.id.iv_ui_expandablelistview_item_group);
holder.groupCount = (TextView) convertView
.findViewById(R.id.iv_ui_expandablelistview_item_group_count);
// 将设置好的布局保存到缓存中，并将其设置在Tag里，以便后面方便取出Tag
convertView.setTag(holder);
} else {
// 取出ViewHolder对象
holder = (GroupViewHolder) convertView.getTag();
}

holder.groupName.setText(groupString.get(groupPosition));
holder.groupCount.setText("[" + groups.get(groupPosition).size() + "]");
return convertView;
}
@Override
public boolean hasStableIds() {
// TODO Auto-generated method stub
return false;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
// 这里返回true使得每个child可被点击产生事件。
return true;
}

// group布局中的控件
private class GroupViewHolder {
TextView groupName;
TextView groupCount;
}

// child布局中的控件
public final class ChildViewHolder {
public TextView name;
public TextView description;
public ImageView img;
}

}

我们的Activity代码：

package com.freesoft.activity.ui;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.Toast;

import com.freesoft.android_learning.R;
import com.freesoft.entity.ui.City;

public class ActivityExpandableListview extends Activity implements OnChildClickListener {
private ExpandableListView lv = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ui_expandablelistview);

lv = (ExpandableListView) findViewById(R.id.elv_ui_listview);
MyExpandableListAdapter adapter = new MyExpandableListAdapter(this, getCities());
lv.setAdapter(adapter);
lv.setOnChildClickListener(this);
}

private List<List<City>> getCities() {
List<List<City>> groups = new ArrayList<List<City>>();
List<City> cities = new ArrayList<City>();

City city = new City();
city.name = "北京";
city.description = "北京，中华人民共和国首都、直辖市和国家中心城市，中国的政治、文化、科教和国际交往中心，中国经济、金融的决策和管理中心，中华人民共和国中央人民政府和全国人民代表大会所在地，也是中国大陆第二大城市和世界上最大的城市之一。";
city.img = R.drawable.liehuo_net_001;
cities.add(city);
groups.add(cities);

cities = new ArrayList<City>();
city = new City();
city.name = "卢湾区";
city.description = "卢湾区位于上海市中心，全区面积8.05 平方公里，其中陆地面积7.55平方公里，水域面积0.50平方公里。全区人口31.01万人。区界北至延安中路、金陵西路，与黄浦区、静安区交界；东至西藏南路、肇周路、制造局路、高雄路、江边路，与黄浦区接壤；西至陕西南路、瑞金南路，与静安区、徐汇区为邻；南至黄浦江河道中心线，与浦东新区相望。2011年，上海市卢湾、黄浦两区行政区划调整方案获国务院正式批复，黄浦区、卢湾区两区建制撤销，设立新的黄浦区。";
city.img = R.drawable.liehuo_net_002;
cities.add(city);
city = new City();
city.name = "浦东新区";
city.description = "浦东新区是上海的一个副省级市辖区，南面与奉贤、闵行两区接壤，西面与徐汇、黄浦、虹口、杨浦、宝山五区隔黄浦江相望，北与崇明隔长江相望。在1980年代，“宁要浦西一张床，不要浦东一间房”是当时的共识，黄浦江把上海分成了两个世界：浦西就是上海，浦东只是从外滩遥遥远眺的一片农田菜地。1990年后中国政府进入“开发浦东”的实质阶段，浦东成为上海经济的引擎，亦被誉为中国三个增长极之一，地区面貌日新月异。而先进的国际物流港口，航空运输、铁路轨道运输、城际高速路共同建构水、陆、空三位一体的交通体系，使浦东距世界仅“一步之遥”。2009年因南汇并入浦东新区，郊区面积急剧扩大，大浦东城市化之路依旧漫长。";
city.img = R.drawable.liehuo_net_002;
cities.add(city);
groups.add(cities);

cities = new ArrayList<City>();
city = new City();
city.name = "广州";
city.description = "广州一般指广州（中华人民共和国广东省省会），更多含义请参阅 广州（多义词） 。";
city.img = R.drawable.liehuo_net_003;
cities.add(city);
city = new City();
city.name = "深圳";
city.description = "深圳（shenzhen）中华人民共和国副省级城市之一，计划单列市，全国文明城市，国际花园城市，是中国四大一线城市之一，国际重要的空海枢纽和外贸口岸。";
city.img = R.drawable.liehuo_net_003;
cities.add(city);
groups.add(cities);

cities = new ArrayList<City>();
city = new City();
city.name = "苏州";
city.description = "苏州（Suzhou），中国华东地区的特大城市之一，全国首批历史文化名城，中国十大重点风景旅游城市之一。地处长江三角洲，位于江苏省东南部，古称吴郡。";
city.img = R.drawable.liehuo_net_003;
cities.add(city);
city = new City();
city.name = "无锡";
city.description = "无锡，中国华东地区特大城市之一以及经国务院首次批准的较大的市，位于长江三角洲平原腹地，太湖流域的交通中枢，北倚长江，南濒太湖，东接苏州，西连常州，京杭大运河从中穿过。";
city.img = R.drawable.liehuo_net_003;
cities.add(city);
city = new City();
city.name = "常州";
city.description = "常州位居长江之南、太湖之滨，处于长三角中心地带，与苏州、无锡联袂成片，构成苏锡常都市圈。常州是一座有着3200多年左右历史的文化古城。";
city.img = R.drawable.liehuo_net_003;
cities.add(city);
city = new City();
city.name = "南京";
city.description = "南京一般指南京（江苏省省会），更多含义请参阅 南京（多义词） 。";
city.img = R.drawable.liehuo_net_003;
cities.add(city);
groups.add(cities);

return groups;
}

@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
Toast.makeText(this, "ExpandableListView的" + groupPosition + "组" + childPosition + "个选项被点击", 3).show();
return true;
}

}

最后实体类city代码：

package com.freesoft.entity.ui;

import java.util.ArrayList;
import java.util.List;

import com.freesoft.android_learning.R;

public class City {
public int img;
public String name;
public String description;

}