android ui 多视图 android列表视图

作者：刘昊昱 

列表视图我们会经常用到，可以通过两种方式来创建列表视图，一种方式是直接使用ListView组件创建，另一种方式是通过让Activity继承ListActivity实现。

指定ListView组件的内容有两种方法，一是通过在布局文件中指定数组资源，另一种是通过创建适配器。

下面来看一个使用ListView组件创建列表视图的例子，其内容是通过在布局文件中指定数组资源实现的。该程序运行效果如下：

主布局文件main.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 
        android:id="@+id/listView" 
        android:entries="@array/brands"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"/>

</LinearLayout>

数组资源定义在BrandArray.xml文件中，其内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="brands">
    	<item>苹果</item>
    	<item>三星</item>
    	<item>HTC</item>
    	<item>诺基亚</item>
    	<item>联想</item>
    	<item>华为</item>
    	<item>魅族</item>
    	<item>索尼</item>
    	<item>夏新</item>
    	<item>小米</item>
    	<item>天语</item>
    	<item>中兴</item>
    	<item>其它</item>
    </string-array>
</resources>

主Activity文件内容如下：

package com.liuhaoyu;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final ListView listView=(ListView)findViewById(R.id.listView);
        listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View arg1, int pos,
					long id) {
				String result = parent.getItemAtPosition(pos).toString();
				Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();
			}

		});
    }
}

上面的例子中，ListView组件的内容是通过数组资源指定的，下面看一个通过创建适配器指定ListView组件内容的例子，该程序运行效果如下图所示：

该程序主布局文件main.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 
        android:id="@+id/listView" 
        android:layout_height="wrap_content"
        android:layout_width="match_parent"/>

</LinearLayout>

主Activity文件内容如下：

package com.liuhaoyu;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // 通过在代码中定义数组来创建适配器.
        String[] brand=new String[]{"苹果","三星","HTC","诺基亚","联想","华为","魅族","索尼","夏新","小米","天语","中兴","其它"};
		ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,brand);

		// 也可以使用数组资源来创建适配器，而不是象上面那样在代码中定义 数组。 
//		ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
//				this, R.array.brands,android.R.layout.simple_list_item_1);
		
        final ListView listView=(ListView)findViewById(R.id.listView);
        listView.setAdapter(adapter);
        
        listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View arg1, int pos,
					long id) {
				String result = parent.getItemAtPosition(pos).toString();
				Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();
			}

		});
    }
}

以上是通过ListView组件创建的列表视图，我们前面说过，还有一种创建列表视图的方法是通过让Activity继承ListActivity实现。下面我们来看一个例子，该程序运行效果如下图所示：

该程序的主Activity文件内容如下：

package com.liuhaoyu;

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
     // 通过在代码中定义数组来创建适配器.
        String[] brand=new String[]{"苹果","三星","HTC","诺基亚","联想","华为","魅族","索尼","夏新","小米","天语","中兴","其它"};
		ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,brand);

		// 也可以使用数组资源来创建适配器，而不是象上面那样在代码中定义 数组。 
//		ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
//				this, R.array.brands,android.R.layout.simple_list_item_1);
		        
		setListAdapter(adapter);
    }

	@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
		// TODO Auto-generated method stub
		super.onListItemClick(l, v, position, id);
		String result = l.getItemAtPosition(position).toString();
		Toast.makeText(MainActivity.this, result, Toast.LENGTH_SHORT).show();
	}
    
}

在这个程序中，MainActivity继承了ListActivity，所以本身就具有列表视图的属性。需要注意的一点是，不能像以前的程序那样调用setContentView()方法，如果调用了这个方法，运行时会出错。

 

最后，我们来看一下怎样创建带图标的列表视图。下图是该程序的运行效果：

这个程序需要用到SimpleAdapter类，下面是Android官方网站上到该类的一个介绍：

An easy adapter to map static data to views defined in an XML file. You can specify the data backing the list as an ArrayList of Maps. Each entry in the ArrayList corresponds to one row in the list. The Maps contain the data for each row. You also specify an XML file that defines the views used to display the row, and a mapping from keys in the Map to specific views.

来看一下SimpleAdapter类的构造函数：

public SimpleAdapter (Context context,
List<? extends Map<String, ?>> data, 
int resource, 
String[] from, 
int[] to)

context	The context where the View associated with this SimpleAdapter is running
data	A List of Maps. Each entry in the List corresponds to one row in the list. The Maps contain the data for each row, and should include all the entries specified in "from"
resource	Resource identifier of a view layout that defines the views for this list item. The layout file should include at least those named views defined in "to"
from	A list of column names that will be added to the Map associated with each item.
to	The views that should display column in the "from" parameter. These should all be TextViews. The first N views in this list are given the values of the first N columns in the from parameter

结合以上定义，现在来看一下我们的示例程序的主Activity文件的实现，其内容如下：

package com.liuhaoyu;

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;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ListView listview = (ListView) findViewById(R.id.listView); 
        
		int[] imageId = new int[] { R.drawable.image01, R.drawable.image02,
				R.drawable.image03, R.drawable.image04, R.drawable.image05,
				R.drawable.image06, R.drawable.image07, R.drawable.image08, 
				R.drawable.image09, R.drawable.image10 }; 
		String[] title = new String[] { "时钟", "E-mail", "音乐", "电话", "日历",
				"游戏", "YouTube", "地图", "Google+", "通讯录" }; 
		List<Map<String, Object>> listItems = new ArrayList<Map<String, Object>>(); 
		
		for (int i = 0; i < imageId.length; i++) {
			Map<String, Object> map = new HashMap<String, Object>(); // 实例化Map对象
			map.put("image", imageId[i]);
			map.put("title", title[i]);
			listItems.add(map); 
		}

		SimpleAdapter adapter = new SimpleAdapter(this, 
												listItems,
												R.layout.items, 
												new String[] { "title", "image" }, 
												new int[] {R.id.title, R.id.image }); 
		listview.setAdapter(adapter); 
    }
}

主布局文件main.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 
    	android:id="@+id/listView" 
    	android:layout_height="wrap_content" 
    	android:layout_width="match_parent"/>

</LinearLayout>

另外，根据SimpleAdapter类的要求，我们需要创建一个描述每一行布局的xml文件，这里命名为items.xml，其内容如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<ImageView 
	android:id="@+id/image" 
	android:paddingRight="10px"
	android:paddingTop="20px"
	android:paddingBottom="20px"
	android:adjustViewBounds="true"
	android:maxWidth="72px"
	android:maxHeight="72px"
	android:layout_height="wrap_content" 
	android:layout_width="wrap_content"/>  
 <TextView  
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:padding="10px"
    android:layout_gravity="center"
    android:id="@+id/title"
    />	 
</LinearLayout>