一、实验目标

1、根据提供的布局创建一个 APP首页。

2、学习 ScrollView、RelativeLayout布局。

二、实验步骤

1、简单介绍RelativeLayout（相对布局）

在上一个实验中我们使用了 LinearLayout 布局，结构简单，而且利用 weight 属性可以很好地等比例分割页面，但是当设计的页面比较复杂时，需要多个 LinearLayout 嵌套，降低渲染效率，因此在这个实验中我们使用到了RelativeLayout，即相对布局。

顾名思义，相对布局就是让内部的组件根据其他的兄弟组件或者父容器的位置来确定自己的摆放位置和尺寸。下面简单介绍几种布局：

1.1 相对于父容器来说居中对齐

当希望子组件能在父容器中居中摆放时，有以下三种属性：

• android:layout_centerHorizontal=”true”：水平居中

• android:layout_centerVertical=”true”：垂直居中

• android:layout_centerInParent=”true”：在两个方向都居中

1.2 与父容器对齐

即将组件定位于父布局任意一条边固定距离的位置

• android:layout_alignParentTop=”true”：与父布局的顶端对齐

• android:layout_alignParentBottom=”true”：与父布局的底部对齐

• android:layout_alignParentLeft=”true”：与父布局的左侧对齐

• android:layout_alignParentRight=”true”：与父布局的右侧对齐

当上述对齐属性搭配使用时，就可以实现右上、左下、右中等。

1.3 定位于兄弟组件的相对位置

• android:layout_above=”@id/###”：摆放在 id 为###的上方

• android:layout_below=”@id/***”：摆放在 id 为###的下方

• android:layout_toLeftOf=”@id/***”：摆放在 id 为###的左侧

• android:layout_toRightOf=”@id/***”：摆放在 id 为###的右侧

可以看到这个组件的使用是需要指定 id 的，具体使用方法还没有学习。

上面是一些常见的布局，更多的还是需要我们在设计过程中随时随地现查而来。

2、页面设计

页面上可以分为四个部分：顶部图片模块、顶部菜单模块、待办消息模块和底部Tab按钮，接下来我们一一设计。

2.1 整体实现

整个页面放在一个线性布局当中，顶部图片、菜单以及代办消息放在 ScrollView 下，最后 tab 栏放在线性布局下。整体如下：

对于ScrollView，其内部只能添加一个组件，因此在 ScrollView 组件内，是通过一个 LinearLayout 组件来放下三个内容的，如下：

2.2 顶部图片（首页及背景图）

首页可以看成一个文字模块，宽度继承父亲，文字居中对齐。背景图导入即可，宽度也是继承父亲，加一定的左右边距。

2.3 菜单

菜单栏可以理解为一个水平分布的等分为4个部分的模块，因此使用 LinearLayout布局较为方便，下面给出第一个菜单的实现。

这段代码比较简单，简单地设置了 LinearLayout 组件的一些性质，将其定义为水平布局并分为4个部分，对于每个选择，都占据1部分。设计菜单组件时，看到它是一个上下结构，因此将图片和文字都封装在 RelativeLayout 组件下，这个组件设置为垂直布局，然后放一个ImageView 组件和 TextView 组件就能完成。其它三个选择都相同，代码在文末给出。

2.4 待办

本来实验只要求实现 “待办（10）” 样式，不需要将下面的具体消息复刻，抱着试一试的态度，将它复刻出来，很多东西还是和前端 页设计和微信小程序界面设计不相同的。

2.4.1 待办（10） 更多

这个模块的标题栏是左右结构，可以放在一个水平方向的 LinearLayout中，内容可以用两个 TextView 来放，注意“更多”是右对齐的，因此要设置 android:gravity 为 “right”，整体设置完再加一点左右边距即可，具体代码如下：