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布局文件代码:
设置成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>
<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);
}
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);
}
/×××××××××××××××××××××××××××××××××××××××/
方法一 : 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 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 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,具体见注释:
- 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的嵌套使用 , 上面代码实现的效果图。