文章目錄

• 簡介
• 重要屬性
• 示例
• 注意

簡介

相對佈局可以讓子控制元件相對於兄弟控制元件或父控制元件進行佈局，可以設定子控制元件相對於兄弟控制元件或父控制元件進行上下左右對齊。
RelativeLayout能替換一些巢狀檢視，當我們用LinearLayout來實現一個簡單的佈局但又使用了過多的巢狀時，就可以考慮使用RelativeLayout重新佈局，來優化檢視層級巢狀。

重要屬性

相對佈局中使用的屬性分為相對父控制元件位置、子控制元件間相對位置、子控制元件在父控制元件中居中三大類。

• 相對父控制元件位置

android:layout_alignParentTop       取值布林值，控制元件的頂部與父控制元件的頂部對齊
android:layout_alignParentBottom 	取值布林值，控制元件的底部與父控制元件的底部對齊
android:layout_alignParentLeft      取值布林值，控制元件的左部與父控制元件的左部對齊
android:layout_alignParentRight     取值布林值，控制元件的右部與父控制元件的右部對齊

• 子控制元件間相對位置(指定控制元件id)
  例如：android:layout_above=“@id/**”

android:layout_above 				控制元件的底部置於給定ID的控制元件之上
android:layout_below          		控制元件的底部置於給定ID的控制元件之下
android:layout_toLeftOf      	    控制元件的右邊緣與給定ID的控制元件左邊緣對齊
android:layout_toRightOf    		控制元件的左邊緣與給定ID的控制元件右邊緣對齊
android:layout_alignBaseline  		控制元件的baseline與給定ID的baseline對齊
android:layout_alignTop        		控制元件的頂部邊緣與給定ID的頂部邊緣對齊
android:layout_alignBottom  	 	控制元件的底部邊緣與給定ID的底部邊緣對齊
android:layout_alignLeft       		控制元件的左邊緣與給定ID的左邊緣對齊
android:layout_alignRight      		控制元件的右邊緣與給定ID的右邊緣對齊
 

• 子控制元件在父控制元件中居中

android:layout_centerHorizontal     取值布林值，水平居中
android:layout_centerVertical       取值布林值，垂直居中
android:layout_centerInParent       取值布林值，父控制元件的中央

示例

• 效果1

xml佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"//對齊父控制元件頂部
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"//對齊父控制元件右邊
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"//對齊父控制元件底部
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"//對齊父控制元件右邊
        android:layout_alignParentBottom="true"//並且對齊父控制元件的底部
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_centerInParent="true"//父控制元件居中
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />

</RelativeLayout>

• 效果2

這種效果相對佈局很容易實現

xml佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#00FF78"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"//對齊父控制元件頂部
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/tv_hint"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"//對齊父控制元件右邊
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_toLeftOf="@id/tv_hint"//在id為tv_hint的左邊
        android:background="@mipmap/ic_launcher" />
</RelativeLayout>

注意

相對佈局id的引用問題

示例xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#00FF78"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentTop="true"//對齊父控制元件頂部
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />
        
   <ImageView
	   android:layout_width="wrap_content"
	   android:layout_height="40dp"
	   android:layout_toLeftOf="@id/tv_hint"//注意此處引用id為tv_hint,但這個id在下面的TextView中建立
	   android:background="@mipmap/ic_launcher" />
	        
    <TextView
        android:id="@+id/tv_hint" //此處建立id為tv_hint
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:background="#aaaaaa"
        android:gravity="center"
        android:text="HelloWorld"
        android:textSize="20sp" />
</RelativeLayout>

上面的xml中ImageView希望在TextView的左邊，但是ImageView寫在了TextView的上面，引用了下面TextView的id，這個問題我最近遇到了，我的R檔案無法生成一直報錯，但是android studio沒給提示，很頭疼。這個問題在不同的環境上不一樣，我在自己的電腦上執行沒有任何問題，但是還是要注意，最好寫在要引用id下面，防止被坑。