1. 程式人生 > 其它 >Android入門教程 | UI佈局之RelativeLayout 相對佈局

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>

RelativeLayout 相對佈局入門視訊參考