（文章轉載自簡書）
Google I/O 2016上，Android團隊為開發者帶來了ConstraintLayout，一種構建於彈性Constraints（約束）系統的新型Android Layout，據說它將大大改變今后的Android布局界面開發方式，據說也許以后Android開發沒有那么多布局需要學習，只需要熟悉這一種布局即可。前兩天Android studio 2.2正式版發布了，更多的Android 開發者會接觸並(可能)使用這個布局。
前言:
1.本文系https://developer.android.com/training 內對約束布局(ConstraintLayout) 文章的翻譯
2.閱讀本文可以對照原文Build a Responsive UI with ConstraintLayout，科學上網
3.本文可對照實戰入門教程食用：安卓約束控件(ConstraintLayout)扁平化布局入門
4.文章內view均翻譯為視圖，也可理解為控件
5.文章中涉及的video我還不知道怎么轉移哇，要看視頻演示的點進原文，還有涉及的一些關鍵詞鏈接，科學上網你懂的。原文用到的圖片我轉移到了github，但是github你們也懂的，有時候是真不給力ಥ_ಥ
6.水平有限，翻譯上的錯誤和偏差求指導求輕噴ಥ_ಥ
使用約束布局(ConstraintLayout)構建靈活的UI
約束布局允許你在相同視圖層級中(不是相互層疊的視圖組合)制作大而復雜的布局。它類似於相對布局那樣所有的視圖位置是根據子布局或父布局決定的，但是它比相對布局更加靈活，並且在Android studio布局編輯器中更加易用。
你可以直接在布局編輯器的可視化工具中做約束布局中所做的所有事，因為布局API和布局編輯器已經做了特地融合。所以你可以通過拖拽使用約束布局構建你的布局，而不需要再去編輯XML文件。
約束布局可以在兼容Android2.3(API 9)或者更高的API庫中使用，而新的布局編輯器則在Android studio2.2中可用。
這篇文章提供了一個在Android studio中使用約束布局構建一個布局的指導。如果你想要了解關於布局編輯器更多信息，在這個 Build a UI with Layout EditorAndroid studio指導中查看.
約束概述
為了定義在約束布局中視圖的位置，你必須為視圖添加兩個或更多約束條件。每個約束代表了和另個視圖、父布局或不可見指引線的聯系或對齊。每個約束限定了視圖是沿着垂直軸還是水平軸的位置，所以每個視圖必須在每個軸最少擁有一個約束，但經常需要更多。
當你往布局編輯器中拖拽一個視圖時，它會停留在你扔下它的位置，即使它沒有任何約束。然鵝，這只是為了使編輯更簡單。當一個視圖沒有任何約束時，你在設備上運行起來后，它會被繪制在左上角[0,0]的位置。
在圖2里面，布局在編輯器中看起來不錯，但是對於TextView B沒有對其進行豎直方向上的約束。當這個布局被繪制到設備上時，TextView B會在水平方向上水平與ImageView的左右邊緣對齊，但是出現在屏幕的頂部，因為它沒有數值方向上的約束。
雖然缺少約束條件不會造成編譯錯誤，但布局編輯器會在ToolBar中展示為一個錯誤指示缺少約束條件。要查看錯誤或者其他警告，可以點擊Show Warnings and Errors.為了幫你避免忽視約束條件，布局編輯器會使用 Autoconnect and infer constraints功能為你自動添加約束。
在你的工程中添加約束布局
要在你的工程中使用約束布局，步驟如下：
1，確定你有最新的Constraint Layout library；
1.點擊Tools > Android > SDK Manager. 2.點擊 SDK Tools欄. 3.展開Support Repository，然后檢查ConstraintLayout for Android， 並且Solver for ConstraintLayout. 檢查Show Package Details，注意你下載的版本（你需要的是下面這個）。 4.點擊OK. 5.在你的module-level build.gradle文件里面添加ConstraintLayout library作為依賴：
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8' } 你下載的庫版本或許會更高，所以確保你指定的版本跟第三步中的版本相匹配。
6.在toolbar或者sync提示中，點擊Sync Project with Gradle Files. 現在你可以使用ConstraintLayout構建布局了.
轉換布局
按照以下步驟，將現有的布局轉換為約束布局：
1.在Android Studio打開你的布局，點擊編輯器窗口最下面的Design標簽.
2.在Component Tree窗口，右鍵布局，然后點擊Convert layout to ConstraintLayout.
新建布局
以下步驟開始新建一個約束布局文件：
1.在Project窗口任意位置右鍵，然后選擇File > New > XML > Layout XML. 2.輸入布局文件名字，然后輸入"android.support.constraint.ConstraintLayout" 作為布局根標簽. 3.點擊完成. 添加約束
首先從Palette窗口拖拽一個視圖到編輯器。當你在約束布局中添加一個視圖時，它顯示為一個每個角都帶有正方形手柄，並且每邊都帶有的環形手柄的邊框
點擊選中視圖，然后點擊並按住約束手柄之一並拖動線到可用的錨點(另一個視圖的邊緣，布局的邊緣，或者一條引導線)。當你釋放的時候，約束生成，帶有默認的a default margin分離兩個視圖。
video1
新建約束時，記住以下規則：
*每一個視圖至少有兩個約束：一個垂直方向，一個水平方向。
*只有在約束手柄和錨點在同一平面時才能新建約束，
所以一個視圖的垂直平面(左右側)只能被約束到另一垂直平面。
並且基線只能約束到其他基線。
*每個約束手柄只能被用於一個約束，但是可以對同一個錨點創建多個約束(從不同的視圖)
選中一個視圖然后點擊約束手柄，可以刪除一個約束。
如果你在一個視圖中添加對立的約束，約束線變成像彈簧一樣的波浪來表示反動勢力，就像video2中展示的一樣。
當視圖的大小被設為『fixed』或者『wrap content』時，這種情況下視圖位於約束條件中心時，效果最為明顯。如果你希望視圖撐開尺寸以滿足約束條件，改變尺寸至"any size"；或者如果想保持目前的大小，單移動視圖，使其不居中，可以調整約束偏置。
有許多方式可以來約束一個視圖，但下面的約束類型提供了基本構建模板
父約束
視圖的側面連接到相應布局的邊緣。
圖5中，視圖的左邊被連接到父布局的左邊緣.
位置約束
給兩個視圖定義出現的次序，垂直或者水平。
圖6中，Button被約束於ImageView下邊緣24dp處，
對齊約束
對齊視圖的邊緣到其他視圖的同意邊緣。
圖7中，Button的左邊緣被對齊到ImageView的左邊緣。
你可以從約束向里拖動視圖校准偏移。比如，在
圖8中，展示了相同的Button偏移了24dp，這是通過約束視圖邊界限定的偏移。
基線對齊約束
對齊視圖的文本基線到其他視圖的文本基線。
圖9中，第一行的TextView被對齊到Button的text。
將鼠標懸停在基線手柄兩秒鍾，直至手柄閃爍白色。然后點擊並拖出一條線到另一個基線，創建出一個基線約束。
引導線約束
在想附加約束的地方可以添加水平或垂直的引導線，你可以在布局內部基於相對於布局邊緣的dp或是百分比定位引導線。
在toolbar中點擊Guidelines，然后再點擊Add Vertical Guidelin或者Add Horizontal Guideline創建引導線。
點擊引導線邊緣的環形toggle，切換用於定位引導線的測量值(從布局邊緣的百分比或dp單位)
引導線不會對用戶可見。
使用自動連接並推斷約束
自動連接是一個持久的模式，會為你添加到布局中的每一個視圖自動創建兩個或多個約束，默認為不可使用狀態。你可以在布局編輯器的ToolBar中點擊Turn on Autoconnect來啟用。
當其可用時，你添加的每個視圖都會為你自動創建約束。它不會對布局中已經存在的視圖創建約束。一旦約束創建，如果你想拖拽視圖,約束不會改變。所以如果你想明顯的重新定位視圖的位置，必須先刪除約束。
或者，你可以點擊Infer Constraints為布局中所有的視圖創建約束。
推斷約束（Infer Constraints）是一次性的動作，以掃描整個布局以確定所有視圖最有效的約束，因此它可能創建彼此相隔很遠之間的約束。然鵝，自動連接(Autoconnect)創建的約束只是在你添加的視圖上，並且它創建的約束只會在附近的元素上。這兩種情況下，你可以隨時通過點擊約束手柄刪除修改約束，然后創建一個新的約束。
調整視圖大小
你可以用視圖每個角的額手柄來改變視圖的大小，但是你應該規避對大多數視圖做寬度和高度的硬編碼，應為硬編碼視圖大小無法適應不同的內容和屏幕尺寸。點擊視圖，打開編輯器右側的Properties窗口，選擇一種動態調整大小的模式或者定義更多具體的尺寸。如
圖10，Properties窗口包括①視圖尺寸，②邊距，③約束偏置,在窗口頂部是視圖檢查器。
灰色方框代表選中的視圖，方框內的符號(卧槽這個符號我就用字符代替了哈ಠ౪ಠ)表示寬度和高度值可以用如下方式設置：
* >>>Wrap Content:視圖自適應為其內容大小。 * |-/|/|/-|Any Size:視圖按照匹配的約束適應大小。 視圖沒有指定明確的尺寸，實際值為0dp，但是它按照滿足需求的約束調整了大小。 然而，如果給定的尺寸只有一個約束，那么該視圖自適應其內容。 另一種思路可以認為它是"match constraints"（等同於match_parent）。 因為它會在滿足每個約束和邊距條件后，盡可能的擴展視圖。 *|---|Fixed:在文本框中指定尺寸，或者在編輯器中調整視圖大小。 點擊符號，可在這些設置之間切換。
Note:在約束布局中的所有視圖，都應該使用match_parent，而不是 "Any Size" (0dp)。
調整約束偏置
當你在一個視圖（相同尺寸的視圖大小為"fixed"或"wrap content"）兩側添加一個約束時，默認情況下該視圖成為兩個錨點的中心，偏置為50%。你可以通過在Properties窗口中拖動偏置滑塊或者直接拖動視圖來調整偏置，如video5,調整約束偏置.
如果你想讓視圖滿足約束的情況下撐開大小，切換視圖尺寸至任何大小"any size"。
調整視圖邊距
為了確保你所有的視圖是均勻分布，點擊ToolBar中的Margin 8，對你添加進布局的視圖選擇默認邊距。這個按鈕會變為顯示你當前邊距的選項，你對默認邊距的修改只會應用於修改之后添加的所有的視圖。
你可以通過點擊在Properties窗口里面代表約束線上面的數字，來控制每個視圖的邊距（圖10中，每個邊距被設置為16dp）.
工具提供的所有邊距為8dp的原因是為了讓你的視圖跟隨Material Design大法的 8dp square grid recommendations
以上
本文作者：paradoxie
個人主頁：謝盒盒的小黑屋，不止說技術
簡書地址：簡書主頁，專注說技術
github地址：paradoxie
轉載請注明出處，蟹蟹!
-------我的夢想真的是做一條咸魚！
作者：溫瑜
鏈接：https://www.jianshu.com/p/3362d69fd01f
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。