Android ListView控件基本用法以及范例

Android ListView控件基本用法以及范例

设置宽度为填满整个屏幕
android:layout_width="fill_parent"
设置高度适应内部控件的高度
android:layout_height="wrap_content"
设置的排列方式为纵向排列
android:orientation="vertical"
在LinearLayout里嵌套一个ListView控件
设置ListView控件的ID，这个ID为android系统内置ID
ListView android:id="@id/android:list"
设置ListView控件条目被按下时背景颜色在文字背后，设置成True时背景色会覆盖文字
android:drawSelectorOnTop="false"
设置ListView控件滚动条的方向为纵
android:scrollbars="vertical"/>

ListViw控件中的ID (android:id="@id/android:list") 是Android系统内置的ID，不能改为其他。android:drawSelectorOnTop="false" <!-- 当设置为false时条目被按下时背景颜色在文字背后，

设置成True时背景色会覆盖文字 user.xml布局文件代码：
<?xml
version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView android:id="@+id/user_name"

android:layout_width="180dip"

android:layout_height="wrap_content"

android:singleLine="true"

android:textSize="10pt"

android:paddingTop="2dip"

android:paddingLeft="2dip"

/>

<TextView android:id="@+id/user_ip"

android:layout_width="180dip"

android:layout_height="wrap_content"

android:textSize="10pt"

android:singleLine="true"

android:paddingTop="2dip"

android:paddingRight="2dip"

/>

</LinearLayout>
部分代码
/×××××××××××××××××××××××××××××××××××××××/
//生成一个ArrayList类型的变量list

ArrayList<HashMap<String,
String>> list = new ArrayList<HashMap<String,String>>();

//生成两个HashMap类型的变量map1 ， map2

//HashMpa为键值对类型。第一个参数为建，第二个参数为值

HashMap<String,
String> map1 = new HashMap<String,
String>();

HashMap<String, String> map2 = new HashMap<String,
String>();

//把数据填充到map1和map2中。

map1.put("user_name", "张三");

map1.put("user_ip", "192.168.1.52");

map2.put("user_name", "李四");

map2.put("user_ip", "192.168.0.1");

//把map1和map2添加到list中

list.add(map1);

list.add(map2);

//生成一个SimpleAdapter类型的变量来填充数据

SimpleAdapter listAdapter = new SimpleAdapter(this,
list, R.layout.user, new String[]{"user_name", "user_ip"}, new int[]{R.id.user_name
, R.id.user_ip});

//设置显示ListView

setListAdapter(listAdapter);

}
/×××××××××××××××××××××××××××××××××××××××/
Android:ListView
几种常见的用法

方法一 : ListView使用RelativeLayout首先，先来看看本文代码运行的结果，Item多出左边的图标：



main.xml的源代码

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

item.xml源代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- from www.ard8.com -->
<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的属性

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

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

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;
}
}
}

方法二 : ListView使用TableLayout

ListView是比较常用的控件，但一直都觉得创建ListView步骤有点繁琐，故在此总结一下，方便查阅。程序效果是实现一个ListView,ListView里面有标题，内容和图片，并加入点击和长按响应

首先在xml里面定义一个ListView









Xml代码






<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

android:id="@+id/LinearLayout01"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

<ListView android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/ListView01"

/>

</LinearLayout>

定义ListView每个条目的Layout，用RelativeLayout实现：

Xml代码






<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

android:id="@+id/RelativeLayout01"

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"

android:paddingRight="12dip">

<ImageView

android:paddingTop="12dip"

android:layout_alignParentRight="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/ItemImage"

/>

<TextView

android:text="TextView01"

android:layout_height="wrap_content"

android:textSize="20dip"

android:layout_width="fill_parent"

android:id="@+id/ItemTitle"

/>

<TextView

android:text="TextView02"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:layout_below="@+id/ItemTitle"

android:id="@+id/ItemText"

/>

</RelativeLayout>

最后在Activity里面调用和加入Listener,具体见注释：

Java代码






public class TestListView extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

//绑定Layout里面的ListView

ListView list = (ListView) findViewById(R.id.ListView01);

//生成动态数组，加入数据

ArrayList<HashMap<String, Object>> listItem = new ArrayList<HashMap<String, Object>>();

for(int i=0;i<10;i++)

{

HashMap<String, Object> map = new HashMap<String, Object>(); //图像资源的ID

map.put("ItemImage", R.drawable.checked);

map.put("ItemTitle", "Level "+i);

map.put("ItemText", "Finished in 1 Min 54 Secs, 70 Moves! ");

listItem.add(map);

}

//生成适配器的Item和动态数组对应的元素

SimpleAdapter listItemAdapter = new SimpleAdapter(this,listItem,//数据源

R.layout.list_items,//ListItem的XML实现

//动态数组与ImageItem对应的子项

new String[] {"ItemImage","ItemTitle", "ItemText"},

//ImageItem的XML文件里面的一个ImageView,两个TextView ID

new int[] {R.id.ItemImage,R.id.ItemTitle,R.id.ItemText}

);

//添加并且显示

list.setAdapter(listItemAdapter);

//添加点击

list.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,

long arg3) {

setTitle("点击第"+arg2+"个项目");

}

});

//添加长按点击

list.setOnCreateContextMenuListener(new OnCreateContextMenuListener() {

@Override

public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo) {

menu.setHeaderTitle("长按菜单-ContextMenu");

menu.add(0, 0, 0, "弹出长按菜单0");

menu.add(0, 1, 0, "弹出长按菜单1");

}

});

}

//长按菜单响应函数

@Override

public boolean onContextItemSelected(MenuItem item) {

setTitle("点击了长按菜单里面的第"+item.getItemId()+"个项目");

return super.onContextItemSelected(item);

}

}

ListView的数据通常是来自与Internet而进行联网时为了不影响用户体验，还需要增加一个activity
indicator，最好是能有一个Internet aware的adapter，自动加载数据并显示。再加上delegate的方式，显示activity
indicator。

顺便贡献一个ListView相关的东西：ListView不可放入ScrollView中，否则UI效果不可预测。切记切记

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



<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的嵌套使用 , 上面代码实现的效果图。