使用 ConstraintLayout 打造回應式 UI Android Jetpack 的一部分。

圖 1. 編輯器會在 A 下方顯示檢視區塊 C，但 沒有垂直的限制條件。

圖 2. 檢視畫面 C 現在垂直受到限制 下方的檢視畫面

雖然缺少限制條件不會導致編譯錯誤，但版面配置 編輯器會在工具列中指出缺少限制條件為錯誤。如何查看 錯誤和其他警告，請按一下「顯示警告和錯誤」。 。 為避免缺少限制條件，版面配置編輯器會自動新增 限制 自動連線及推論限制 接著介紹網際網路通訊層 包括兩項主要的安全防護功能

將 ConstraintLayout 新增至專案

如要在專案中使用 ConstraintLayout，請按照下列步驟操作：

1. 確認您已宣告 maven.google.com 存放區 在您的 settings.gradle 檔案中：

   Groovy

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       )
       

   Kotlin

       dependencyResolutionManagement {
         ...
         repositories {
             google()
         }
       }
       

2. 將程式庫新增為模組層級中的依附元件 build.gradle 檔案，如以下範例所示。最新動態 版本可能會與範例不同

   Groovy

   dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
   }
   

   Kotlin

   dependencies {
       implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14")
       // To use constraintlayout in compose
       implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14")
   }
   

3. 在工具列或同步處理通知中，按一下「Sync Project with Gradle」 檔案。

您現在可以使用 ConstraintLayout 建構版面配置。

轉換版面配置

圖 3. 這個選單會將版面配置轉換為 ConstraintLayout。

如要將現有的版面配置轉換為限製版面配置，請按照下列步驟操作：

1. 在 Android Studio 中開啟版面配置，然後按一下底部的「設計」分頁標籤 。
2. 在「Component Tree」視窗中的版面配置上按一下滑鼠右鍵，然後點選 將 LinearLayout 轉換為 ConstraintLayout。

建立新的版面配置

如要建立新的限製版面配置檔案，請按照下列步驟操作：

1. 在「Project」視窗中按一下模組資料夾，然後選取 檔案 >新增 >XML >版面配置 XML。
2. 輸入版面配置檔案的名稱，然後輸入 「androidx.constraintlayout.widget.ConstraintLayout」根層級 代碼。
3. 按一下「Finish」。

新增或移除限制

如要新增限制，請按照下列步驟操作：

1. 將檢視畫面從「Palette」視窗拖曳至編輯器中。

   在 ConstraintLayout 中新增檢視畫面時，檢視畫面會顯示在 定界框，每個邊角和圓形尺寸皆有正方形尺寸調整控點 限制條件。

2. 按一下資料檢視。
3. 執行下列其中一項操作：
   • 按一下限制控點，然後拖曳至可用的錨點。 這個點可以是其他檢視畫面的邊緣、版面配置的邊緣或 規範。請注意，拖曳限制控點時，版面配置 編輯器會顯示可能的連線錨點和藍色疊加層。

   • 點選其中一個「建立連線」。 「Attributes」視窗內「Layout」部分中的按鈕，如下所示 如圖 4 所示

     

     圖 4. 版面配置 「Attributes」視窗部分可讓您建立 連線狀態。

限制條件會在建立時，由編輯器提供 預設邊界來分隔兩個檢視畫面。

建立限制時，請記住下列規則：

• 每個檢視畫面至少須有兩項限制：一個水平和一個
• 你只能在限制控點和錨點之間建立限制 共用同一平面的兩極點直向飛機—左右兩側 檢視檢視區塊時，只能受限於另一個垂直平面，且 基準線只能限制在其他基準。
• 每個限制控點僅能用於單一限制，但 從不同檢視畫面到同一個錨點建立多個限制。

您可以透過下列任一方式刪除限制：

• 點選限制條件，然後按一下「Delete」(刪除)。

