zmmzmm 2013-05-07
ListView广泛应用于Android应用软件开发中,比如新浪微博Android客户端中使用ListView显示微博列表。市面上各种Android开发书籍,包括国外引进的教程,大多没有仔细讲解ListView的个性化应用。本篇博文详细介绍基于BaseView使用ListView。
本项目基于Eclipse Juno+Android 4.2开发环境,当然Android 2.1之类的低版本也可以运行本项目程序,因为ListView并不是Android3.0或者4.0才引入的新特性。
1、新建一个Android开发项目,这里项目名为TestListView,默认生成即可。
2、找到项目自带的activity_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" > <ListView android:id="@+id/showActressListView" android:layout_height="fill_parent" android:layout_width="fill_parent" /> </LinearLayout>
在一个线性布局中,添加一个ListView控件,让这个空间占满整个屏幕。
3、找几张图片,放到res/drawable-mdpi目录下,当然也可以放在其他存放图片的目录下,这里我选择了几张以前很红的日本爱情动作片女演员照片,你如果都没听说过?那么你肯定不是一个好的陈絮媛,一个好的陈絮媛肯定是宅男,宅男能不爱女优?
4、在res/layout下新建一个xml文件,用来存放ListView每一行的布局,内容如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/imgActressImageView" android:layout_width="80dip" android:layout_height="80dip" android:layout_marginLeft="5dip" android:layout_marginTop="10dip" android:layout_marginBottom="5dip" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:id="@+id/nameActressTextview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15sp" android:textColor="#424952" android:layout_marginTop="10dip" /> <TextView android:id="@+id/infoActressTextview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#f7a200" android:textSize="12sp" /> </LinearLayout> <RelativeLayout android:id="@+id/detailLayout" android:layout_height="fill_parent" android:layout_width="fill_parent" > <Button android:id="@+id/detailActressButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" /> </RelativeLayout> </LinearLayout>
这个布局也很简单,就是一个线性布局。在这个线性布局中有三个子布局,第一个是一个图片控件,第二个是一个线性布局,用来存放女优的名字和个人信息,第三个是一个相对布局,用来存放一个按钮,点击这个按钮可以显示女优的详细信息,这个按钮的响应代码没有编写,因为它不是本文重点。
5、基于BaseAdapter派生一个自己的Adapter类,然后用这个自定义的Adapter作为ListView的数据来源。代码如下:
class ListViewAdapter1 extends BaseAdapter { private Context context; private LayoutInflater listContainer; public final class ListItemView{ public ImageView image; public TextView name; public TextView info; public Button detail; } public ListViewAdapter1(Context context){ this.context = context; listContainer = LayoutInflater.from(context); } @Override public int getCount() { // TODO Auto-generated method stub return 6; } @Override public Object getItem(int position) { // TODO Auto-generated method stub return null; } @Override public long getItemId(int position) { // TODO Auto-generated method stub return 0; } public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub ListItemView listItemView = null; if(convertView == null) { listItemView = new ListItemView(); convertView = listContainer.inflate(R.layout.listview_line, null); //获得控件对象 listItemView.image = (ImageView)convertView.findViewById(R.id.imgActressImageView); listItemView.name = (TextView)convertView.findViewById(R.id.nameActressTextview); listItemView.info = (TextView)convertView.findViewById(R.id.infoActressTextview); listItemView.detail = (Button)convertView.findViewById(R.id.detailActressButton); //设置控件集到convertView convertView.setTag(listItemView); } else { listItemView = (ListItemView)convertView.getTag(); } listItemView.image.setImageResource(MainActivity.picActress[position]); listItemView.name.setText(MainActivity.nameActress[position]); listItemView.info.setText(MainActivity.infoActress[position]); listItemView.detail.setText("详细信息"); return convertView; } }
代码也很简单,基于BaseAdapter类自定义一个Adapter必须实现几个方法,在新建Java类的时候,强大的Eclipse会自动生成要实现的几个函数,我们只需要填写代码就行了,这里关键就是一个getView函数,其他的几个函数都很简单。实现这个函数,也是有固定的模式的,照例写就行了。
6、在活动的onCreate函数中,将生成一个自定义Adapter类对象,然后将这个对象设置为ListView的数据源,这样全部工作就完成了。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listViewAdapter = new ListViewAdapter1(this); actressList = (ListView)this.findViewById(R.id.showActressListView); if(actressList != null) actressList.setAdapter(listViewAdapter); }
差点忘了,还没有定义数据,这些数据定义在本项目的唯一一个活动中,代码如下:
public static int[] picActress = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6 }; public static String[] nameActress = { "小泽玛利亚", "苍井空", "松岛枫", "朝美穗香", "吉泽明步", "神谷姬" }; public static String[] infoActress = { "162cm 1986-01-08 \nB90E-W60-H85", "155cm 1983-11-11 \nB90G-W58-H83", "160cm 1982-11-17 \nB85D-W58-H84", "153cm 1982-05-19 \nB82B-W59-H84", "162cm 1984-03-03 \nB86E-W58-H86", "162cm 1985-05-24 \nB83C-W55-H80" }; private ListView actressList; private ListViewAdapter1 listViewAdapter;
运行程序,在虚拟手机和真机上都测试成功,界面如下: