本文翻譯自：https://codelabs.developers.google.com/codelabs/constraint-layout/index.html?index=..%2F..%2Findex#0
目前ConstraintLayout還處于beta版堕战。
1. 概要
ConstraintLayout 是 Android Support 庫(kù)中可用的一種新型的建立在靈活的約束系統(tǒng)上的布局厕倍。在文末你將學(xué)會(huì)利用布局編輯器來(lái)構(gòu)建相對(duì)復(fù)雜的布局。
- ConstraintLayout使用新的布局管理器
- 創(chuàng)建約束來(lái)實(shí)現(xiàn)靈活高效率的布局
- 新的布局編輯器的多種特性赴蝇。
需要的環(huán)境：AndroidStudio 2.2
2. 獲取示例代碼
示例代碼下載地址
或者從github上clone代碼：
$ git clone https://github.com/googlecodelabs/constraint-layout.git
constraint-layout 的倉(cāng)庫(kù)包含一個(gè)項(xiàng)目：
**constraint-layout-start **— Project that contains the layouts that you'll build upon in this codelab.
3. 運(yùn)行示例代碼
首先只锭，來(lái)看一下運(yùn)行后的程序是怎樣的哲思。請(qǐng)確保您的Android Studio在版本2.2以上哼御。
- 進(jìn)入 File > New > Import Project 并且從之前下載的示例程序中選擇路徑 constraint-layout-start.
- 點(diǎn)擊 **Gradle sync ** 按鈕.
- 從項(xiàng)目面板中打開(kāi) res/layout/activity_main_done.xml.
- 選擇 tab Design 可以看到最終的布局.
-
在 UI Builder的左上方變換虛擬設(shè)備等按鈕可以看到不同因素影響下渲染的布局.
4. 約束系統(tǒng)概覽
布局引擎使用為每個(gè)小部件指定約束來(lái)確定它們?cè)诓季种械奈恢谩?您可以手動(dòng)或通過(guò)Android Studio布局編輯器中的推算自動(dòng)指定約束胖替。 為了更好地理解約束，讓我們看看所選窗口小部件上的基本處理坟岔。
約束
約束可幫助您保持小部件對(duì)齊谒兄。 您可以使用錨點(diǎn)（例如下面描述的約束句柄）來(lái)確定各個(gè)窗口小部件之間的對(duì)齊規(guī)則。 例如社付，將約束從按鈕2的左約束句柄（參見(jiàn)下面的圖A）設(shè)置到按鈕1的右約束句柄意味著按鈕2小部件將位于按鈕1的右邊56dp承疲。
不同類(lèi)型的句柄
在這張圖上，我們可以看到不同類(lèi)型的句柄鸥咖。
Resize Handle:類(lèi)似于你可能已經(jīng)使用的其他設(shè)計(jì)/繪制應(yīng)用程序燕鸽，
Resize Handle允許您調(diào)整窗口小部件的大小。
Side Constraint Handle: 側(cè)邊約束句柄（每個(gè)小部件側(cè)面的圓形）允許您指定該窗口小部件的位置啼辣。 例如啊研，您可以使用窗口小部件的左側(cè)約束句柄總是在另一個(gè)窗口小部件的右側(cè)的24dp。 這些在整個(gè)編碼表中也被稱(chēng)為錨點(diǎn)。
Baseline Constraint Handle:
基線約束句柄幫助您對(duì)齊任何兩個(gè)小部件的文本字段党远，而不考慮小部件大小削解。 對(duì)于當(dāng)你有兩個(gè)不同大小的小部件，但希望里面的文本是對(duì)齊的情況是很有幫助的沟娱。
約束系統(tǒng)的規(guī)則
布局中的窗口小部件的錨點(diǎn)可以連接到另一個(gè)窗口小部件的任何錨點(diǎn)钠绍，但以下情況除外：
不能連接不同類(lèi)型的錨點(diǎn)：
- 錨點(diǎn)在不同軸線上，如左花沉，頂錨點(diǎn)連接柳爽。
- 基線約束句柄只能限制到另一個(gè)基線。
不允許連接導(dǎo)致循環(huán)的錨點(diǎn)碱屁。
5. 構(gòu)建初始應(yīng)用程序
準(zhǔn)備工作：
- 從左側(cè)導(dǎo)航欄中打開(kāi)
res / layout / activity_main_start.xml磷脯。 -
包括對(duì)約束布局的依賴(lài)
約束布局作為一個(gè)單獨(dú)的支持庫(kù)，可以在所有Android版本（Android 2.3（Gingerbread）以上）運(yùn)行娩脾。
應(yīng)用程序已經(jīng)在app / build.gradle中包含了該依賴(lài)關(guān)系赵誓。 對(duì)于您打算使用ConstraintLayout構(gòu)建的應(yīng)用程序，添加以下編譯依賴(lài)關(guān)系：
dependencies {
...
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
}````
* 導(dǎo)航到 ````res/layout/activity_main_start.xml````
布局的XML版本已經(jīng)在codelab項(xiàng)目中包含一個(gè)空的ConstraintLayout元素柿赊。 ConstraintLayout是從頭開(kāi)始構(gòu)建的俩功，以便與UI Builder結(jié)合使用，因?yàn)槲覀兿嘈潘梢蕴峁└庇^和更強(qiáng)大的體驗(yàn)碰声。 盡管如此诡蜓，您仍然可以訪問(wèn)并可以編輯相應(yīng)的XML。(這間接告訴我們他是一個(gè)ViewGroup)
```` xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.constraint.ConstraintLayout>
- 切換到（在編輯器窗口底部顯示為選項(xiàng)卡的）設(shè)計(jì)（Design）視圖胰挑。(好拗口)
-
為布局添加一個(gè)ImageView
第一個(gè)任務(wù)是將ImageView添加到布局蔓罚。 在設(shè)計(jì)窗口中，在面板上找到ImageView并將其拖動(dòng)到布局中瞻颂。
一旦ImageView被拖動(dòng)到布局里豺谈，UI Builder會(huì)要求使用一個(gè)資源。 constraint-layout-start sample已經(jīng)包括使代碼方便實(shí)現(xiàn)的資源贡这。 繼續(xù)選擇@drawable/singapore資源茬末。
選擇后，ImageView將出現(xiàn)在布局上盖矫，您可以單擊并按住角落以調(diào)整圖像大小丽惭，如“約束系統(tǒng)概述”中所述。
-
在布局里添加TextView
現(xiàn)在炼彪，從面板里拖一個(gè)TextView到布局里吐根。
我們?cè)赨I Builder中看到一些警告正歼，這是由于缺少I(mǎi)mageView上的contentDescription屬性辐马，以及對(duì)TextView硬編碼文本。 內(nèi)容描述屬性對(duì)于構(gòu)建可訪問(wèn)應(yīng)用程序很重要。
對(duì)于這個(gè)codelab喜爷，讓我們使用一個(gè)已經(jīng)可用的資源@ string/dummy作為屬性冗疮。
在右側(cè)，“檢查器”窗格允許您更改所選窗口小部件的各種屬性檩帐。
- 選擇ImageView并將@ string / dummy添加到其contentDescription屬性中术幔。
- 在“檢查器”窗格中，還可以查看ImageView的其他屬性湃密。 出于此Codelab的目的诅挑，將scaleType更改為centerCrop。
- 接下來(lái)泛源，我們選擇TextView并使用Inspector窗格將TextView的文本值修改為@ string / singapore拔妥。
此時(shí)，我們?cè)诓季种杏袃蓚€(gè)視圖达箍。 在下一節(jié)中没龙，我們將了解如何在視圖之間創(chuàng)建約束。
前邊都是小菜一碟缎玫，接下來(lái)才是本文的重點(diǎn)硬纤，要點(diǎn)，新的知識(shí)點(diǎn)赃磨。
此處是高貴的分割線筝家。
內(nèi)容主要涵蓋了：
- 創(chuàng)建手動(dòng)約束
- 使用Autoconnect創(chuàng)建約束。
- 使用推理創(chuàng)建約束邻辉。
6.創(chuàng)建手動(dòng)約束
操作方法： 要?jiǎng)?chuàng)建約束肛鹏，您需要在給定的句柄上單擊并按住鼠標(biāo)，然后將其拖動(dòng)到另一個(gè)窗口小部件的約束句柄恩沛。 一旦錨點(diǎn)為綠色在扰，您可以釋放鼠標(biāo)以完成約束創(chuàng)建。
重要提示：UI Builder會(huì)自動(dòng)啟動(dòng)“自動(dòng)連接”模式雷客。 由于我們?cè)诒竟?jié)學(xué)習(xí)手動(dòng)約束芒珠，通過(guò)單擊操作禁用“自動(dòng)連接”模式，或確保它已禁用搅裙。
在我們開(kāi)始之前皱卓，確保我們?cè)诓季种杏幸粋€(gè)ImageView和一個(gè)TextView。 我們的目標(biāo)是在ImageView部逮，容器和布局上已經(jīng)有的TextView控件之間創(chuàng)建約束娜汁。
讓我們假設(shè)我們想要TextView在我們的最終布局中的ImageView下面。 為了實(shí)現(xiàn)這一點(diǎn)兄朋，我們可以在TextView的頂部錨點(diǎn)和ImageView的底部錨點(diǎn)之間創(chuàng)建一個(gè)約束掐禁，如圖所示。
刪除一個(gè)約束
使用布局中顯示的icon刪除約束按鈕刪除所選窗口小部件上的所有約束 。
要?jiǎng)h除單個(gè)約束傅事，請(qǐng)單擊設(shè)置約束的特定錨點(diǎn)缕允。
如果您要?jiǎng)h除整個(gè)布局中的所有約束，請(qǐng)使用菜單圖標(biāo)蹭越。
-
下一步是在ImageView的頂部錨點(diǎn)到布局的頂部之間創(chuàng)建一個(gè)約束障本。
https://codelabs.developers.google.com/codelabs/constraint-layout/img/172302f4ec011ef5.png
注意：在XML代碼中，ImageView有錯(cuò)誤提示：
****The view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint.****
也就是說(shuō)响鹃，手動(dòng)將ImageView拖動(dòng)到中央是無(wú)效的驾霜，必須聲明一個(gè)垂直居中的約束。
最后买置，我們還可以使用左右約束將ImageView錨定在布局的中心寄悯。
上述操作導(dǎo)致了如下錯(cuò)誤：
原因是沒(méi)有一個(gè)組件的ID是constraintLayout堕义。
將文件中的根View猜旬，ConstraintLayout，的id設(shè)置為constraintLayout即可倦卖。
本節(jié)介紹了如何通過(guò)拖動(dòng)連接線來(lái)創(chuàng)建窗口小部件之間的約束的基礎(chǔ)知識(shí)洒擦。 此時(shí)，您可以通過(guò)添加其他元素來(lái)瀏覽視圖和UI Builder怕膛。 在下一節(jié)中熟嫩，我們將了解檢查器。
7. 熟悉 Inspector
在本節(jié)中褐捻，我們來(lái)看看視圖檢查器掸茅。 檢查器位于UI構(gòu)建器的右側(cè)。 除了列出所選窗口小部件的各種屬性之外柠逞，它還顯示視圖如何對(duì)齊和任何約束昧狮。
繼續(xù)并從布局中刪除TextView。
在ImageView的底部錨點(diǎn)和容器底部之間創(chuàng)建約束板壮。
UI構(gòu)建器應(yīng)如下所示逗鸣。
檢查器在方塊中心顯示該ImageView。以下部分描述了各種元素及其用途绰精。
邊距：在窗口小部件之外的左撒璧，右，頂部和底部是邊距笨使。您可以通過(guò)單擊值并將其設(shè)置為不同的值來(lái)更改邊距卿樱。在上面的屏幕截圖中，邊距設(shè)置為16dp硫椰。
刪除約束：在檢查器中單擊將窗口小部件連接到容器的線繁调，還可以選擇刪除約束萨蚕。注意，刪除約束也可以通過(guò)點(diǎn)擊現(xiàn)有約束句柄來(lái)完成涉馁。
定位窗口小部件：當(dāng)窗口小部件上至少有兩個(gè)相對(duì)的連接（例如頂部和底部门岔，或左右）時(shí)爱致，您可以看到一個(gè)滑塊烤送，可以調(diào)整窗口小部件沿著軸。這也稱(chēng)為水平或垂直偏置糠悯。您可以調(diào)整水平和垂直偏置并更改方向以查看偏置是否保持不變帮坚。或者互艾，這也可以通過(guò)將小部件移動(dòng)到期望的位置來(lái)實(shí)現(xiàn)。
繼續(xù)，將垂直偏壓改為75％嗦枢，將水平偏壓改為75％朗伶。下面的圖片可以作為指南。
在安卓Studio 2.2版本上昨稼，Properties下方還有一個(gè)View all Properties的按鈕节视。可以看到更多屬性假栓。
控制窗口小部件的內(nèi)部尺寸：窗口小部件中的內(nèi)部線條可讓您控制尺寸寻行。 您可以單擊特定行以查看它的操作。
這是“檢查器”窗格中窗口小部件的放大視圖匾荆。 單擊檢查器窗格小部件的內(nèi)部線將循環(huán)選擇下面提到的選項(xiàng)拌蜘。
Fixed: 此選項(xiàng)允許您指定窗口小部件的寬度/高度。
AnySize: 這個(gè)選項(xiàng)讓部件占據(jù)所有可用的空間以滿足該約束牙丽。換而言之简卧，這有點(diǎn)像match 約束。但是這與占據(jù)父View所有的空間的match_parent有所不同烤芦。
Wrap Content: 此選項(xiàng)僅擴(kuò)展為用所包含的元素（如文本或drawable）填充窗口小部件贞滨。
AnySize獨(dú)立于容器。 如果ImageView被約束到一個(gè)按鈕拍棕，AnySize只會(huì)展開(kāi)它晓铆，以適應(yīng)按鈕。(圖文搭配閱讀可有深刻體會(huì))
Figure A
Figure A:在'AnySize'應(yīng)用于其寬度之前顯示ImageView绰播。
Figure B
Figure B: 在'AnySize'應(yīng)用于其寬度之后顯示ImageView骄噪。
要查看和編輯給定窗口小部件的所有其他屬性，請(qǐng)單擊屬性窗格右上角的icon蠢箩，上述已經(jīng)講過(guò)這些链蕊。
在本節(jié)中事甜，我們探討了檢查器。 檢查器的目標(biāo)是讓您在不離開(kāi)UI構(gòu)建器的情況下編輯所有屬性和約束滔韵。
8.使用自動(dòng)連接創(chuàng)建約束
自動(dòng)連接逻谦，顧名思義，自動(dòng)創(chuàng)建小部件之間的連接陪蜻。 理解Autoconnect功能?chē)L試創(chuàng)建到相鄰小部件的連接非常重要邦马。
在開(kāi)始使用本節(jié)之前，請(qǐng)確保：
- 從“項(xiàng)目”窗格中打開(kāi)res / layout / activity_main_autoconnect.xml宴卖。 確保選擇“設(shè)計(jì)”選項(xiàng)卡滋将。
- 自動(dòng)連接已啟用
接下來(lái)，我們選擇ImageView症昏，并通過(guò)拖動(dòng)它在布局中居中随闽，直到指南顯示。 在它居中后幾秒鐘肝谭，自動(dòng)連接開(kāi)始掘宪，并創(chuàng)建與容器的頂部，左側(cè)攘烛，底部和右側(cè)的約束魏滚，如下面的動(dòng)畫(huà)所示。
這里我們?cè)诓季稚嫌幸粋€(gè)ImageView医寿，我們看到Autoconnect如何創(chuàng)建約束栏赴。
以下是本節(jié)下一部分的步驟。為了指導(dǎo)靖秩，上面的動(dòng)畫(huà)顯示了下面使用的步驟：
- 對(duì)齊要放置在頂部的ImageView须眷，并使用檢查器（AnySize）確保它展開(kāi)以填充父級(jí)的寬度。
- 在布局的右下角放置兩個(gè)按鈕沟突。使用檢查器窗格將最右側(cè)按鈕的文本屬性更改為@ string / upload花颗，將其左側(cè)的文本屬性更改為@ string / discard。
- 從調(diào)色板中拖動(dòng)TextView和純文本惠拭，并將它們放置在布局上扩劝。
將TextView和純文本字段調(diào)整為相差48dp。幾秒鐘后职辅，Autoconnect將為窗口小部件創(chuàng)建約束棒呛。 - 同樣選擇上傳按鈕，并將其放在靠近我們的右邊距域携，我們讓Autoconnect做剩下的事情簇秒。
- 最后，將discard按鈕32dp遠(yuǎn)離upload按鈕秀鞭。
作為練習(xí)趋观，也移動(dòng)TextView 48dp下面的ImageView扛禽。要做到這一點(diǎn)，選擇TextView并移動(dòng)皱坛，直到它的48dp下面的ImageView编曼。
重要的是要理解Autoconnect僅為當(dāng)前移動(dòng)的窗口小部件創(chuàng)建約束。
自動(dòng)連接通過(guò)連接到最近的小部件來(lái)幫助您剩辟，這在許多情況下是有幫助的掐场。有些情況下，Autoconnect不能實(shí)現(xiàn)所需的行為抹沪，開(kāi)發(fā)人員應(yīng)該使用手動(dòng)約束或推理來(lái)構(gòu)建他們的ConstraintLayout刻肄。推論將在代碼實(shí)驗(yàn)室的下一步中討論瓤球。
9.使用Inference創(chuàng)建約束
Inference引擎通過(guò)在布局中添加的元素之間創(chuàng)建約束來(lái)幫助開(kāi)發(fā)人員融欧。 Inference創(chuàng)建的約束取決于添加到布局的元素的類(lèi)型及其大小。
推理和自動(dòng)連接有什么區(qū)別卦羡？
推理引擎在布局中的所有元素之間創(chuàng)建約束噪馏，而Autoconnect在相鄰元素之間創(chuàng)建約束。
自動(dòng)連接的目的是創(chuàng)建約束來(lái)布置正在操作的窗口小部件绿饵，即其他窗口小部件不會(huì)被約束到您正在移動(dòng)的窗口小部件欠肾，但是您移動(dòng)的窗口小部件將被限制到其他窗口小部件。 這是一個(gè)重要的區(qū)別拟赊，因?yàn)樗馕吨詣?dòng)連接不會(huì)修改您的當(dāng)前約束刺桃。
setup
對(duì)于這一步，我們從layout/activity_main_inference.xml布局開(kāi)始吸祟。 在設(shè)計(jì)視圖中打開(kāi)布局文件瑟慈。 默認(rèn)情況下，此文件中的布局定義以下內(nèi)容：
- @drawable/singapore和@drawable/ic_star的ImageViews屋匕。 ic_star圖像已經(jīng)被約束為具有81％的垂直偏差葛碧。 您可以通過(guò)選擇包含ic_star的ImageView的垂直偏置，并檢查前面討論的檢查器过吻。
- 大ImageView的底部錨點(diǎn)（@drawable/singapore）被約束到ic_star ImageView的底部錨點(diǎn)进泼，邊距為16dp。
- 除了ImageView之外纤虽，還有TextViews for Camera乳绕，Settings和ImageView的字幕。
你會(huì)學(xué)到什么
- 使用菜單上的操作水平和垂直擴(kuò)展視圖逼纸。
- 使用inference按鈕幫助使用inference創(chuàng)建約束洋措。
了解UI Builder圖標(biāo)操作
由于我們將使用一些這些選項(xiàng)，來(lái)看看UI Builder上可用的操作樊展。
添加占用可用空間的TextView
我們的目標(biāo)是為圖像的描述添加一個(gè)TextView。 我們已經(jīng)有一個(gè)跨越多行的@string/singapore_description哥力。
- 首先蔗怠，從調(diào)色板中拖動(dòng)一個(gè)TextView，并將其放在設(shè)置文本視圖下面吩跋。
- 使用操作水平擴(kuò)展視圖以匹配準(zhǔn)則寞射。
-
使用操作垂直擴(kuò)展以填充可用的垂直空間。
使用 Inference操作
既然你在布局中有TextView锌钮，你就可以看到操作中看到Inference桥温。
單擊推斷constraints 操作以使用推理創(chuàng)建約束。
Inference引擎在布局中的所有視圖之間創(chuàng)建約束梁丘。 您的最終布局應(yīng)如下所示：
創(chuàng)建約束后侵浸，您可以通過(guò)單擊UI Builder左上角的按鈕來(lái)修改“要渲染的虛擬設(shè)備”。 選擇其他設(shè)備（如Nexus 6P或Nexus 9）氛谜，以查看布局是否正確呈現(xiàn)掏觉。
您現(xiàn)在已經(jīng)看到了使用約束系統(tǒng)的全部范圍：使用Inference引擎創(chuàng)建手動(dòng)約束，使用自動(dòng)連接的約束和約束值漫。
自動(dòng)連接和推理幫助您通過(guò)布局引擎找出如何為您的UI的各種元素創(chuàng)建約束澳腹。 然后，您可以自由地進(jìn)一步修改由自動(dòng)連接或推理引擎創(chuàng)建的約束杨何。
