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

• 原文地址：Introducing Constraint Layout 1.1
• 原文做者：Sean McQuillan
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Moosphon
• 校對者：androidxiao LeeSniper

約束佈局（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 版本中，經過容許您輕鬆地將任何視圖限制爲百分比寬度或高度，一切將變得很簡單。

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

全部視圖都支持 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 版本中，咱們已經修復了鏈條的一些問題，並使它們可以處理更多的視圖。您能夠經過在兩邊添加約束來生成一個鏈條。例如在下面這個動畫中，每一個視圖之間都有一個約束。

經過 spread，spread_inside 和 packed，鏈條可以讓您配置如何佈置多個相關的視圖。

app:layout_constraintVertical_chainStyle 屬性能夠做用於鏈條中的任何視圖。 您能夠設置它的值爲 spread，spread_inside 或者 packed。

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

屏障

若是您有幾個視圖會在運行時更改大小，則可使用屏障功能來約束元素。您能夠將屏障放置於幾個元素的開始，頂部，末尾或底部。您能夠將其視爲製做虛擬組的一種方式 ，由於它不會將此組添加到視圖層次結構中。

在佈置國際化字符串或顯示用戶生成的沒法預測大小的內容時，屏障很是有用。

屏障容許您經過幾個視圖來建立一個約束。

屏障將始終將本身置於虛擬羣組以外，而且您可使用它來限制其餘視圖。在上面這個例子中，右視圖被限制爲始終處於最大文本視圖的末尾。

羣組

有時您須要一次顯示或隱藏多個元素。爲了支持這個，約束佈局增長了羣組功能。

一個羣組並無增長視圖的層級——這實際上只是一種標記視圖的方式。在下面的示例中，咱們將標記 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，它容許您指定沿着一個圓形進行約束。您沒必要提供水平和垂直邊距，而是指定圓的角度和半徑。這對於像徑向菜單這樣的角度偏移的視圖將很是有用！

您能夠經過指定要偏移的半徑和**角度來建立徑向菜單。

建立圓形約束時，請注意，角度從頂部開始並順時針進行。在這個例子中，你將按以下方式指定中間的 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 一點鼓勵。

瞭解更多

• 使用約束佈局構建響應式 UI | Android Developers
• 約束佈局 | Android Developers
• 使用約束佈局來設計你的 Android 視圖

想要了解有關約束佈局 1.1 版本的更多信息，請查看文檔和代碼實驗室！

---

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