開頭

都 2022 年了，還要教 ConstraintLayout 嗎？因為這是新手教學，XML 還是比較好理解。

架構

XML 主要就是上下對齊，一層層包起來，例如

<androidx.constraintlayout.widget.ConstraintLayout                                                                                              
</androidx.constraintlayout.widget.ConstraintLayout>                                              

如果只有一層不需要包起來，那麼可以用 /> 當結尾，例如下面這樣

<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=".NoteFragment"/>

也可以這樣

<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=".NoteFragment">
    
</androidx.constraintlayout.widget.ConstraintLayout>

排版

在下圖中，我畫了兩個正方形，分別是一綠一藍，然後讓兩個並排

頁面的全部程式碼長這樣

<?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=".NoteFragment">

    <TextView
        android:id="@+id/green"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#008b8b"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/blue"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#4169e1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/green" />
</androidx.constraintlayout.widget.ConstraintLayout>

首先是綠色正方形，因為我要讓他靠在左上方的位置，所以我給他的指令是

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" 

• 第一行的意思是綠色正方形的上方（constraintTop）對齊牆壁（parent）的上方（toTopOf）
• 第二行的意思是綠色正方形的左邊（constraintLeft）對齊牆壁（parent）的左邊（toLeftOf）

然後是藍色正方形，我要讓他在綠色正方形的右邊，所以我給他的指令是

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@+id/green"

• 第一行的意思是藍色正方形的上方（constraintTop）對齊牆壁（parent）的上方（toTopOf）
• 第二行的意思是藍色正方形的左邊（constraintLeft）對齊綠色（@+id/green）的右邊（toRightOf）

所以以此類推，你可以設定它的左邊對齊誰的右邊，或者是他的下面對齊誰的上面之類

然後 Google 建議我們用 Start 取代 Left、End 取代 Right，上面是為了方便教學才用舊版，之後都要用 Start 和 End 了

設定寬高比例

app:layout_constraintDimensionRatio="16:6"

連結比重

app:layout_constraintHorizontal_weight=""
app:layout_constraintVertical_weight=""

連結樣式

app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""

• spread：三個元件平均分配
• spread_inside：左右元件靠牆，中間元件置中
• packed：三個元件置中緊靠