• Control 鍵 (在 macOS 上為 Command 鍵後點選) a 限制錨點。限制會變成紅色，表示您可以點選前往 請將其刪除，如圖 5 所示。

  

  圖 5. 紅色限製表示 只要點選即可刪除

• 在「Attributes」視窗的「Layout」部分中，按一下 限制錨點，如圖 6 所示。

  

  圖 6. 按一下限制條件 。

如果您在檢視畫面上新增反對限制，則限制行會變成 就像彈簧彈片一樣，代表敵方的敵人，如影片 2 所示。 當檢視大小設為「固定」時，最明顯的可見效果或「納入內容」 在此情況下，檢視畫面會在限制之間置中。如果要改為 讓檢視畫面延展大小以符合限制 「比對限制」。如果 你想保留目前的大小，但移動檢視畫面不要置中 調整限制偏誤。

您可以使用限制來實現不同類型的版面配置行為，例如： 。

上層位置

將檢視畫面的側邊限制在版面配置的對應邊緣。

在圖 7 中，檢視畫面的左側會連線至 上層佈局。您可以定義與邊緣之間的距離。

圖 7. 水平限制條件， 父系物件

訂單位置

定義兩種檢視畫面的外觀順序：直向或 水平移動

在圖 8 中，B 限制在 A 的右側，C 低於 A。不過，這些限制並不代表對齊，因此 B 可以 仍然上下移動

圖 8. 橫向和直向 限制。

切合需求

將檢視畫面的邊緣對齊另一個檢視畫面的相同邊緣。

在圖 9 中，B 的左側對齊 A 的左側。如果您希望 為了對齊檢視區塊中心，請為兩側建立限制。

如要偏移對齊方式，只要將檢視畫面從限制向內拖曳即可。 舉例來說，圖 10 顯示的 B 的偏移度為 24dp。偏移量為 由受限檢視區塊的邊界定義。

你也可以選取所有要對齊的檢視畫面，然後按一下 對齊 選取對齊類型。

圖 9.水平對齊 限制。

圖 10. 水平偏移 對齊限制。

基準對齊

將某個檢視畫面的文字基準線與其他檢視畫面的文字基準線對齊。

在圖 11 中，B 的第一行與 A 中的文字對齊。

如要建立基準限制，請在要建立的文字檢視區塊上按一下滑鼠右鍵 限制，然後按一下「Show Baseline」。接著按一下文字 並將線條拖曳至另一個基準線。

圖 11. 基準對齊 限制。

限制符合準則

你可以新增垂直或水平的輔助線 而且不會對應用程式使用者顯示。您可以為圓角設計 在版面配置中根據 dp 單位或相對於 版面配置的邊緣

如要建立規範，請按一下「規範」 ，接著按一下新增垂直規範或新增 水平規範。

拖曳虛線即可重新調整位置，然後按一下位於 是切換評估模式的原則

圖 12. 資料檢視受限於 規範。

克服障礙

障礙與準則類似，是一種隱形的線條，您可以任意限制 但障礙不會定義自己的位置。相反地 位置會根據其中的檢視位置移動。這是 如果您想將檢視畫面限制於一組檢視畫面，而非單一檢視畫面 特定資料檢視

例如，在圖 13 的檢視畫面 C 中，C 限制在 障礙障礙設定成「end」(或從右側由左到右) 版面配置) 和檢視畫面 B。障礙會根據 則位於檢視畫面 A 的右側或檢視 B 的最右側。

如要建立障礙，請按照下列步驟操作：

1. 按一下「規範」 然後按一下 [新增垂直列] 新增水平障礙。
2. 在「Component Tree」視窗中，選取要放入的檢視畫面。 並拖曳至障礙元件中
3. 從元件樹狀結構中選取屏障，然後開啟 屬性 視窗，然後設定 barrierDirection。

現在，你可以建立從其他檢視畫面到屏障之間的限制條件。

您也可以將檢視畫面限制在「位於」障礙的 障礙讓所有視野相互對齊 就算您不知道畫面最長或最高

