Android关于页眉（header）和页脚（footer）的布局实例

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

1.简介

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

 

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

我们首先定义一个由页眉，页脚和内容三部分组成的Activity的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
  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" >

  <!-- Header aligned to top -->
  <RelativeLayout
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#AFA7EF"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Header"
      android:textColor="#000000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Footer aligned to bottom -->
  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#6AED83"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Footer"
      android:textColor="#000000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Content below header and above footer -->
  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:layout_below="@id/header"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Content goes here"
      android:textColor="#FFFFFF"
      android:textSize="20sp" />
  </RelativeLayout>

</RelativeLayout>

 我们已经定义了一个相对布局（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重复使用了。

 

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Header"
        android:textColor="#000000"
        android:textSize="20sp" />

</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="Footer"
        android:textColor="#000000"
        android:textSize="20sp" />

</RelativeLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
  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" >

  <!-- Header aligned to top -->
  <include layout="@layout/header" />

  <!-- Footer aligned to bottom -->
  <include layout="@layout/footer" />

  <!-- Content below header and above footer -->
  <RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:layout_below="@id/header"
    android:gravity="center">

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Content goes here"
      android:textColor="#FFFFFF"
      android:textSize="20sp" />
  </RelativeLayout>

</RelativeLayout>

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