Android:ListView使用RelativeLayout与TableLayout比较

方法一 : ListView使用RelativeLayout

首先，先来看看本文代码运行的结果，Item多出左边的图标：

 
main.xml的源代码，跟上一篇的一样，这里就不作解释了，直接贴出item.xml的代码，就是它实现ImageItem的UI：

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout   
         android:layout_width="fill_parent"   
         xmlns:android="http://schemas.android.com/apk/res/android"   
         android:layout_height="wrap_content"   
         android:paddingBottom="4dip"   
         android:paddingLeft="12dip">  
         <ImageView   
               android:layout_width="wrap_content"   
               android:id="@+id/itemImage" android:layout_height="fill_parent">   
         </ImageView>  
         <TextView   
               android:text="TextView01"   
               android:layout_height="wrap_content"   
               android:layout_width="fill_parent"   
               android:id="@+id/itemTitle" android:layout_toRightOf="@+id/itemImage" android:textSize="20dip">  
         </TextView>  
         <TextView   
               android:text="TextView02"   
               android:layout_height="wrap_content"   
               android:layout_width="fill_parent"   
               android:id="@+id/itemText" android:layout_toRightOf="@+id/itemImage" android:layout_below="@+id/itemTitle">  
         </TextView>  
</RelativeLayout> 

 
解释一下 item.xml的代码：

这里使用了RelativeLayout布局，控件的关键的属性是：
itemTitle的属性

android:layout_toRightOf="@+id/itemImage" ，itemTitle在itemImage的右边；
itemText的属性

android:layout_toRightOf="@+id/itemImage"，ItemText在itemImage的右边， android:layout_below="@+id/itemTitle"， itemText 在 itemTitle的下面。

最后，贴出JAVA的源代码，其中重点是LayoutInflate的用法。LayoutInflate的使用方法如下：
LayoutInflater的作用是，把一个View的对象与XML布局文件关联并实例化。
View的对象实例化之后，可以通过findViewById()查找布局文件中的指定Id的组件。

package com.testListView;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class testListView extends Activity {
	ListView listView;
	String[] titles={"标题1","标题2","标题3","标题4"};
	String[] texts={"文本内容A","文本内容B","文本内容C","文本内容D"};
	int[] resIds={R.drawable.icon,R.drawable.icon,R.drawable.icon,R.drawable.icon};
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.setTitle("BaseAdapter for ListView");
		listView=(ListView)this.findViewById(R.id.listView1);
		listView.setAdapter(new ListViewAdapter(titles,texts,resIds));
	}

	public class ListViewAdapter extends BaseAdapter {
		View[] itemViews;

		public ListViewAdapter(String[] itemTitles, String[] itemTexts,
				int[] itemImageRes) {
			itemViews = new View[itemTitles.length];

			for (int i = 0; i < itemViews.length; i++) {
				itemViews[i] = makeItemView(itemTitles[i], itemTexts[i],
						itemImageRes[i]);
			}
		}

		public int getCount() {
			return itemViews.length;
		}

		public View getItem(int position) {
			return itemViews[position];
		}

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

		private View makeItemView(String strTitle, String strText, int resId) {
			LayoutInflater inflater = (LayoutInflater) testListView.this
					.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

			// 使用View的对象itemView与R.layout.item关联
			View itemView = inflater.inflate(R.layout.item, null);

			// 通过findViewById()方法实例R.layout.item内各组件
			TextView title = (TextView) itemView.findViewById(R.id.itemTitle);
			title.setText(strTitle);
			TextView text = (TextView) itemView.findViewById(R.id.itemText);
			text.setText(strText);
			ImageView image = (ImageView) itemView.findViewById(R.id.itemImage);
			image.setImageResource(resId);
			
			return itemView;
		}

		public View getView(int position, View convertView, ViewGroup parent) {
			if (convertView == null)
				return itemViews[position];
			return convertView;
		}
	}

}

 

参考地址 : http://blog.csdn.net/hellogv/archive/2009/09/13/4548659.aspx

 

方法二 : ListView使用TableLayout

在我实现此种效果时 , 参考了TableLayout,代码量很多 , 可读性很差 . 贴出来做一个比较(ListView中的条目代码,与上面的item.xml的代码实现的效果类似), 做一个比较:

 

<?xml version="1.0" encoding="utf-8"?>
<!-- @author wang_qs  -->
<!-- @update 相比其他的布局而言,此布局为辅助布局,详见联机交易列表中的SimpleAdapter类  -->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="wrap_content"
	android:paddingBottom="3dip" android:paddingTop="3dip">
	<TableRow android:paddingLeft="5dip">
		<ImageView android:src="@drawable/txn_list_item_pic"
			android:id="@+id/item_image" android:layout_centerHorizontal="true"
			android:paddingLeft="10dip" android:paddingTop="5dip"
			android:paddingBottom="5dip" android:layout_gravity="center"
			android:layout_width="wrap_content" android:layout_height="wrap_content">
		</ImageView>
		<TableLayout android:paddingLeft="8dip">
			<TableRow>
				<TextView android:text="商户名称:"  android:paddingTop="8dip"
					android:layout_centerHorizontal="true" android:textSize="14dip"
					android:layout_width="wrap_content" android:layout_height="wrap_content"
					android:textColor="#000000"></TextView>
				<TextView android:id="@+id/txn_list_item_mernm"
					android:textSize="14dip" android:layout_centerHorizontal="true"
					android:layout_width="wrap_content" android:layout_height="wrap_content"
					android:textColor="#dd6600"></TextView>
			</TableRow>
			<TableRow>
				<TextView android:text="日      期:"
					android:layout_centerHorizontal="true" android:textSize="14dip"
					android:layout_width="wrap_content" android:layout_height="wrap_content"
					android:textColor="#000000"></TextView>
				<TextView android:id="@+id/txn_list_item_date"
					android:layout_centerHorizontal="true" android:textSize="14dip"
					android:layout_width="wrap_content" android:layout_height="wrap_content"
					android:textColor="#dd6600"></TextView>
			</TableRow>
			<TableRow>
				<TextView android:layout_width="wrap_content"
					android:layout_height="wrap_content" android:text="金      额:"
					android:textSize="14dip" android:textColor="#000000">
				</TextView>
				<TextView android:id="@+id/txn_list_item_amt"
					android:paddingRight="2dip" android:paddingLeft="0dip"
					android:textSize="14dip" android:layout_width="wrap_content"
					android:layout_height="wrap_content" android:textColor="#dd6600">
				</TextView>
			</TableRow>
		</TableLayout>
	</TableRow>
</TableLayout>

 

 

代码主要是TableLayout与TableRow,TableLayout和TableLayout的嵌套使用 , 上面代码实现的效果图:

 

 

说明 : 在我代码中改变 , 企图在TableLayout中使用TextView的属性android:layout_toRightOf , 但是没有智能识别 , 但是写上去并不报错 , 或许可以中和上面两种方式实现的第三种布局 , 期待测试中 !!
 

评论

1 楼 kanme818 2012-02-22  

ListView里面如果是嵌套RelativeLayout的时候，如果RelativeLayout的高度和宽度都是fill_parent好像会在onMeasure()时报NullPointException。不知道android:layout_height="wrap_content"这样会不会就不报错了。回去试试看