使用 ConstraintLayout 構建一個響應式的 UI

其實AS2.2的預覽版本早就出來了，ConstraintLayout也出來由于一段時間了，由于預覽版本穩定性的原因一直沒敢用，所以ConstraintLayout遲遲沒去學習，最近AS的穩定版終于發布，我也隨之更新，不得不說AS現在越來越強大了，最近學習ConstraintLayout看到官方一篇很不錯的文章，基本包含了ConstraintLayout所有的點，相信看完之后對ConstraintLayout也會有一個全面的了解，不得不說官方的資料才是最好的資料，英語比較好的同學可以直接看原文，本人第一次翻譯，有不對的地方請多多指出。

ConstraintLayout 不需要使用嵌套布局就可以讓我們去構建一個大而復雜的布局，他與 RelativeLayout 很相似，所有在里面的View的布局方式取決于View與View之間的關系和父布局。但是他比 RelativeLayout 更靈活，并且在Android Studio's Layout Editor中可以很容易的去使用。

ConstraintLayout 的所有工作都可以使用布局編輯器的可視化工具中完成，因為布局API和布局編輯器對此專門構建的。因此你可以完全通過拖拽的方式去構建一個使用了 ConstraintLayout 的布局，而不用直接在XML中編輯。

圖1

ConstraintLayout 在API庫中是可用的，最低兼容至Android2.3，新的布局編輯器可以在Android Studio2.2及其以上使用。這篇文章的目的是為在Android Studio中去構建一個基于 ConstraintLayout 的布局提供一個指南，如果你想了解更多的關于布局編輯器的信息，請看 Build a UI with Layout Editor （注：需KX上網）

一、Constraints 概述

在 ConstraintLayout 中，如果你要定義一個View的位置，那么你必須添加兩個或者更多的約束，每一個約束代表了一個連接或者對齊另外一個View、父布局、一個可視化的引導線（輔助線，對用戶不可見的，后面文章中會有說明），每一個約束都定義了View在水平或垂直方向的位置，因此每一個View與軸線（垂直和水平方向）都至少應該有一個約束。

當你拖一個View到布局編輯器中，如果沒有任何約束，他會待在你鼠標離開的位置，然而這個僅僅是讓編輯的時候更容易而已，如果這個View沒有任何約束，當你運行應用到在設備上，他將會被繪制到左上角[0,0]這個位置。

在 圖2 中這個布局在布局編輯器中看來來還是比較不錯的，但是 TextView B 沒有垂直方向上的約束，當他繪制到設備上時， TextView B 在水平方上將會與 ImageView 的左右邊緣對齊，但是他由于沒有垂直方向上的約束所以將會顯示到屏幕的最上邊。

圖2

圖3

盡管缺少了約束也不會造成編譯錯誤，布局編輯器將會在工具欄上顯示有一個缺少約束的錯誤，如果想去看這些錯誤和其他警告請點擊 Show Warnings and Errors (如下圖)。為了幫助我們去避免出現缺少約束的錯誤，布局編輯器的 Autoconnect and inferconstraints （如果沒有開啟，則需要我們去開啟，下圖工具欄第二排的第二個和第四個圖標對應這兩個功能）將會自動加約束。

二、添加ConstraintLayout到我們的項目中

1. 確保你有最新的Constraint Layout庫
   • 點擊 Tools > Android > SDK Manager
   • 點擊 SDK Tools tab
   • 展開 Support Repository ，然后勾選 ConstraintLayout for Android 和 Solver for ConstraintLayout 。勾選 Show Package Details ，注意你下載的版本
   • 點擊 OK
   • 添加ConstraintLayout庫到你的build.gradle文件中

     dependencies { 
           compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
     }

     你下載的這個庫的版本可能會更高，確保與你之前下載的版本匹配即可
   • Sync Project with GradleFiles

注：將你的支持庫更新到最新即可。

三、轉換已經存在的布局成ConstraintLayout

1. 打開你的布局文件，切換到Design tab
2. 在 Component Tree 窗體中，右擊布局文件，然后點擊 Convert layout to ConstraintLayout （如圖4）。
   

   圖4

四、創建一個新的布局

1. 新建一個布局文件
2. 輸入布局文件的名字，將布局的根元素改為 android.support.constraint.ConstraintLayout
3. 最后點擊完成

五、添加一個約束

拖一個View到布局編輯器中。當你添加了一個View到 ConstraintLayout 中，他的四個角對應著的四個小矩形框是控制大小的，每一條邊有四個圓形的約束控制點。

單擊View選中，然后單擊并按住一個約束控制點拖拽這條線到一個可用的錨點（其他View、Layout的邊緣或者引導線），當你松開，這個約束將會被創建，兩個View也將被默認的margin隔開。

當你創建一個約束的時候，一定要記得下面幾點規則：

• 每一個View必須有兩個約束：一個水平的，一個垂直的
• 只有約束控制點和另外一個錨點在同一平面才能創建約束（也就是說將要創建的約束的View和錨點View屬于同一級）。因此一個View的垂直平面（左側和右側）只能被另一個的垂直平面約束，基線只能被其他基線約束。
• 一個約束控制點，只能被用來創建一次約束，但是可以在同一錨點創建多個約束（來自不同的View）

