在这个教程中，我们将创建一个页眉与页脚的布局实例。

1.简介

当我们设计一套UI时，组件重用是一个非常重要的概念。Android程序也是如此。在这个实例中我们创建的Android的Activity将由三个重要组件构成，分别是页眉，页脚和内容。当然，页眉与页脚将会被定义为可重用组件。

2.关于页眉与页脚的布局

我们首先定义一个由页眉，页脚和内容三部分组成的Activity的布局文件: <?xml version="1.0" encoding="utf-8"?>

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent" >

android:id="@+id/header"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:background="#AFA7EF"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:text="Header"

android:textColor="#000000"

android:textSize="20sp" />

android:id="@+id/footer"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="#6AED83"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:text="Footer"

android:textColor="#000000"

android:textSize="20sp" />

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_above="@id/footer"

android:layout_below="@id/header"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Content goes here"

android:textColor="#FFFFFF"

android:textSize="20sp" />

我们已经定义了一个相对布局(RelativeLayout)作为我们Activity的主布局，然后，又定义了三个相对布局(RelativeLayout)用来放置页眉，页脚和内容。

放置页眉的相对布局我们定义其ID为header(id=”@+id/header”)。并为其设置属性为layout_alignParentTop的值true，这个属性可以使该布局一直与其父元素的顶部对齐。

放置页脚的相对布局我们定义其ID为footer(id=”@+id/footer”)。并为其设置属性为layout_alignParentBottom的值true，这个属性可以使该布局一直与其父元素的底部对齐。

放置内容的相对布局我们定义了两个属性，使其可以一直处在页眉与页脚的中间，这两个属性是layout_below=”@id/header”和layout_above=”@id/footer”

这里需要注意的是，我把放置内容的RelativeLayout放置在了整个布局的最下端，这是因为我们用到了layout_above=”@id/footer”这个属性，所以我们必须先定义页脚的相对布局之后，才能定义我们的内容的相对布局，不然我们的布局文件会出问题。

加载好我们的程序后，会出现如下布局：

3.组件重用

本教程的关键就在这里了，现在，我们将设置页眉和页脚组件作为单独的布局文件，于是我们就可以中一次定义，并在在多个Activity重复使用了。

首先，我们把关于页眉的相对布局单独拿出来作为一个独立布局文件：

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/header"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:background="#AFA7EF"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:text="Header"

android:textColor="#000000"

android:textSize="20sp" />

然后，我们把页脚作为一个独立的布局文件定义：

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/footer"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:background="#6AED83"

android:gravity="center" >

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:text="Footer"

android:textColor="#000000"

android:textSize="20sp" />

最后，我们使用include标签将页眉与页脚融入到我们的任何一个Activity的布局文件中去：

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent" >

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_above="@id/footer"

android:layout_below="@id/header"

android:gravity="center">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Content goes here"

android:textColor="#FFFFFF"

android:textSize="20sp" />

最后的效果和我们之前那种复杂的写法基本上是相同的，但是重用性更高了：