1. 案例概述
此案例主要是对ListView列表控件的使用。当应用中包含多项数据,每项数据结构相同,只是内容不同时,可通过列表显示。对于列表中的内容,可以是显示字符串的TextView,也可以是结构较复杂的包含多个控件的容器。
此案例通过列表显示景点的基本信息,单击列表中的某一项后可以查看该景点的详细信息,且图片会徐徐展开。其中所涉及知识点:
- 复杂列表框的构建
- 列表项的事件处理
- 页面的跳转
- 数据的传递
程序运行效果如下:
2.1界面分析
从案例中包含两个界面:
- 一个是用于显示南昌各景点基本信息的主界面;
- 一个是用于显示单个景点详细信息的界面,单击主界面中的某一项后,可以跳转到对应的详细信息界面。
在主页面中,主要包含两个控件,显示标题的TextView以及显示景点信息的ListView。在ListView中,设置了项与项之间的分割线颜色,以及分割线的大小即android:divider和android:dividerHeight属性。列表中每一项又包含三项信息:景点图片、景点名、景点简介,这三项信息整体放在一个水平的线性布局中,其中又嵌套了一个垂直的线性布局,效果如下图所示。
2.2 布局文件代码
主界面布局文件: activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/title"
android:textSize="24sp"
android:background="#ccbbaa"
android:textColor="#ffffff"
android:padding="10dp"
android:gravity="center" />
<ListView
android:id="@+id/scenery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:divider="#aaaaaa"
android:dividerHeight="2dp"
android:gravity="center" />
</LinearLayout>
列表每一项的布局:item.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="75dp"
android:contentDescription="@string/imgInfo" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/brief"
android:layout_width&#