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>

最後的效果和我們之前那種複雜的寫法基本上是相同的，但是重用性更高了：