限制布局(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 版本中，通過允許您輕松地将任何視圖限制為百分比寬度或高度，一切将變得很簡單。
image
使用百分比指定按鈕的寬度，以便在保持設計效果的同時适應可用空間。
所有視圖都支援 layout_constraintWidth_percent 和 layout_constraintHeight_percent 屬性。這些将導緻限制被固定在可用空間指定百分比位置。 是以，使用幾行 XML 代碼就可以使 Button 或 TextView 展開并以百分比填充螢幕。
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintWidth_percent="0.7" />
鍊條
通過鍊條功能來放置多個元素可以讓你配置它們該如何填充可用空間。在 1.1 版本中，我們已經修複了鍊條的一些問題，并使它們能夠處理更多的視圖。您可以通過在兩邊添加限制來生成一個鍊條。例如在下面這個動畫中，每個視圖之間都有一個限制。
image
通過 spread，spread_inside 和 packed，鍊條能夠讓您配置如何布置多個相關的視圖。
app:layout_constraintVertical_chainStyle 屬性可以作用于鍊條中的任何視圖。 您可以設定它的值為 spread，spread_inside 或者 packed。
spread：均勻配置設定鍊中的所有視圖
spread_inside：将第一個元素和最後一個元素放置在邊緣上，并均勻分布其餘元素
packed：将元素包裹在鍊條的中心
屏障
如果您有幾個視圖會在運作時更改大小，則可以使用屏障功能來限制元素。您可以将屏障放置于幾個元素的開始，頂部，末尾或底部。您可以将其視為制作虛拟組的一種方式 ，因為它不會将此組添加到視圖層次結構中。
在布置國際化字元串或顯示使用者生成的無法預測大小的内容時，屏障非常有用。
image
屏障允許您通過幾個視圖來建立一個限制。
屏障将始終将自己置于虛拟群組之外，并且您可以使用它來限制其他視圖。在上面這個例子中，右視圖被限制為始終處于最大文本視圖的末尾。
群組
有時您需要一次顯示或隐藏多個元素。為了支援這個，限制布局增加了群組功能。
一個群組并沒有增加視圖的層級——這實際上隻是一種标記視圖的方式。在下面的示例中，我們将标記 profile_name 和 profile_image 以供 id 配置檔案引用。
當您有多個需要顯示或陳列在一起的元素時，這将很有用。
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，它允許您指定沿着一個圓形進行限制。您不必提供水準和垂直邊距，而是指定圓的角度和半徑。這對于像徑向菜單這樣的角度偏移的視圖将非常有用！
image
您可以通過指定要偏移的半徑和角度來建立徑向菜單。
建立圓形限制時，請注意，角度從頂部開始并順時針進行。在這個例子中，你将按如下方式指定中間的 fab：
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 中的所有布局的更新都通過動畫來呈現。
這是一個更深入地涵蓋了這個話題的視訊：
新的優化
限制布局 1.1 版本中添加了幾個新的優化點，可加快您的布局速度。這些優化點作為一個單獨的通道運作，并嘗試減少布局視圖所需的限制數量。
總的來說，它們是通過在布局中尋找常量并簡化它們來運作的。
有一個名為 layout_optimizationLevel 的新标簽，用于配置優化級别。它可以設定為以下内容：
barriers：找出屏障所在，并用簡單的限制取代它們
direct：優化那些直接連接配接到固定元素的元素，例如螢幕邊緣或引導線，并繼續優化直接連接配接到它們的任何元素。
standard：這是包含 barriers 和 direct 的預設優化級别。
dimensions：目前處于實驗階段，并且可能會在某些布局上出現問題——它會通過計算次元來優化布局傳遞。
chains：目前正在實驗階段，并計算出如何布置固定尺寸的元素鍊。
如果你想嘗試試驗性的優化上述中的 dimensions 和 chains，你可以在 ConstraintLayout 中通過如下代碼來啟用它們：
app:layout_optimizationLevel="standard|dimensions|chains"
喜歡這篇文章？不如給 Sean McQuillan 一點鼓勵。
了解更多
想要了解有關限制布局 1.1 版本的更多資訊，請檢視文檔和代碼實驗室！
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。内容覆寫 Android、iOS、前端、後端、區塊鍊、産品、設計、人工智能等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微網誌、知乎專欄。