Adroid平台开发：创建自定义列表布局

OPhone平台开发：创建自定义列表布局作者介绍：李建，乐成数字通信学院高级讲师。

曾就职于国内数家SP，CP公司，具有丰富的软件、游戏开发经验。

并从事多年教学工作，具有丰富的教学经验。

目前主要从事OPhone、J2ME开发和教学方面的工作。

概述：在我们设计的软件中，很多时候需要以列表的形式显示一些信息，要实现这样的功能，OPhone API给我们提供了非常方便的ListView控件和ListActivity用来显示列表信息，但有的时候这些控件并不能满足于我们程序开发的需要，因此，就需要我们定义自己的列表界面。

实际上在OPhone中，设计自己的列表界面和内容十分简单和方便，下面将一步步地进行介绍如何来创建和使用自定义列表项，在这个例子中，我们将实现如下图所示的效果：要实现上图效果我们需要建立三个类：一个Activity，一个数据类ListContent和一个列表类MyAdapter。

下面进行主界面的设计工作。

目前这个版本的OPhone在界面可视化设计方面似乎还做的不够完善，暂时还不能实现类似VB、Delphi、C#那样的拖拽设计界面的功能，因此在界面的设计上，需要程序员通过定义xml文件的方式来布局和摆放空间的大小和位置，当然，我们可以通过使用不同类型的布局管理器来对各个控件进行布局以，以达到很好的自适应效果。

首先我们来设计这个示例程序的主界面：在res/layout里新建一个news_list_form_title.xml文件，在该界面中我们使用LinearLayout布局，并在该布局管理器中添加如下几个控件：∙ ImageView：一个图片控件，其功能就是用来显示一幅图片，此处我们用他来显示如下所示的图片λ∙ ImageView：作用同上，此处用来显示如下图图片：λ分别用两张图片的原因是我们可以在下面的图片上设置不同的文字内容。

注意：原始图片需要放置到res/drawable目录中，且文件的命名为【0-9】或者【a-z】的组合。

λListView：列表控件，用来显示所有的列表项内容，我们在图1中看到的列表项就是通过该空间表现出来的。

这三个控件的顺序及其与布局管理的关系如下图所示：news_list_form_title.xml文件的代码可以参考如下范例：1.<?xml version="1.0" encoding="utf-8"?>2.3.<LinearLayout android:id="@+id/LinearLayout01"4. android:layout_width="fill_parent" android:layout_height="fill_parent"5. xmlns:android="/apk/res/android"6. android:orientation="vertical">7.8. <ImageView android:id="@+id/ImageView01"9. android:layout_width="wrap_content"10. android:layout_height="wrap_content"11. android:background="@drawable/form_title">12. </ImageView>13. <ImageView android:id="@+id/ImageView02"14. android:layout_width="wrap_content"15. android:layout_height="wrap_content"16. android:background="@drawable/form_news">17. </ImageView>18. <ListView android:id="@+id/ListView01"19. android:layout_width="fill_parent"20. android:layout_height="wrap_content" android:dividerHeight="2dip">21. </ListView>22.</LinearLayout>注意：上面代码中加粗及高亮部分代表列表项之间分割线的粗细程度，此处使用“dip”作为其衡量单位。

设置好控件的位置和内容后，其效果将如下图所示：列表项的设计：接下来我们要定义ListView界面的内容，在这里我们设计列表中的每项需要容纳三块内容：标题（title），描述（description）和图标（icon）。

对于界面的设计此处仍然是在res/layout 里新建一个文件，名字定义为news_list.xml，此界面最终的效果如下图所示：要实现这样的效果，我们需要使用如下几个控件：ImageView：用来显示上图中最左面的图标。

λTextView：一个文本控件，其实质就是一个Label，用来显示不能被编辑的文本内容，此处用来显示标题内容。

λTextView：作用同上，此处用来显示描述信息。

λ注意：我们可以更改TextView显示字体的颜色文本和样式。

这三个控件和对应的布局管理器的关系如下图所示：实现该界面的xml文件可以参考如下代码：1.<?xml version="1.0" encoding="utf-8"?>2.3.<LinearLayout android:id="@+id/LinearLayout01"4. android:layout_width="fill_parent"5.android:layout_height="fill_parent"6. xmlns:android="/apk/res/android"7. android:orientation="horizontal">8.9. <ImageView android:layout_width="wrap_content"10. android:layout_height="wrap_content"11. android:background="@drawable/news_icon"12. android:id="@+id/news_icon" android:layout_marginLeft="5dip"13.android:layout_marginTop="5dip"14.android:layout_marginBottom="5dip">15. </ImageView>16. <LinearLayout android:id="@+id/LinearLayout03"17. android:layout_width="fill_parent"18. android:layout_height="wrap_content"19.android:orientation="vertical"20. android:layout_weight="1">21. <TextView android:text="title" android:id="@+id/title"22. android:layout_width="wrap_content"23. android:layout_height="wrap_content"24.android:textStyle="bold"25. android:textSize="25dip" android:layout_marginLeft="5dip"26.android:textColor="@color/white">27. </TextView>28. <TextView android:text="description"29. android:layout_width="wrap_content"30.android:layout_height="wrap_content"31.android:id="@+id/description"32. android:textSize="20dip" android:layout_marginLeft="5dip">33. </TextView>34. </LinearLayout>35.</LinearLayout>数据类的定义：定义好界面之后我们就可以开始写代码了。

由于列表中的每项需要容纳三块内容：标题（title），描述和图标，定义好内容后，就需要建立一个数据类用来描述列表中每一项的具体内容，我们把该数据类命名为ListContent。

在这个类中定义三个属性，title，description，icon，同时分别定义设置和获取属性值的set**( )和get**( )方法。

列表类MyAdapter的实现：定义数据类之后就需要定义列表项类MyAdapter，这个类需要继承BaseAdapter。

对于BaseAdapter这个类我们可以查阅API文档，其实它的作用就是用来显示列表中每一项所包含的具体内容。

注意：BaseAdapter是一个抽象类，因此继承需要实现4个抽象方法。

方法列表如下图所示：该类代码如下所示：1.public class MyAdapter extends BaseAdapter2.{3. private LayoutInflater mInflater;4. // 保存所有文章信息的列表5. private List<ListContent> newsList;6.7. //MyAdapter的构造器8. public MyAdapter(Context context, List<ListContent> list)9. {10. // 参数初始化11. mInflater = LayoutInflater.from(context);12. this.newsList = list;13. }14. //因继承BaseAdapter，需覆盖以下方法15. public int getCount()16. {17. return newsList.size();18. }19. public Object getItem(int position)20. {21. return newsList.get(position);22. }23. public long getItemId(int position)24. {25. return position;26. }27. public View getView(int position, View convertView, ViewGroup parent)28. {29. return convertView;30. }31.}注意：上面的代码中有两个变量需要解释一下：1. LayoutInflater：用来把xml描述的界面转换为View对象，以便我们能提取出该界面中的各个控件对象。