[Android UI 設計] [版面布局Layout介紹] RelativeLayout

[Android UI 設計] [版面布局Layout介紹] RelativeLayout

大多數情況下，LinearLayout可以幫助我們解決很多UI的布局，不過版面真得過於複雜時，改用RelativeLayout可以大幅降低Layout程式碼的多寡喔！RelativeLayout改用「相對位置」來決定UI元件的布局方式，也就是藉由描述A元件在B元件的對應位置；或描述A元件對應父元件的對應位置。當A元件對應的元件越多，就可以更精準的描述A元件的確切位置。

RelativeLayout常用屬性
屬性名稱	描述
android:layout_below	放置在某元件的下方
android:layout_above	放置在某元件的上方
android:layout_toLeftOf	放置在某元件的左方
android:layout_toRightOf	放置在某元件的右方
android:layout_alignBottom	對齊某元件的下方
android:layout_alignRight	對齊某元件的右方
android:layout_alignTop	對齊某元件的上方
android:layout_alignLeft	對齊某元件的左方
android:layout_alignParentBottom	是否對齊父元件的下方
android:layout_alignParentLeft	是否對齊父元件的左方
android:layout_alignParentRight	是否對齊父元件的右方
android:layout_alignParentTop	是否對齊父元件的上方
android:layout_centerHorizontal	是否在父元件中水平置中
android:layout_centerInParent	是否在父元件中水平置中且垂直置中
android:layout_centerVertical	是否在父元件中垂直置中

<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"
    android:background="#adc"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp" />

    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_toLeftOf="@+id/button1"
        android:text="CheckBox" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:text="Button" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:src="@drawable/main" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="RelativeLayout"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>