[譯] 帶你領略 ConstraintLayout 1.1 的新功能

水月沐風發表於2018-05-20
AI

約束佈局（ConstraintLayout）通過使用 Android Studio 中的視覺化編輯器來為您生成絕大多數的 UI，進而達到簡化 Android 中建立複雜佈局的目的。它通常被我們描述為更加強大的 RelativeLayout。通過使用約束佈局，您可以定義一些複雜的佈局而不需要建立複雜的檢視層級。

約束佈局最近釋出了 1.1 穩定版本，並迅速獲得大量好評。全面的優化改進可以讓多數佈局的執行速度比以前更快，屏障和群組等新功能使現實生活的設計變得簡單！

Android Gradle

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.0'
}
複製程式碼

如果您想要在專案中使用新特性，需要新增 ConstraintLayout 1.1 版本作為依賴。

1.1 版本中的新特性

百分比

在約束佈局 1.0 版本中，需要使用兩條引導線才能讓檢視根據百分比來佔據螢幕。而在約束佈局 1.1 版本中，通過允許您輕鬆地將任何檢視限制為百分比寬度或高度，一切將變得很簡單。

[譯] 帶你領略 ConstraintLayout 1.1 的新功能

使用百分比指定按鈕的寬度，以便在保持設計效果的同時適應可用空間。

所有檢視都支援 layout_constraintWidth_percent 和 layout_constraintHeight_percent 屬性。這些將導致約束被固定在可用空間指定百分比位置。 因此，使用幾行 XML 程式碼就可以使 Button 或 TextView 展開並以百分比填充螢幕。

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_percent="0.7" />
複製程式碼

鏈條

通過鏈條功能來放置多個元素可以讓你配置它們該如何填充可用空間。在 1.1 版本中，我們已經修復了鏈條的一些問題，並使它們能夠處理更多的檢視。您可以通過在兩邊新增約束來生成一個鏈條。例如在下面這個動畫中，每個檢視之間都有一個約束。

[譯] 帶你領略 ConstraintLayout 1.1 的新功能

通過 spread，spread_inside 和 packed，鏈條能夠讓您配置如何佈置多個相關的檢視。

app:layout_constraintVertical_chainStyle 屬性可以作用於鏈條中的任何檢視。 您可以設定它的值為 spread，spread_inside 或者 packed。

  • spread：均勻分配鏈中的所有檢視
  • spread_inside：將第一個元素和最後一個元素放置在邊緣上，並均勻分佈其餘元素
  • packed：將元素包裹在鏈條的中心

屏障

如果您有幾個檢視會在執行時更改大小，則可以使用屏障功能來約束元素。您可以將屏障放置於幾個元素的開始，頂部，末尾或底部。您可以將其視為製作虛擬組的一種方式 ，因為它不會將此組新增到檢視層次結構中。

在佈置國際化字串或顯示使用者生成的無法預測大小的內容時，屏障非常有用。

[譯] 帶你領略 ConstraintLayout 1.1 的新功能

屏障允許您通過幾個檢視來建立一個約束。

屏障將始終將自己置於虛擬群組之外，並且您可以使用它來限制其他檢視。在上面這個例子中，右檢視被限制為始終處於最大文字檢視的末尾。

群組

有時您需要一次顯示或隱藏多個元素。為了支援這個，約束佈局增加了群組功能。

一個群組並沒有增加檢視的層級——這實際上只是一種標記檢視的方式。在下面的示例中，我們將標記 profile_name 和 profile_image 以供 id 配置檔案引用。

當您有多個需要顯示或陳列在一起的元素時，這將很有用。

<android.support.constraint.Group
    android:id="@+id/profile"
    app:constraint_referenced_ids="profile_name,profile_image" />
複製程式碼

當定義名為 profile 的群組後，您可以為該群組設定可見性，並將其應用於 profile_name 和 profile_image。

profile.visibility = GONE

profile.visibility = VISIBLE
複製程式碼

圓形約束

在約束佈局中，大多數約束由螢幕尺寸指定——水平和垂直。在約束佈局 1.1 版本中，有一個新的型別約束 constraintCircle，它允許您指定沿著一個圓形進行約束。您不必提供水平和垂直邊距，而是指定圓的角度和半徑。這對於像徑向選單這樣的角度偏移的檢視將非常有用！

[譯] 帶你領略 ConstraintLayout 1.1 的新功能

您可以通過指定要偏移的半徑和**角度來建立徑向選單。

建立圓形約束時，請注意，角度從頂部開始並順時針進行。在這個例子中，你將按如下方式指定中間的 fab：

<android.support.design.widget.FloatingActionButton
    android:id="@+id/middle_expanded_fab"
    app:layout_constraintCircle="@+id/fab"
    app:layout_constraintCircleRadius="50dp"
    app:layout_constraintCircleAngle="315" />
複製程式碼

約束集與動畫

您可以將 ConstraintLayout 隨同 ConstraintSet (約束集)一起使用來一次實現多個元素的動畫效果。

一個 ConstraintSet 僅持有一個 ConstraintLayout 的約束。你可以在程式碼中建立一個ConstraintSet，或者從一個佈局檔案中載入它。然後，您可以將 ConstraintSet 應用於 ConstraintLayout，更新所有約束以匹配 ConstraintSet 中的約束。

要使其具有動畫效果，請使用 support library 中的 TransitionManager.beginDelayedTransition() 方法。此功能將使您的 ConstraintSet 中的所有佈局的更新都通過動畫來呈現。

這是一個更深入地涵蓋了這個話題的視訊：

  • YouTube 視訊連結：https://youtu.be/OHcfs6rStRo

新的優化

約束佈局 1.1 版本中新增了幾個新的優化點，可加快您的佈局速度。這些優化點作為一個單獨的通道執行，並嘗試減少佈局檢視所需的約束數量。

總的來說，它們是通過在佈局中尋找常量並簡化它們來運作的。

有一個名為 layout_optimizationLevel 的新標籤，用於配置優化級別。它可以設定為以下內容：

  • barriers：找出屏障所在，並用簡單的約束取代它們
  • direct：優化那些直接連線到固定元素的元素，例如螢幕邊緣或引導線，並繼續優化直接連線到它們的任何元素。
  • standard：這是包含 barriers 和 direct 的預設優化級別。
  • dimensions：目前處於實驗階段，並且可能會在某些佈局上出現問題——它會通過計算維度來優化佈局傳遞。
  • chains：目前正在實驗階段，並計算出如何佈置固定尺寸的元素鏈。

如果你想嘗試試驗性的優化上述中的 dimensions 和 chains，你可以在 ConstraintLayout 中通過如下程式碼來啟用它們：

<android.support.constraint.ConstraintLayout 
    app:layout_optimizationLevel="standard|dimensions|chains"
複製程式碼

喜歡這篇文章？不如給 Sean McQuillan 一點鼓勵。

瞭解更多

想要了解有關約束佈局 1.1 版本的更多資訊，請檢視文件和程式碼實驗室！

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章