方法一 : 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 , 但是没有智能识别 , 但是写上去并不报错 , 或许可以中和上面两种方式实现的第三种布局 , 期待测试中 !!