RelativeLayout的基本對齊方式

在RelativeLayout(相對布局)中，每個組件都可以通過ID來指定相對於其它組件或者父組件的位置。

1、通過ID來指定相對於其它組件的位置，組件之間的相對位置關系設置如下： 
android:layout_above 將組件放在指定ID組件的上方 
android:layout_below 將組件放在指定ID組件的下方 
android:layout_toRightOf 將組件放在指定ID組件的左方 
android:layout_toRightOf 將組件放在指定ID組件的右方

比如以下的layout_relative01.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">
    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:layout_toRightOf="@id/button01"
        android:text="按鈕2"      
        ></Button>
</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

按鈕2位於按鈕1的下方，同時，位於按鈕1的右邊，實際效果圖如下： 

2、組件之間的對齊方式： 
android:layout_alignBaseline 將該組件放在指定ID組件進行中心線對齊 
android:layout_alignLeft 將該組件放在指定ID組件進行左邊緣對齊 
android:layout_alignRight 將該組件放在指定ID組件進行右邊緣對齊 
android:layout_alignTop 將該組件放在指定ID組件進行頂部對齊 
android:layout_alignButton 將該組件放在指定ID組件進行底部對齊

比如以下的layout_relative02.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">
    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:layout_alignLeft="@id/button01"     
        android:text="按鈕2"      
        ></Button>
</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

按鈕1位於水平中央，按鈕2位於按鈕1的下方，同時，按鈕2和按鈕1的左邊緣對齊，實際效果圖如下： 

3、當前組件與父布局的對齊方式： 
android:layout_alignParentTop 該組件與父組件進行頂部對齊 
android:layout_alignParentBottom 該組件與父組件進行底部對齊 
android:layout_alignParentLeft 該組件與父組件進行左邊緣對齊 
android:layout_alignParentRight 該組件與父組件進行右邊緣對齊

比如以下的layout_relative03.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">

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:layout_alignParentLeft="true"  
        android:text="按鈕2"      
        ></Button>
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="按鈕3"      
        ></Button>
</RelativeLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

按鈕1與父布局右邊緣對齊，按鈕2與父布局左邊緣對齊，按鈕3與父布局底部對齊，實際效果圖如下： 

4、組件放置的位置： 
android:layout_centerInParent 將該組件放置於水平方向中央及垂直中央的位置 
android:layout_centerHorizontal 將該組件放置於水平方向中央的位置 
android:layout_centerVertical 將該組件放置於垂直方向中央的位置

比如以下的layout_relative04.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">

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="按鈕2"      
        ></Button>
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="按鈕3"      
        ></Button>
</RelativeLayout>

按鈕1位於水平方向中央，按鈕2位於垂直方向中央，按鈕3位於水平方向和垂直方向中央，實際效果圖如下： 

5、在相對布局中，如果想固定一個組件的位置，至少要確定組件的”左右”和”上下”兩個位置，才可以准確地固定組件位置。

下面的layout_relative05.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">

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button01"
        android:text="按鈕2"      
        ></Button>
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:text="按鈕3"      
        ></Button>
</RelativeLayout>

按鈕2位於按鈕1的左邊，按鈕3位於按鈕1的下方，實際效果圖如下： 

這時，我們想在按鈕3的右邊，按鈕2的下方，放置一個按鈕4，有以下的layout_relative06.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">

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button01"
        android:text="按鈕2"      
        ></Button>
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:text="按鈕3"      
        ></Button>
        <Button
        android:id="@+id/button04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button03"
        android:text="按鈕4"      
        ></Button>
</RelativeLayout>

實際效果圖如下： 

可以看到，按鈕4和按鈕2重疊在一起，是因為我們給按鈕4左右方向的位置，沒有給出上下方向的位置，導致按鈕4默認的上下方向為為Top對齊。 
正確的寫法，如下面的layout_relative07.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">

    <Button
        android:id="@+id/button01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按鈕1"      
        ></Button>
    <Button
        android:id="@+id/button02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button01"
        android:text="按鈕2"      
        ></Button>
    <Button
        android:id="@+id/button03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button01"
        android:text="按鈕3"      
        ></Button>
        <Button
        android:id="@+id/button04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button03"
        android:layout_below="@id/button02"
        android:text="按鈕4"      
        ></Button>
</RelativeLayout>

實際效果圖如下：