从零开始学android<ListView数据列表显示组件.二十一.>

浏览数：24 / 时间：2015年06月11日
与滚动视图（ScrollView）类似的还有一种列表组件（ListView），可以将多个组件加入到ListView之中以达到组件的滚动显示效果，ListView组件本身也有对应的ListView类支持，可以通过操作ListView类以完成对此组组件的操作，ListView类的继承结构如下所示：
java.lang.Object
? android.view.View
   ? android.view.ViewGroup
    ? android.widget.AdapterView<T extends android.widget.Adapter>
      ? android.widget.AbsListView
         ? android.widget.ListView
public ListView(Context context)
构造
创建ListView类的实例化对象
public void setAdapter(ListAdapter adapter)
普通
设置显示的数据
public ListAdapter getAdapter()
普通
返回ListAdapter
public void setOnItemSelectedListener (AdapterView.OnItemSelectedListener listener)
普通
当选项选中时触发此事件
 
要进行ListView数据的显示就必须使用一个Adapter数据的容器来存储和管理数据
Known Indirect Subclasses（已知的子类）

首先来看下ArrayAdapter<T>
他支持一下集中构造方法
ArrayAdapter<T>(context, textViewResourceId) 传入一个上下文对象，显示方式
ArrayAdapter<T>(context, resource, textViewResourceId)传入一个上下文对象，资源ID，显示方式
ArrayAdapter<T>(context, textViewResourceId, objects)传入一个上下文对象，显示格式，和显示数据（可以为object数组或者object 集合）
ArrayAdapter<T>(context, resource, textViewResourceId, objects)传入一个上下文对象，资源ID，显示格式，和显示数据（可以为object数组或者object 集合）


下面使用前面做过的列子类进行一下简单的讲解
XMl文件
<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</RelativeLayout>
</span>

JAVA文件
<span style="font-size:18px;">package com.example.listview;

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

public class MainActivity extends Activity {
	private ListView listView;
	private final String data[] = { "昵称：风飞雪未扬", "性别：男", "年龄：22岁", "学校：河南大学",
			"系别 ：教育科学学院", "邮箱：[email protected]" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_main);
		listView = (ListView)this.findViewById(R.id.listview);
		listView.setAdapter(new ArrayAdapter<String>(MainActivity.this,
				android.R.layout.simple_list_item_1, data));
		listView.setOnItemClickListener(new OnItemClickListener() {
			
			@Override
			public void onItemClick(AdapterView<?> parents, View view, int position,
					long id) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this, "您选择了"+data[position], Toast.LENGTH_SHORT).show();
			}
		});
		

	}

}
</span>

显示效果






下面来介绍下SimpleAdapter的使用

使用simpleAdapter来实现带标题的LIstVIew效果

构造方法如下：

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

基本的使用方法会在代码中给大家于详细的注释
Xml文件的配置

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

    </ListView>

</RelativeLayout></span>

JAVA文件
<span style="font-size:18px;">package com.example.listview2;


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


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


public class MainActivity extends Activity {
	private final String Title[] = { "昵称：", "性别：", "年龄：", "学校：", "系别 ：", "邮箱：" };// 标题数据
	private final String contents[] = { "风飞雪未扬", "男", "22岁", "河南大学", "教育科学学院",// 内容数据
			"[email protected]" };
	private ListView listView = null;
	ArrayList<Map<String, String>> list = null;


	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_main);
		listView = (ListView) this.findViewById(R.id.listview);
		list = new ArrayList<Map<String, String>>();// 实例化list
		for (int i = 0; i < Title.length; i++) {// for循环向list中增加数据
			Map<String, String> map = new HashMap<String, String>();// 创建map对象
			map.put("title", Title[i]);
			map.put("content", contents[i]);
			list.add(map);// 将map数据增加到list中去
		}
		// 为ListView设置adapter
		listView.setAdapter(new SimpleAdapter(MainActivity.this, // 上下文对象
				list,// List数据
				android.R.layout.simple_list_item_2,// ListView中数据的显示方式
				new String[] { "title", "content" },// 此处的String数据必须与List当中的key值对应
				new int[] { android.R.id.text1, android.R.id.text2 }));// android.R.layout.simple_list_item_2中提供的文本控件
		// android. R.id.text1,android. R.id.text2 这两个属性是由
		// android.R.layout.simple_list_item_2这个系统布局提供的，大家可以尝试里面其他控件的使用
//		为listView中的数据项设置单击事件
		listView.setOnItemClickListener(new OnItemClickListener() {


			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int psition, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this, "您选择了" +Title[psition]+ contents[psition],
						Toast.LENGTH_SHORT).show();//土司提示
			}
		});


	}


}
</span>
效果图：


上面使用的是android自带的显示效果，用户也可以根据自己的需要定制合适的显示效果
下面我们通过自定义的Layout实现图文混排的效果


xml文件

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >


    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" >


    </ListView>


</RelativeLayout></span>

自定义xml文件

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView1"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignLeft="@+id/textView1" />

</RelativeLayout>
</span>


JAVA文件配置

<span style="font-size:18px;">package com.example.lsitview3;

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

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

