還記得我們說過 RelativeLayout 是依照彼此的相對位子來對齊

我們先講一下元件對齊的屬性要怎麼打

android:layout_alignParentLeft="true" // 貼齊 parent 的左邊
android:layout_alignParentRight="true" // 貼齊 parent 的右邊
android:layout_alignParentTop="true" // 貼齊 parent 的上面
android:layout_alignParentBottom="true" // 貼齊 parent 的下面
android:layout_centerInParent="true" // 放在 parent 正中心

android:layout_toLeftOf="B" // 自己 去 B 的左邊
android:layout_toRightOf="B" // 自己 去 B 的右邊
android:layout_above="B" // 自己 去 B 的上面
android:layout_below="B" // 自己 去 B 的下面

android:layout_alignLeft="B" // 自己的左邊 貼齊 B 的左邊
android:layout_alignRight="B" // 自己的右邊 貼齊 B 的右邊
android:layout_alignTop="B" // 自己的上面 貼齊 B 的上面
android:layout_alignBottom="B" // 自己的下面 貼齊 B 的下面

第一步：清空程式碼，留下 RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">
</RelativeLayout>
加上五個 Button
<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/Button_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one" />
    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="two" />
    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="three" />
    <Button
        android:id="@+id/Button_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="four" />
    <Button
        android:id="@+id/Button_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="five" />
</RelativeLayout>
利用上面教的語法對齊看看
<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/Button_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true" // 對齊 parent 左邊
        android:layout_alignParentTop="true"  // 對齊 parent 上面
        android:text="one" />
    <Button
        android:id="@+id/Button_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"  // 對齊 parent 上面
        android:layout_toRightOf="@id/Button_one" // 放在 one 的右邊
        android:text="two" />
    <Button
        android:id="@+id/Button_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"    // 對齊 parent 左邊
        android:layout_alignParentBottom="true"  // 對齊 parent 下面
        android:text="three" />
    <Button
        android:id="@+id/Button_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"   // 對齊 parent 右邊
        android:layout_alignParentBottom="true"  // 對齊 parent 下面
        android:text="four" />
    <Button
        android:id="@+id/Button_five"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"  // 放在 parent 正中心
        android:text="five" />
</RelativeLayout>
出個畫面讓大家練習看看
若有任何問題，都歡迎留言詢問哦！！
ConstraintLayout 用程式碼對齊~~
第一步：一樣清空程式碼，只留下 ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>
第二步：讓我們加上隱形的線 ( Guideline )
方法一 : 從這裡選擇 水平 或 垂直的 線( Guildline )
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" // 加上這行
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_50" // id 設為 guildline_50 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"  // 設定水平 或 垂直 的線
        app:layout_constraintGuide_percent="0.5"/> // 螢幕比例  
</androidx.constraintlayout.widget.ConstraintLayout>
設定一條【水平線】比例為【50%】
接著我們創一個 Button 並讓他對齊這條線的上方
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>
    <Button
        android:id="@+id/button_one"  // id 設為 button_one
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"
        // 元件左側對齊 parent 左側
        app:layout_constraintLeft_toLeftOf="parent"  
        // 元件右側對齊 parent 右側
        app:layout_constraintRight_toRightOf="parent" 
        // 元件底部對齊線的上方
        app:layout_constraintBottom_toTopOf="@id/guideline_50"/> 
</androidx.constraintlayout.widget.ConstraintLayout>