Constraint Layout 2.0 用法詳解
Constraint Layout 是最受歡迎的 Jetpack 庫之一，它的 2.0 正式版本也發布啦 (目前最新版本 2.1.0-alpha1)！也許您已熟悉了 Constraint Layout 1.1 版本中的功能，并開始用它來快速構建復雜的頁面布局，而新版本除了包含 1.1 版本中的所有功能之外，還在 Android Studio 中集成了可以直接預覽 XML 的工具，甚至可以直接在預覽界面中對布局進行編輯。
Constraint Layout 2.0 帶來了許多關于 Contraint Layout 的新特性，您可以通過在 build.gradle中更改版本來升級使用。
implementation “androidx.constraintlayout:constraintlayout:2.0.1”
復制代碼
隨著 2.0 版本的發布，我們專門在 github 上創建了 Constraint Layout 的 代碼庫，但目前該代碼庫是只讀狀態，我們會逐步開放 pull request 的權限。
Flow
Flow 是一種新的虛擬布局，它專門用來構建鏈式排版效果，當出現空間不足的情況時，它能夠自動換行，甚至是自動延展到屏幕的另一區域。當您需要對多個元素進行鏈式布局，但不確定在運行時布局空間的實際大小是多少，那么 Flow 對您來說就非常有用。您可以使用 Flow 來實現讓布局隨著應用屏幕尺寸的變化 (比如設備發生旋轉后出現的屏幕寬度變化) 而動態地進行自適應。
圖片 : 該動畫展示了 Flow 創建多個鏈將布局元素充裕地填充一整行
Flow 是一種虛擬布局。在 Constraint Layout 中，虛擬布局 (Virtual layouts) 作為 virtual view group 的角色參與約束和布局中，但是它們并不會作為視圖添加到視圖層級結構中，而是僅僅引用其它視圖來輔助它們在布局系統中完成各自的布局功能。
圖片 : flow 三種模式 "none", "chain" 和 "align" 的可視化效果
在 Constraint Layout 2.0 中，您可以用 Flow 標簽來使用這一功能。Flow 會通過您傳遞的 constraint_referenced_ids 參數來獲取到要引用的所有視圖，然后根據這些視圖創建一個虛擬的 virtual view group，再對這些視圖進行鏈式布局。
<androidx.constraintlayout.helper.widget.Flow
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:flow_wrapMode="chain"
app:constraint_referenced_ids="card1, card2, card3"
/>
復制代碼
在 Constraint Layout 中使用 Flow 的用例
Flow 中最重要的一個配置選項是 wrapMode，它可以決定在內容溢出 (或出現換行) 時的布局行為。
您可以對 wrapMode 指定三種模式:
- none – 所有引用的視圖以一條鏈的方式進行布局，如果內容溢出則溢出內容不可見；
- chain – 當出現溢出時，溢出的內容會自動換行，以新的一條鏈的方式進行布局；
- align – 同 chain 類似，但是不以行而是以列的方式進行布局。
若您想要了解更多有關 Flow 的內容，請查閱 官方文檔。
Layer
Layer 作為一種新的輔助工具，可以讓您在多個視圖上創建一個虛擬的圖層 (layer)。同 Flow 不同，它并不會對視圖進行布局，而是對多個視圖同時進行變換 (transformation) 操作。
如果您想對多個視圖整體進行旋轉 (rotate)、平移 (translate) 或縮放 (scale) 操作，那么 Layer 將會是最佳的選擇。
圖片 : 使用 Layer 對多個視圖同時進行變換操作
圖層 (layer) 在布局期間會調整大小，其大小會根據其引用的所有視圖進行調整。
您可以使用 Layer 標簽在 Constraint Layout 2.0 中增加一個圖層 (layer)。
<androidx.constraintlayout.helper.widget.Layer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="card1, card2, card3"
/>
復制代碼
在 Constraint Layout 中使用 Layer 的示例
Motion Layout
動畫 : 集成 Motion Layout 示例 運行后的界面截圖
Motion Layout 是 Constraint Layout 2.0 中最令人期待的功能之一。它提供了一個豐富的動畫系統來協調多個視圖之間的動畫效果。MotionLayout 基于 ConstraintLayout，并在其之上進行了擴展，允許您在多組約束 (或者 ConstraintSets) 之間進行動畫的處理。您可以對視圖的移動、滾動、縮放、旋轉、淡入淡出等一系列動畫行為進行自定義，甚至可以定義各個動畫本身的自定義屬性。它還可以處理手勢操作所產生的物理移動效果，以及控制動畫的速度。使用 MotionLayout構建的動畫是可追溯且可逆的，這意味著您可以隨意切換到動畫過程中任意一個點，甚至可以倒著執行動畫效果。
Android Studio 集成了 Motion Editor (動作編輯器)，可以利用它來操作 MotionLayout 對動畫進行生成、預覽和編輯等操作。這樣一來，在協調多個視圖的動畫時，就可以做到對各個細節進行精細操控。
您可以通過閱讀 Scott Swarthout 的這篇文章《Android Studio 中的 Motion Editor 用法詳解》來獲得更多關于 Motion Editor 的內容。
想要手把手通過教程學習 Motion Layout，您可以查看這個 codelab:
Motion Layout 是一個通用的動畫工具 - 您幾乎可以使用它在 Android 上構建任意一種動畫效果。尤其是在以下兩種情況下，MotionLayout 會比其它動畫構建工具更勝一籌:
- 可追溯的動畫 - 由其它輸入驅動的動畫，例如工具欄在滾動時會出現的折疊效果
- 狀態轉換 - 由狀態更改驅動的動畫，例如用戶進入某一界面后，隨著該界面狀態的轉換而出現的不同動畫效果
新的 集成 Motion Layout 示例 展示了如何使用 Motion Layout 在不同的場景下進行動畫效果的構建。每個界面都旨在向您展示在某些場景下如何使用 Motion Layout 構建實用的動畫效果，以及如何將這些效果集成到其它視圖上。
Constraint Layout 2.0 還有很多新功能。您可以通過查看文檔、codelab 和代碼示例，在您的應用中使用它。
期待看到您使用 Constraint Layout 2.0 構建的應用！
