androidUI ListView

最新推荐文章于 2023-12-28 19:50:27 发布

iteye_11788

最新推荐文章于 2023-12-28 19:50:27 发布

阅读量72

点赞数

文章标签：移动开发 java ui

本文详细介绍如何使用Android的ListView控件及其自定义适配器BaseAdapter。从创建数据集、设计Item布局到实现适配器，包括使用LayoutInflater加载布局及设置组件属性等步骤均有详述。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ListView是一个经常用到的控件，ListView里面的每个子项Item可以使一个字符串，也可以是一个组合控件。先说说ListView的实现：

1.准备ListView要显示的数据；

2.使用一维或多维 动态数组 保存数据；

2.构建适配器 ，简单地来说，适配器就是 Item数组 ， 动态数组 有多少元素就生成多少个Item；

3.把 适配器 添加到ListView,并显示出来。

接下来，看看本文代码所实现的ListView:

接下来，就开始UI的XML代码：

main.xml代码如下，很简单，也不需要多做解释了：

view plain copy to clipboard print ?

<?xmlversion="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">
<ListViewandroid:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/MyListView">
</ListView>
</LinearLayout>

<?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/MyListView"> </ListView> </LinearLayout>

my_listitem.xml的代码如下，my_listitem.xml用于设计ListView的Item：

view plain copy to clipboard print ?

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="wrap_content"
android:id="@+id/MyListItem"
android:paddingBottom="3dip"
android:paddingLeft="10dip">
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/ItemTitle"
android:textSize="30dip">
</TextView>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/ItemText">
</TextView>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="wrap_content" android:id="@+id/MyListItem" android:paddingBottom="3dip" android:paddingLeft="10dip"> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/ItemTitle" android:textSize="30dip"> </TextView> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/ItemText"> </TextView> </LinearLayout>

解释一下，里面用到的一些属性：

1.paddingBottom="3dip"，Layout往底部留出3个像素的空白区域

2.paddingLeft="10dip"，Layout往左边留出10个像素的空白区域

3.textSize="30dip"，TextView的字体为30个像素那么大。

最后就是JAVA的源代码：

view plain copy to clipboard print ?

publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//绑定XML中的ListView，作为Item的容器
ListViewlist=(ListView)findViewById(R.id.MyListView);
//生成动态数组，并且转载数据
ArrayList<HashMap<String,String>>mylist=newArrayList<HashMap<String,String>>();
for(inti=0;i<30;i++)
{
HashMap<String,String>map=newHashMap<String,String>();
map.put("ItemTitle","ThisisTitle.....");
map.put("ItemText","Thisistext.....");
mylist.add(map);
}
//生成适配器，数组===》ListItem
SimpleAdaptermSchedule=newSimpleAdapter(this,//没什么解释
mylist,//数据来源
R.layout.my_listitem,//ListItem的XML实现
//动态数组与ListItem对应的子项
newString[]{"ItemTitle","ItemText"},
//ListItem的XML文件里面的两个TextViewID
newint[]{R.id.ItemTitle,R.id.ItemText});
//添加并且显示
list.setAdapter(mSchedule);
}

以上讲的是如何制作一个具有两行文本的自定义控件，作为ListView的Item的使用方法。这篇接下来也是围绕ListView和Item，更加深入地介绍它们的用法。

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

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

view plain copy to clipboard print ?

<?xmlversion="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>

<?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的组件。

view plain copy to clipboard print ?

packagecom.testListView;
importandroid.app.Activity;
importandroid.content.Context;
importandroid.os.Bundle;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.BaseAdapter;
importandroid.widget.ImageView;
importandroid.widget.ListView;
importandroid.widget.TextView;
publicclasstestListViewextendsActivity{
ListViewlistView;
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
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
this.setTitle("BaseAdapterforListView");
listView=(ListView)this.findViewById(R.id.listView1);
listView.setAdapter(newListViewAdapter(titles,texts,resIds));
}
publicclassListViewAdapterextendsBaseAdapter{
View[]itemViews;
publicListViewAdapter(String[]itemTitles,String[]itemTexts,
int[]itemImageRes){
itemViews=newView[itemTitles.length];
for(inti=0;i<itemViews.length;i++){
itemViews[i]=makeItemView(itemTitles[i],itemTexts[i],
itemImageRes[i]);
}
}
publicintgetCount(){
returnitemViews.length;
}
publicViewgetItem(intposition){
returnitemViews[position];
}
publiclonggetItemId(intposition){
returnposition;
}
privateViewmakeItemView(StringstrTitle,StringstrText,intresId){
LayoutInflaterinflater=(LayoutInflater)testListView.this
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//使用View的对象itemView与R.layout.item关联
ViewitemView=inflater.inflate(R.layout.item,null);
//通过findViewById()方法实例R.layout.item内各组件
TextViewtitle=(TextView)itemView.findViewById(R.id.itemTitle);
title.setText(strTitle);
TextViewtext=(TextView)itemView.findViewById(R.id.itemText);
text.setText(strText);
ImageViewimage=(ImageView)itemView.findViewById(R.id.itemImage);
image.setImageResource(resId);
returnitemView;
}
publicViewgetView(intposition,ViewconvertView,ViewGroupparent){
if(convertView==null)
returnitemViews[position];
returnconvertView;
}
}
}

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