实验5：第一个安卓应用

一、实验目标

模仿微信“发现”页创建列表布局，学习使用Textview、imageview、LinearLayout

二、实验步骤

准备工作

首先下载好所需的素材，图标素材提前放进mipmap文件夹中。

页面编写

首先设置一个外部总垂直布局，包含所有的列表数组。用到线性布局<LinearLayout>，让控件在线性方向上依次排列。

创建列表组的父布局，对父布局设置背景色和垂直方向。这里的match_parent是让视图的宽/高被设置为充满整个父布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:background="#e5e5e5"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">

然后在父布局中用几个<LinearLayout>来分别构建每个列表组。

用<LinearLayout>构建第一个列表组，设置好宽高、背景色后，构建<TextView>文本框，设置好字体颜色大小等属性。layout_marginBottom可以设置该组件和下一组件的距离。

    <!--发现页面--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:layout_marginBottom="8dp"android:background="#e5e5e5"android:orientation="horizontal"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:textSize="18dp"android:textColor="#0b1219"android:text="发现"android:gravity="center"android:textStyle="bold"/></LinearLayout>

第一个列表只包含“朋友圈”一个程序，其中包含三个元素，分别是图标、文字和箭头。

首先设置好列表的宽高和背景色，每个程序的元素都是水平排列的，所以设置方向为horizontal。第一个组件<ImageView>用来显示图标图片，第二组件<TextView>用来显示文字，第三个组件<ImageView>用来显示箭头图片。其中center_vertical限定了组件的内容要垂直居中展示。

    <!--第一个列表--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="60dp"android:orientation="horizontal"android:background="#fff"><ImageViewandroid:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/icon_pengyou"  /><TextViewandroid:layout_width="299dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1"android:gravity="center_vertical"android:text="朋友圈"android:textColor="#333"android:textSize="20dp"android:textStyle="bold" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="15dp"android:layout_marginRight="15dp"android:background="@mipmap/right" /></LinearLayout>

第二个列表包含两个小程序，所以在列表中需要两个<LinearLayout>来分别布局两个程序。代码结构和上述差不多，所以不再赘述，一定要注意组件排列方向和各组件之间的位置关系。

    <!--第三个列表--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="120dp"android:background="#fff"android:layout_marginTop="15dp"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="60dp"><ImageViewandroid:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/insurance"  /><TextViewandroid:layout_width="299dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1"android:gravity="center_vertical"android:text="保险"android:textColor="#333"android:textSize="20dp"android:textStyle="bold" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="15dp"android:layout_marginRight="15dp"android:background="@mipmap/right" /></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="60dp"><ImageViewandroid:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="15dp"android:layout_gravity="center_vertical"android:background="@mipmap/shenghuojiaofei"  /><TextViewandroid:layout_width="299dp"android:layout_height="match_parent"android:layout_marginLeft="10dp"android:layout_weight="1"android:gravity="center_vertical"android:text="生活缴费"android:textColor="#333"android:textSize="20dp"android:textStyle="bold" /><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_marginLeft="15dp"android:layout_marginRight="15dp"android:background="@mipmap/right" /></LinearLayout>

这样整个页面设计就完成了。

三、程序运行结果

四、问题总结与体会

本次实验主要学习了线性布局<LinearView>及其各个属性的用法，比较简单。初期是在查询各个属性的用法上花了一些时间，还有在设置控件大小属性时调整了许多遍。这次实验算是对UI界面的初步了解，也为后面的实验打下了一个基础。