Android入門教程 | UI佈局之RelativeLayout 相對佈局

RelativeLayout 簡述

RelativeLayout 繼承於 android.widget.ViewGroup，按照子元素之間的位置關係完成佈局，作為 Android 系統五大布局中最靈活也是最常用的一種佈局方式，非常適合於一些比較複雜的介面設計。

RelativeLayout 和 LinearLayout 類似，都是 ViewGroup，能“容納”多個子view。

RelativeLayout 是一個以相對位置顯示子檢視的檢視組。每個檢視的位置可以指定為相對於同級元素的位置（例如，在另一個檢視的左側或下方）或相對於父級 RelativeLayout 區域的位置（例如在底部、左側或中心對齊）。

子 view 可以是 TextView，Button，或者是 LinearLayout，RelativeLayout 等等。 如果不新增其他配置，它們預設是在 RelativeLayout 的左上角。

在 RelativeLayout 中，子 View 可以根據另一個子 View 來確定位置。 但必須注意的是，RelativeLayout 和它的子 View 不能互相依賴。比如 RelativeLayout 設定高度為 wrap_content，子 View 設定了 ALIGN_PARENT_BOTTOM，這樣你會發現 RelativeLayout 被撐到最大。 RelativeLayout 能消除巢狀檢視組並使佈局層次結構保持扁平化。

屬性介紹

RelativeLayout 屬性：

RelativeLayout 可以指定子檢視相對於父檢視或彼此（由 ID 確定）的位置。因此，可以按照右邊框對齊兩個元素，或者使它們一上一下，螢幕居中，左側居中，等等。預設情況下，所有子檢視均繪製在佈局的左上角，因此必須使用 RelativeLayout.LayoutParams 中提供的各種佈局屬性定義每個檢視的位置。

有很多佈局屬性可用於 RelativeLayout 中的檢視，部分示例包括：

android:layout_alignParentTop

如果為 "true"，會將此檢視的上邊緣與父檢視的上邊緣對齊。

android:layout_centerVertical

如果為 "true"，會將此子級在父級內垂直居中。

android:layout_below

將此檢視的上邊緣放置在使用資源 ID 指定的檢視下方。

android:layout_toRightOf

將此檢視的左邊緣放置在使用資源 ID 指定的檢視右側。

示例:
為了讓UI好看一點，先定義一下樣式，在style.xml檔案中新增一個style。

<style name="RelativeLayoutDemo1Item">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:padding">4dp</item>
    <item name="android:background">@color/colorAccent</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">12sp</item>
</style>

示例1:
在layout中增加RelativeLayout與一些子View。 子View設定了不同的屬性，分佈在父View的上下左右中各個地方。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:text="default" />
        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentEnd="true"
            android:text="layout_alignParentEnd" />
        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_centerInParent="true"
            android:text="layout_centerInParent" />
        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentBottom="true"
            android:text="layout_alignParentBottom" />
        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="layout_alignParentBottom | End" />
    </RelativeLayout>

示例2:
子View可以把另外的子View當做位置依據。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="120dp">
        <TextView
            android:id="@+id/tv1"
            style="@style/RelativeLayoutDemo1Item"
            android:text="天" />
        <TextView
            android:id="@+id/tv2"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv1"
            android:layout_toEndOf="@id/tv1"
            android:text="天" />
        <TextView
            android:id="@+id/tv3"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv2"
            android:layout_toEndOf="@id/tv2"
            android:text="向" />
        <TextView
            android:id="@+id/tv4"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv3"
            android:layout_toEndOf="@id/tv3"
            android:text="上" />
    </RelativeLayout>