在上一節中我們講到了 LinearLayout，這也是大家學到的第一個佈局方式。它支援將多個 View 通過線性的方式（水平或垂直）組合起來，其中最實用的就是 weight 屬性，用好 weight 可以讓你的線性佈局更靈活美觀。

然而，在上一節的例子中我們發現，如果需要在多個方向上進行佈局，就要巢狀多個 LinearLayout，可以想象如果我們的 UI 足夠複雜，那麼從工作量和效能上都將是一場噩夢。所以這裡要引出另一種佈局方式——RelativeLayout（相對佈局），很多時候需要巢狀多個 LinearLayout 才能實現的佈局，使用 RelativeLayout 一層就能夠完成。真的有這麼神奇？學完你就知道。

1. RelativeLayout 的特性

顧名思義，相對佈局就是讓內部的 View 根據其他 View 或者 Parent 的位置來確定自己的擺放位置和尺寸。

比如你買了套沙發，你告訴師傅把沙發放到客廳內，面對電視機並且和茶几平行，靠牆擺放。其中沙發就是我們的目標 View，客廳就是 Parent，電視機和茶几就是其他的 View。這樣一來，就能夠準確的確定出你希望擺放的位置。

RelativeLayout 的原理就是這樣，我們可以指定某個 View 相對於它的兄弟 View 而言的擺放位置（比如在 TextView 的左邊 10 dp或者在上面 25 dp），另外也可以指定它在父佈局（RelativeLayout）中的擺放位置。RelativeLayout 應該說是在 Android GUI 設計中最常用的佈局方式，接下來我們來學習一下 RelativeLayout 的具體用法。

2. RelativeLayout 的對齊方式

由於在 LinearLayout 中已經對很多通用屬性做過介紹，如果不清楚可以檢視 7.2 小節的內容，這裡就不在贅述 Layout 的設定項，而著重講解 RelativeLayout 中比較特殊的設定屬性。

注：為了方便學習演示，本節中的示例都預設將 RelativeLayout 的長寬設定成 match_parent，即整個螢幕的顯示區域都是 RelativeLayout。

2.1 居中佈局

當你希望 View 能夠在父佈局中居中擺放時，你可以有以下3種屬性選擇：

• android:layout_centerHorizontal=“true”：

  
  這個屬性會讓你的View在父佈局中水平居中，如上圖中紅色 View 所示，由於 RelativeLayout 佔滿全屏，所以它最終會在螢幕的水平方向上居中顯示。

• android:layout_centerVertical=“true”：
  這個屬性會讓你的View在父佈局中垂直居中，如上圖中黃色 View 所示，它最終會在螢幕的垂直方向上居中顯示。

• android:layout_centerInParent="true"
  看到這裡，聰明的你應該能猜到，接下來就是在兩個方向上居中顯示。沒錯，這個屬效能夠讓你在父佈局中整體居中顯示，如上圖的藍色 View 所示，它最終將擺放在螢幕的正中央。

參考程式碼如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#F75549"
        android:text="centerHorizontal"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="#F1E14D"
        android:text="centerVertical"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#14CEE6"
        android:text="centerInParent"
        android:textSize="20sp" />
</RelativeLayout>

2.2 與父佈局對齊

接下來的幾個屬效能夠將 View 固定在相對於父佈局任意一條邊固定距離的位置。

• android:layout_alignParentTop=“true”：
  使用layout_alignParentTop屬性可以讓你的View與父佈局的頂端對齊，同時由於RelativeLayout的長寬是match_parent，所以最終的效果就是顯示在螢幕的最上方。

• android:layout_alignParentBottom=“true”：
  使用layout_alignParentBottom屬性可以讓你的View與父佈局的底部對齊，最終的效果就是顯示在螢幕的最下方。

• android:layout_alignParentLeft=“true”：
  使用layout_alignParentBottom屬性可以讓你的View與父佈局的左側對齊，最終的效果就是顯示在螢幕的最左側。

