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

試用 Compose
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中使用版面配置。
Compose 中的 ConstraintLayout →

ConstraintLayout敬上 能讓您使用平面檢視區塊階層建立複雜的大型版面配置。 巢狀檢視區塊群組。這個 API 與 RelativeLayout敬上 因為所有視圖都是根據同層級檢視之間的關係 和上層版面配置，卻比 RelativeLayout 更有彈性 也更容易與 Android Studio 的版面配置編輯器搭配使用

ConstraintLayout 的所有功能皆可直接從 版面配置編輯器的視覺工具 為彼此量身打造您可以運用 即可完全以拖曳的方式ConstraintLayout，而不要編輯 XML

本頁面說明如何在以下位置使用 ConstraintLayout 建構版面配置： Android Studio 3.0 以上版本。如要進一步瞭解版面配置編輯器， 請參閱「使用版面配置編輯器打造 UI」。

如要查看您可以使用 ConstraintLayout 建立的各種版面配置，請採取下列步驟： 請參閱 GitHub 上的限製版面配置範例專案。

限制總覽

如要在 ConstraintLayout 中定義檢視畫面的位置，請將 檢視區塊至少會有一個水平和垂直限制條件。每項限制 代表與其他檢視畫面的連結或對齊方式、上層版面配置或 隱形指南每個限制都會定義視圖在 垂直或水平軸。每個檢視畫面都必須至少有一項限制 但通常越多越好

將檢視畫面拖曳到版面配置編輯器後，即使離開該檢視畫面， 沒有限制這麼做是為了簡化編輯流程。如果檢視表中沒有任何 限制在裝置上執行版面配置時，會繪製在位置 [0,0] (左上角)。

圖 1 中的版面配置在編輯器中看起來沒問題，但沒有直向圖片 對檢視區塊 C 的限制。此版面配置在裝置上繪製時，水平檢視 C 對齊檢視畫面 A 的左側和右側邊緣，但會顯示在畫面 A 的頂端 沒有垂直限制條件。

圖 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-beta01"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01"
}

    Kotlin

    dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-beta01")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-beta01")
}
  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：檢視畫面左側受限於左側 父系層級

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

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

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

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

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

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

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

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

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

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

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

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

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

    圖 6. 按一下限制條件 。

影片 2：新增限制現有限制。

如果您在檢視畫面上新增反對限制，則限制行會變成 就像彈簧彈片一樣，代表敵方的敵人，如影片 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 所示

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

影片 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. 選取「水平置中」或「垂直置中」。

影片 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 用於 向日葵 試用版應用程式