public class MainActivity extends Activity {

	private final String Title[] = { "昵称：", "性别：", "年龄：", "学校：", "系别 ：", "邮箱：" };// 标题数据
	private final String contents[] = { "风飞雪未扬", "男", "22岁", "河南大学", "教育科学学院",// 内容数据
			"[email protected]" };
	private ListView listView = null;
	private int image[] = { R.drawable.a1, R.drawable.a2, R.drawable.a3,
			R.drawable.a4, R.drawable.a5, R.drawable.a6 };// 设置图片数据
	ArrayList<Map<String, Object>> list = null;// 将第二个参数设置为Object 便于接收其他类型的参数

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.activity_main);
		listView = (ListView) this.findViewById(R.id.listView1);
		list = new ArrayList<Map<String, Object>>();// 实例化list
		for (int i = 0; i < Title.length; i++) {// for循环向list中增加数据
			Map<String, Object> map = new HashMap<String, Object>();// 创建map对象
			map.put("image", image[i]);
			map.put("title", Title[i]);
			map.put("content", contents[i]);
			list.add(map);// 将map数据增加到list中去
		}
		// 为ListView设置adapter
		listView.setAdapter(new SimpleAdapter(MainActivity.this, // 上下文对象
				list,// List数据
				R.layout.custom,// ListView中数据的显示方式
				new String[] { "image","title", "content" },// 此处的String数据必须与List当中的key值对应
				new int[] { R.id.imageView1, R.id.textView1,R.id.textView2 }));// 自定义布局的控件id
		// 为listView中的数据项设置单击事件
		listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int psition, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this,
						"您选择了" + Title[psition] + contents[psition],
						Toast.LENGTH_SHORT).show();// 土司提示
			}
		});
	}

}
</span>

最终效果




BaseAdapter的使用

Known Direct Subclasses(已知子类)
ArrayAdapter<T>, CursorAdapter, SimpleAdapter，ArrayAdapter<T>
由继承关系可见SimpleAdapter，ArrayAdapter<T>都是BaseAdapter的子类

使用BaseAdapter可以轻松实现对数据的显示操作和对数据其他特征的设置，接下来的列子我们局通过BaseAdapter来设置item的背景颜色

结构


xml文件配置

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

    </ListView>

</RelativeLayout>
</span>

自定义xml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="#bed742"
    >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/a1" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignLeft="@+id/textView1"
        android:text="TextView" />

</RelativeLayout>
</span>

JAVA文件的配置
<span style="font-size:18px;">package com.example.listview;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
	private ListView listView;
	private Myadapter adapter;
	private final String titles[] = { "昵称：", "性别：", "年龄：", "学校：", "系别 ：", "邮箱：" };// 标题数据
	private final String contents[] = { "风飞雪未扬", "男", "22岁", "河南大学", "教育科学学院",
			"[email protected]" };// 内容数据

	private int images[] = { R.drawable.a1, R.drawable.a2, R.drawable.a3,
			R.drawable.a4, R.drawable.a5, R.drawable.a6 };// 图片数据

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		listView = (ListView) this.findViewById(R.id.listView1);
		adapter = new Myadapter(this);
		listView.setAdapter(adapter);
		// 设置选项的监听事件
		listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> arg0, View view,
					int position, long id) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this,
						"你选择了：" + titles[position] + contents[position],
						Toast.LENGTH_LONG).show();// 土司提示

			}
		});
	}

	class Myadapter extends BaseAdapter {
		// 定义颜色，这里定义了两种交替显示，读者可以定义任意颜色
		private int color[] = { Color.CYAN, Color.GREEN };

		private Context myContext;

		// 构造方法传递Context对象，也可以使用 getApplicationContext()来获取
		public Myadapter(Context myContext) {

			this.myContext = myContext;
		}

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return titles.length;// 返回列表选项的个数
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return position;// 返回当前位置
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return position;// 返回选中ID
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// 获得颜色数组的id 0或1
			int colorId = position % color.length;

			// 通过缓存convertView,这种利用缓存contentView的方式可以判断如果缓存中不存在View才创建View，如果已经存在可以利用缓存中的View，提升了性能
			if (convertView == null) {
				// 获得View对象
				convertView = LayoutInflater.from(myContext).inflate(
						R.layout.my_adapter_view, null);
			}
			// 获得组件
			ImageView image = (ImageView) convertView
					.findViewById(R.id.imageView1);
			TextView title = (TextView) convertView
					.findViewById(R.id.textView1);
			TextView content = (TextView) convertView
					.findViewById(R.id.textView2);
			// 设置组件信息
			image.setImageResource(images[position]);
			title.setText(titles[position]);
			content.setText(contents[position]);
			convertView.setBackgroundColor(color[colorId]);
			// 返回装载后的view
			return convertView;
		}

	}
}
</span>

最终效果



这样listView与adapter就基本上讲完了，在开发一般只会用到这么多，希望读者好好掌握
以上的所有代码基本都有注释，看不明白的可以在下方留言，我会在第一时间进行回复

下节预报：
SeekBar拖动条组件

从零开始学android<ListView数据列表显示组件.二十一.>,,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