• android:layout_alignParentRight=“true”：
  使用layout_alignParentRight屬性可以讓你的View與父佈局的右側對齊，最終的效果就是顯示在螢幕的最右側。

注：以上幾個對齊屬性都可以多個搭配使用，比如我們上圖中的幾個View，分別是右上對齊、左下對齊和右中對齊
參考程式碼如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:background="#F75549"
        android:text="right|top"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:background="#F1E14D"
        android:text="left|bottom"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:background="#14CEE6"
        android:text="right|centerInParent"
        android:textSize="20sp" />
</RelativeLayout>

2.3 將 View 新增到一個兄弟佈局的相對位置

以上是設定 View 與父佈局的相對位置，當 RelativeLayout 中有了 View 之後，我們同樣可以設定 View 與其他兄弟 View 的位置關係。

• android:layout_above="@id/center"：
  這個屬性設定當前 View 擺放在 id 為 center 的 View 的上方。
• android:layout_below="@id/center"：
  設定當前View擺放在 id 為 center 的 View 的下方。
• android:layout_toLeftOf="@id/center"：
  設定當前 View 擺放在 id 為 center 的 View 的左邊。
• android:layout_toRightOf="@id/center"：
  設定當前 View 擺放在 id 為 center 的 View 的右邊。

注：可以看到這個屬性是需要指定一個 id 的，所以我們需要給被依賴的兄弟 View 賦予一個 id。但是要注意的是與賦予 id 時用“+id”不同，在指定兄弟 View 的時候，不需要寫“+id”，即直接寫 id 即可。
參考程式碼如下：

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#FFdddddd"
        android:text="centerInParent"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_centerInParent="true"
        android:background="#F30C5D"
        android:text="above"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_centerInParent="true"
        android:background="#ECEC18"
        android:text="below"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@id/center"
        android:background="#14CEE6"
        android:text="left"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/center"
        android:background="#25EC0F"
        android:text="right"
        android:textSize="20sp" />
</RelativeLayout>

2.4 讓 View 與兄弟 View 對齊

類似與父佈局的對齊方式，你可以使用以下幾個屬性將 View 與一個已有的兄弟 View 對齊。

• android:layout_alignTop="@id/center"：
  設定 View 與 id 為 center 的 View 頂端對齊。
• android:layout_alignBottom="@id/center"
  設定 View 與 id 為 center 的 View 底部對齊。
• android:layout_alignLeft="@id/center"
  設定 View 與 id 為 center 的 View 左側對齊。
• android:layout_alignRight="@id/center"
  設定 View 與 id 為 center 的 View 右側對齊。
• android:layout_alignBaseLine="@id/center"
  設定 View 與 id 為 center 的 View 的基準線對齊。

3. RelativeLayout 的相對距離

在上面的例子中，可以發現我們可以通過屬性設定 View 與 View 之間、View 與父佈局之間的相對位置，但是發現 View 都是貼在一起或者貼著邊的，並不美觀。其實 RelativeLayout 除了可以設定相對位置及對齊方式以外，還可以在此基礎之上設定兩個 View、View 與父佈局之間的間距，設定間距和 LinearLayout 佈局的一樣：

• layout_margin： 設定元素與周圍其他元素的間距，類似的還可以設定單邊的間距：
  • layout_marginRight
  • layout_marginTop
  • layout_marginLeft
  • layout_marginBottom
    注：margin 是可以為負數的，感興趣的同學可以可以自行測試檢視效果

我們在 2.3 小節示例中新增以上四種上下左右間距之後，效果如圖：

4. 小結

本節介紹了更為靈活的佈局方式——RelativeLayout，它的核心是可以任何設定 View 與父佈局、View 與 View 之間的對齊方式及相對位置，並在其基礎之上設定與目標的相對距離，在大多數的實戰場景中，我們會將 LinearLayout 和 RelativeLayout 結合使用，往往會產生意想不到的效果。