如果你想要刪除一個約束，先選舉中View，然后點擊需要刪除的約束控制點即可。

如果你在一個View中加了一個相對約束，約束線看起來彎彎曲曲的和彈簧差不多，表示相對的 力 ，當View被居中顯示，并且其大小被設置成"fixed" 或者 "wrap content"，這種視覺效果就會越明顯。如果你想這個View的大小與適應約束，只需將View的大俠送改為"any size"(0dp)，如果你想保持這個View當前的大小，但是不然View居中顯示，只需調整約束的偏移率（constraint bias）即可。

有很多種方式去約束一個View，但是下面的約束類型提供了一個基本的構建塊。

六、Parent constraint（父布局約束）

View的側面鏈接到布局相應的邊緣，圖5中ImageView的左側面連接到父布局的左邊緣。

圖5

七、Position constraint（位置約束）

可以定義兩個View在水平或者垂直方向上出現的順序，在圖6中Button頂端距離ImageView底部24dp。（用margin的表示這個約束）

圖6

八、Alignment constraint（對齊約束）

可以對齊兩個View的同一邊緣，在圖7中Button的左邊緣與ImageView的左邊緣對齊。

你也可以通過拖動View來控制對齊的偏移量，圖8 展示了Button左邊緣與ImageView左邊緣對齊之后有24dp的偏移量，偏移量通過View的margin控制。

圖7

圖8

九、Baseline alignment constraint（基線對齊約束）

可以對齊兩個View的文本基線，在圖9中，Textview的第一行基線與Button中的文本對齊。

要想創建一個基線約束，需要移動你的鼠標在基線控制點的上面，然后停留2秒鐘，直到控制點開始閃爍，然后點擊拖拽這條線到另一條基線。

圖9

十、Constrain to a guideline（約束到一個引導線（輔助線）

你可以添加一個水平和垂直方向上的引導線，這可以當做你的附加約束。你在布局內可以定位這個引導線，dp和百分比作為單位均可。

想要創建這個引導線，在工具欄點擊 Guidelines （如下圖），然后點擊 Add Vertical Guideline o或者 Add Horizontal Guideline 即可。

拖動引導線中間的圓即可定位引導線的位置。

注：引導線對用戶是不可見的。

十一、Use Autoconnect and Infer Constraints（使用自動連接和約束推斷）

Autoconnect 為添加進布局的View自動創建兩個或者多個約束，Autoconnect 默認被禁用，你可以通過點擊編輯器工具欄中的 Turn on Autoconnect （一個有點像磁鐵的圖片）開啟他。

當你開啟了 Autoconnect ，當你添加新的View到布局之后 Autoconnect 就會自動創建約束，他不會為已經存在的View創建約束。如果你拖動View一次，約束就值將會改變，但是之前的約束本身不會被改變。所以如果你想重新去定位View，那么你必須刪除之前的約束。

或者，你可以點擊 Infer Constraints （一個有點像電燈的圖標）去為布局中所有的View創建約束

Infer Constraints掃描整個布局為所有的View決定一套最有效的約束，因此他可以創建兩個距離很遠的View之間的約束。然而 Autoconnect ，只能為新添加進布局的View創建約束，并且他創建的約束僅僅只能是距離最近的元素。在這兩種情況下，你可以隨時通過點擊約束控制點去刪除約束然后創建新的約束去修改他。

十二、Adjust the view size（調整View的大小）

你可以使用View每個角的控制點去調整其大小，但是這樣做只是把寬高寫死，這樣做不能適應不同的內容和不同的屏幕大小，我們應該避免這樣去使用。為了選擇一個動態的大小模式或者定義一個更具體的尺寸，請單擊并打開編輯器右側的 Properties 窗口，如圖10。

灰色的矩形區域，代表選擇的View，矩形的的符號代表寬和高。

• (>>>)Wrap Content ：View的大小與其內容適配
• (有點像彈簧的圖標)Any Size ：View大小剛好匹配其對應的約束，他的實際值是0dp，表示這個View沒有期望的尺寸，但是他渲染后的大小將會匹配其約束。
• (直線)Fixed ：View的大小的是固定的

點擊符號即可在上面三種模式中互相切換。

注意：你不應該在ConstraintLayout中使用match_parent，而是使用0dp

圖10:1.View的大小 2.margin 3.constraint bias

十三、Adjust the constraint bias（調整約束偏移率）

當你為一個View的兩測添加了約束，默認的，View將變成兩個錨點的中心，當View居中的時候，偏移率就是50%，你也可以拖拉constraint bias 滾動條去調整（如圖10的第三點）

十四、Adjust the view margins（調整View的margin）

為了確保左右的View都被均衡的隔開，點擊工具欄的 Margin （如圖11）去為新添加進布局的View選擇一個默認的margin值，Button將會顯示你當前選擇的值，你做的更改將應用于之后你新添加的View。

你也可以通過點擊圖10 線上的數字去更改margin的值。

工具中提供的margin值全是8的倍數，幫助你的View與Material Design的推薦的 8dp的方形網格 保持一致

圖11

翻譯end

 

來自：http://www.jianshu.com/p/f61227a2775f