此外，您也可以在障礙物內顯示準則，確保一定程度 障礙物的位置

圖 13. View C 受限於障礙 並隨著檢視畫面 A 和檢視畫面 B 的位置和大小移動。

調整限制偏誤

在檢視畫面的兩邊加入限制後 同一個維度會是「固定」或「包裝內容」時，檢視畫面會置中 預設偏誤為 50% 的兩個限制之間。您可以調整 拖曳「Attributes」視窗中的偏誤滑桿，或是拖曳 如同影片 3 所示

如果您想改為讓檢視畫面延展大小以符合限制， 「比對限制」。

調整檢視大小

圖 14. 選取檢視畫面時 「Attributes」視窗包含以下項目的控制項： 1 種大小比例。 2 刪除限制條件、 3 高度或寬度模式， 4 邊界。 5 限制偏誤。你也可以醒目顯示 只要在版面配置編輯器中點選各個限制條件， 6 限制條件清單。

您可以使用角落控點來調整檢視畫面的大小，但這個程式碼會將 大小 - 檢視區塊不會根據不同的內容或螢幕大小調整大小。目的地： 選取不同的大小模式，按一下任一檢視畫面，然後開啟「Attributes」(屬性) 按一下編輯器右側的視窗

「Attributes」視窗頂端附近的是檢視檢查器， 包括數個版面配置屬性的控制項，如圖 14 所示。這是 僅適用於限製版面配置的檢視畫面。

如要變更高度和寬度的計算方式，請按一下 符號，如圖 14 中加上呼叫 3 符號。 這些符號代表大小模式，如下所示。按一下符號即可切換 切換畫面：

• 固定：在下面的文字方塊指定特定尺寸，或依據 在編輯器中調整檢視畫面大小。
• 納入內容：檢視畫面只會視需要展開至符合其大小的程度 內容。
• layout_constraintWidth

設為 true 即可將水平維度變更為 遵守限制條件。根據預設，小工具設定為 WRAP_CONTENT 不受限制條件限制

• 符合限制條件：檢視畫面會盡可能展開，以符合 。不過， 使用下列屬性和值來修改該行為。這些 屬性只有在將檢視畫面寬度設為「比對限制」時才會生效：
  • layout_constraintWidth_min

    這會取得檢視區塊的最小寬度的 dp 維度。

  • layout_constraintWidth_max

    這會取得檢視畫面最大寬度的 dp 維度。

  然而，如果指定維度只有一個限制，則資料檢視 配合內容展開。同時在高度或寬度上使用此模式 設定大小比例。

將尺寸設為比例

圖 15.檢視畫面設定為 16:9 顯示比例，且 按照高度比例決定寬度

您可以將檢視畫面大小設為比例，例如 16:9，但前提是至少 資料檢視維度設為「比對限制」(0dp)。如要啟用 請點選「切換顯示比例限制」 (摘要) 1)，然後輸入 width:height 比率。

如果寬度和高度都設為「比對限制」可以按一下 切換顯示比例限制：選取做為依據 之間的差異檢視畫面檢查器會指出哪個維度設為 將對應的邊緣與實線連接起來。

舉例來說，如果您將兩邊都設為「比對限制」，按一下 [切換] 顯示比例限制兩次，即可將寬度設為高度的比例。 整個大小取決於檢視畫面的高度，您可以在 如圖 15 所示

調整檢視邊界

如要平均分配檢視畫面的間距，請按一下「邊界」。 並為各個檢視畫面選取預設邊界 版面配置。您對預設邊界所做的任何變更，只會套用至

您可以在「Attributes」視窗中控制每個檢視畫面的邊界： 在代表各項限制條件的行上按一下數字。在圖 14 中 圖說 4 顯示底部邊界已設為 16dp。

圖 16.工具列的邊界 按鈕。

工具提供的所有邊界都是 8dp 的係數，方便檢視畫面對齊 採用 Material Design 的 8dp 正方形格狀版面建議。

使用鏈結控制線性群組

圖 17. 含有 兩項資料檢視

鏈結是藉由雙向連結互相連結的一組檢視畫面 排名限制條件鏈結中的檢視畫面可以分散 垂直或水平方向

圖 18. 每個連鎖店的範例 。

連鎖店的樣式如下：

1. Spread：在邊界發生後，觀看次數會平均分配 同理，此為預設值。
2. 內部範圍：第一個和最終觀看次數分別與 其他部分則平均 發行。
3. Weighted：鏈結設為 spread 或 超出範圍，您可以設定一或多個 「符合限制條件」(0dp)。根據預設，聊天室是 平均分配到每個設為「比對限制條件」的資料檢視但 您可以使用 layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 屬性。 這與下列項目中的 layout_weight 相同： 線性版面配置： 權重值最高的檢視畫面會保留最多空間， 權重相同的檢視畫面都會獲得相同的空間量。
4. 已包裝：計算利潤後，觀看次數就會合併 。您可以調整整個鏈結的偏誤，包括向左、向右、向上或 ，方法是變更鏈結的「head」查看偏誤。

連鎖店的「head」視圖 - 橫向鏈結中最左側的視圖 (由左至右版面配置) 和 垂直鏈結中最頂端的檢視畫面 - 以 XML 定義鏈結樣式。 不過，您可以在「超出範圍」、「超出範圍」、以及 選取鏈結中的任何檢視畫面並按一下鏈結按鈕，以封裝 。

如要建立鏈結，請按照下列步驟操作，如影片 4 所示：

1. 選取所有要納入鏈結中的檢視畫面。
2. 在特定檢視畫面上按一下滑鼠右鍵。
3. 選取「Chains」。
4. 選取「水平置中」或「垂直置中」。

使用鏈結時的注意事項如下：

• 檢視畫面可以同時屬於水平和垂直鏈結，因此您可以 建構靈活的格線版面配置
• 唯有在鏈結中的各端都受到限制時，鏈結才能正常運作 與圖 14 一樣是同一軸上的另一個物件
• 雖然鏈結的方向是垂直或水平， 會造成檢視畫面朝該方向對齊為了爭取在 包含其他限制，例如 對齊限制。

自動建立限制

當您在版面配置中放置這些限制時，並不會對每個檢視畫面新增限制。 您可在版面配置編輯器中將各個檢視畫面移至所需位置，以及 然後按一下「Infer Constraints」(推論限制) 自動建立限制條件

「推論限制」會掃描版面配置，找出效果最好的組合 所有檢視畫面的限制會將檢視畫面限制為目前位置 同時保有彈性您可能需要調整 版面配置可根據您的需求回應不同的螢幕大小和方向。

「自動連線到上層」是您可以啟用的獨立功能。時間 已啟用，且您在父項中新增子項檢視畫面，這項功能會自動 將檢視畫面加入 但僅適用於可將檢視畫面限制於父項的情況 版面配置。自動連線功能不會在版面配置中為其他檢視畫面建立限制。

自動連線功能預設為停用。按一下「啟用」即可啟用 自動連線到上層帳戶 。

主要畫面格動畫

在 ConstraintLayout 中，可以動畫呈現大小變更 方法是使用 ConstraintSet 和 TransitionManager。

ConstraintSet 是輕量物件，代表 其下所有子元素的限制、邊界和邊框間距 ConstraintLayout。將 ConstraintSet 套用至 顯示的 ConstraintLayout，版面配置會更新 所有子項。

如要使用 ConstraintSet 建立動畫，請指定兩個版面配置 檔案，成動畫的開始與結束主要畫面格。即可載入 第二個主要畫面格檔案中的 ConstraintSet，然後將該檔案套用至 目前顯示了ConstraintLayout。

以下程式碼範例顯示如何將單一按鈕移至 。

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

其他資源

ConstraintLayout 用於 向日葵 試用版應用程式