- 原文作者：Hafiz Waleed Hussain
- 譯文出自：掘金翻譯計(jì)劃
- 譯者：yazhi1992
- 校對(duì)者：phxnirvana剃斧，tanglie1993
哇哦损同，又是新的一天。為了不浪費(fèi)這寶貴的時(shí)光逝段，讓我們來學(xué)點(diǎn)新知識(shí)吧 ?? 顿乒。
大家好议街，希望各位都有所進(jìn)步。在第一部分, 第二部分 和 第三部分這些文章中我們已經(jīng)學(xué)習(xí)了許多關(guān)于 ConstraintLayout 的知識(shí)¤甸現(xiàn)在是時(shí)候來學(xué)習(xí)這個(gè)神奇布局的剩余內(nèi)容了特漩。順便一提，本文是 Constraint Layout（這到底是什么）系列的最后一篇文章了骨杂。
動(dòng)機(jī)：
學(xué)習(xí)動(dòng)機(jī)與先前在第一部分中討論的是一樣的涂身。這篇文章里我們將會(huì)學(xué)習(xí)如何使用可視化編輯器（Visual Editor）。有一些地方我會(huì)引用到第二部分的內(nèi)容搓蚪。我將會(huì)使用可視化編輯器來實(shí)現(xiàn)一些访得，我們已經(jīng)討論過怎樣在 XML 或者 Java 中實(shí)現(xiàn)的概念。通過這種方式我們可以節(jié)省許多的時(shí)間陕凹。
我們需要下載 2.3 版本的 Android studio悍抑。先前版本的可視化編輯器不太完善，有時(shí)會(huì)在 Design 面板上顯示錯(cuò)誤的信息杜耙。所以下載 2.3 beta 版是非常重要的搜骡，該版本在我寫這篇文章時(shí)已經(jīng)可以獲取到了。
引言
在這篇文章里我們大部分都是使用可視化編輯器佑女，用到 XML 的機(jī)會(huì)比較少记靡。那么讓我們開始吧谈竿！
在上圖中我標(biāo)出了五個(gè)紅色的方框。這就是整個(gè)可視化編輯器了摸吠。在開始介紹之前有一個(gè)問題空凸。那就是：了解各個(gè)組成部分以及它們的名字真的那么重要嗎？在我看來寸痢，如果我們只是想要獨(dú)立完成某些工作呀洲，那么通過一遍又一遍地重復(fù)那些工作就可以掌握相應(yīng)的技能，并不需要了解術(shù)語啼止。但如果我們想要幫助社區(qū)里的成員道逗，或者說我們想要成為一名優(yōu)秀的團(tuán)隊(duì)合作者，我們就應(yīng)該學(xué)習(xí)所有相關(guān)的術(shù)語献烦。這確實(shí)很有用滓窍，我將會(huì)展示給你們看。
我知道大多數(shù)人不是很了解（或許有一些人了解 ??）什么是 Palette, Component Tree, Properties 等等巩那，但是我將會(huì)使用這些術(shù)語來描述流程吏夯。任何從事 UI 工作的開發(fā)人員都會(huì)遵循這些步驟。
從 Palette 窗口選取 UI 組件 -> 拖拽到 Design 編輯器中 -> 在 Property 窗口中改變組件的屬性（寬度即横，高度锦亦，文字，外邊距令境，內(nèi)邊距… 等等） -> 在 Design 編輯器中調(diào)整約束關(guān)系。
總共四個(gè)步驟顾瞪，我再重復(fù)一遍舔庶。
Palette 窗口 -> Design 編輯器 -> Properties 窗口 -> Design 編輯器
我們構(gòu)建 UI 時(shí) 90% 都是這樣的基本流程。如果你知道這些術(shù)語陈醒，你就可以輕易地想象出我們說的是什么惕橙。接下來我會(huì)向大家介紹我剛剛提到的那些術(shù)語到底是什么，以及我們?cè)趺丛诳梢暬庉嬈髦姓业剿鼈儭?/p>
Palette:
提供了一系列的部件（widgets）和布局（layouts）钉跷，你可以將其拖拽到位于編輯器中的布局里弥鹦。（官方文檔介紹）
在這里你可以獲取到 Android 提供的所有 UI 組件。在右上角有一個(gè)搜索圖標(biāo)爷辙，你可以通過搜索節(jié)省尋找的時(shí)間彬坏。搜索圖標(biāo)的右邊還有一個(gè)設(shè)置圖標(biāo)。點(diǎn)擊這個(gè)酷炫的圖標(biāo)膝晾，你可以根據(jù)個(gè)人喜好更改 UI 組件的外觀栓始。
Design 編輯器:
通過設(shè)計(jì)（Design）視圖和藍(lán)圖（Blueprint）視圖來預(yù)覽你的布局。（官方文檔介紹）
上圖就是 Design 編輯器血当。在 Design 編輯器里我們有兩種模式可選幻赚，一種是設(shè)計(jì)模式（Design）禀忆，另一種是文本模式（Text）。首先我們來看設(shè)計(jì)模式落恼。
上圖中我們看到的兩個(gè)布局其實(shí)是同一個(gè)布局箩退。左邊那部分就是我們將在設(shè)備中看到的 UI 界面。右邊那部分稱之為藍(lán)圖（blueprint）佳谦。當(dāng)你在設(shè)計(jì)時(shí)這些都非常有用戴涝。你可以很輕易地看到每個(gè)視圖的外邊距、邊緣以及它們之間是否有沖突吠昭。我就當(dāng)作你們已經(jīng)知道了怎么去拖拽視圖到 Design 編輯器中喊括，并且知道怎么去創(chuàng)建與父布局或其他視圖的約束關(guān)系。我要開始介紹下一個(gè)步驟了矢棚。
從上圖中可以看到有許多的圖標(biāo)郑什。是時(shí)候來介紹一下這些圖標(biāo)到底是什么以及使用它們可以帶來什么好處。
在開始之前蒲肋，為了便于后面解釋蘑拯，我會(huì)給這些圖標(biāo)起個(gè)名。從左到右開始分別是：眼睛圖標(biāo)兜粘、磁鐵圖標(biāo)申窘、交叉箭頭圖標(biāo)、星星圖標(biāo)孔轴、數(shù)字盒子剃法、背包圖標(biāo)、對(duì)齊圖標(biāo)路鹰、指示線圖標(biāo)贷洲、放大圖標(biāo)、縮小圖標(biāo)晋柱、適應(yīng)屏幕圖標(biāo)优构、平移縮放圖標(biāo)、警告和錯(cuò)誤圖標(biāo)雁竞。
眼睛圖標(biāo)：
這個(gè)圖標(biāo)很有用钦椭，尤其是當(dāng)我們的界面上有大量的視圖時(shí)。如果這個(gè)圖標(biāo)處于打開狀態(tài)碑诉，這意味著我們同時(shí)可以看到所有視圖的約束關(guān)系彪腔。比如當(dāng)我只在調(diào)整一個(gè)按鈕時(shí)，我卻可以看到其他所有視圖的約束關(guān)系进栽。如果關(guān)閉了該功能漫仆，你就僅僅只能看到選中視圖的約束，如下圖所示泪幌。
磁鐵圖標(biāo)：
如果你了解了這個(gè)圖標(biāo)會(huì)節(jié)省許多的時(shí)間盲厌。老實(shí)說我不太擅長使用這個(gè)圖標(biāo)署照，但是我會(huì)把我所知道的都告訴你。如果這個(gè)圖標(biāo)處于關(guān)閉狀態(tài)吗浩，你在 Design 編輯器里可以拖拽或移動(dòng)你的視圖建芙，但你必須手動(dòng)構(gòu)建約束。如果這個(gè)圖標(biāo)處于打開狀態(tài)懂扼，這時(shí)編輯器就會(huì)自動(dòng)構(gòu)建與父視圖的約束禁荸。
如上圖所示。一開始圖標(biāo)處于關(guān)閉狀態(tài)阀湿，我將我的 ImageView 移動(dòng)到居中的位置赶熟，但什么都沒有發(fā)生。之后我將磁鐵圖標(biāo)打開了陷嘴，神奇的事情發(fā)生了映砖。我將我的 ImageView 移動(dòng)到居中的位置，編輯器自動(dòng)為我構(gòu)建了約束灾挨。哇哦邑退！
交叉箭頭圖標(biāo)：
這個(gè)圖標(biāo)非常簡單也非常酷炫劳澄。如果我想要清空所有的約束地技，只要點(diǎn)擊這個(gè)圖標(biāo)，然后所有的約束都會(huì)被移除掉秒拔。如下圖所示莫矗。
如上圖所示，自動(dòng)約束（磁鐵圖標(biāo)）是打開的砂缩，這就是為什么當(dāng)我將視圖移動(dòng)到水平居中時(shí)會(huì)自動(dòng)構(gòu)建約束作谚，但是當(dāng)我點(diǎn)擊了這個(gè)圖標(biāo)，所有的約束都被移除掉了梯轻。
星星圖標(biāo)：
這又是一個(gè)酷炫的圖標(biāo)。與交叉（清空約束）圖標(biāo)正好相反尽棕。我可以隨意地拖拽視圖而不用為它們構(gòu)建約束喳挑。當(dāng)我操作完成時(shí)只要點(diǎn)擊一下這個(gè)圖標(biāo)，就可以自動(dòng)構(gòu)建出所有的約束滔悉，如下圖所示伊诵。我很喜歡這個(gè)功能。
數(shù)字盒子：
作用是為你的父布局設(shè)置默認(rèn)的外邊距回官。
背包圖標(biāo)：
這個(gè)圖標(biāo)包含了許多功能。我會(huì)一個(gè)個(gè)地解釋。
因?yàn)闆]有選中任何視圖旦装，所以一開始在 Design 編輯器中所有的圖標(biāo)都是不可點(diǎn)擊的。有一些圖標(biāo)在選中了單個(gè)視圖后可用区转，另外一些圖標(biāo)在選中多個(gè)視圖后可用。首先我來解釋一下那些選中單個(gè)視圖后可用的圖標(biāo)版扩。
當(dāng)我選中了一個(gè)視圖废离，有兩個(gè)圖標(biāo)會(huì)變?yōu)榭捎玫模缦聢D所示礁芦。讓我們來看一下它們可以做些什么蜻韭。
我點(diǎn)擊了左邊的圖標(biāo)，可以看到視圖的寬度擴(kuò)展到了屏幕邊緣柿扣，但是請(qǐng)記住肖方，這只是以 dp 為單位使用數(shù)值實(shí)現(xiàn)的效果而不是所謂的 match_parent(parent)。這就意味著如果在屏幕寬度更大的設(shè)備上未状，這個(gè)視圖就無法擴(kuò)展到屏幕邊緣了俯画。右邊的圖標(biāo)也是一樣的功能，只不過是作用于垂直方向的娩践。如下圖所示活翩。
還有一件事別忘了。如果你點(diǎn)擊了擴(kuò)展寬度或高度的圖標(biāo)翻伺，而選中視圖的寬高卻只擴(kuò)展到了相鄰的視圖邊緣材泄。不要感到困惑。因?yàn)樵谏厦娴睦又胁季掷镏挥幸粋€(gè)視圖吨岭，所以它填充滿了父布局的寬高拉宗。下面的例子中我會(huì)給你看點(diǎn)不一樣的。
在開始介紹那些與多選視圖有關(guān)的圖標(biāo)之前辣辫，還有一點(diǎn)是值得注意的旦事，你在選中多個(gè)視圖時(shí)仍然可以使用那些單選視圖時(shí)可用的圖標(biāo)，如下圖所示急灭。
現(xiàn)在讓我們開始學(xué)習(xí)那些多選視圖后可用的圖標(biāo)吧姐浮。
當(dāng)我在 Design 編輯器里選中多個(gè)視圖后，剩下的幾個(gè)圖標(biāo)就都變?yōu)榭捎玫牧嗽岵觥Ｈ缦聢D所示卖鲤。
這兩個(gè)圖標(biāo)功能是一樣的的，只不過一個(gè)用于水平方向畴嘶，另一個(gè)用于垂直方向蛋逾。當(dāng)我點(diǎn)擊了水平方向的圖標(biāo)后，所有視圖都會(huì)水平方向?qū)R窗悯。那么隨之而來的問題是：這和上面剛學(xué)習(xí)過的那對(duì)圖標(biāo)有什么區(qū)別呢区匣？
區(qū)別在于，上面的圖標(biāo)通過擴(kuò)展尺寸（來對(duì)齊）蒋院。而這兩個(gè)圖標(biāo)并不會(huì)擴(kuò)展尺寸亏钩，而是將視圖平移至互相對(duì)齊莲绰。另外值得注意的是，這只是在 Design 編輯器中設(shè)定了值铸屉，如果你運(yùn)行到設(shè)備上你是無法獲得在 Design 編輯器中顯示的效果的钉蒲。你需要自己去構(gòu)建約束。但其實(shí)你可以先通過使用這些圖標(biāo)來對(duì)齊視圖彻坛，這樣可以節(jié)省很多時(shí)間顷啼，然后再構(gòu)建約束，這樣你就可以在設(shè)備上得到適當(dāng)?shù)男Ч搿Ｗ屛覀儊砜匆幌曼c(diǎn)擊這些圖標(biāo)之后會(huì)發(fā)生什么吧钙蒙。
接著再來解釋剩下的兩個(gè)圖標(biāo)。
同樣的间驮，這兩個(gè)圖標(biāo)也有著一樣的功能躬厌，只不過作用的方向不一樣。
用不著去移動(dòng)位置或者改變數(shù)值竞帽，我只要點(diǎn)擊左邊的圖標(biāo)扛施，就可以為所有選中的視圖構(gòu)建水平方向的約束。如下圖所示屹篓。
還可以通過雙擊圖標(biāo)將視圖鏈接成鏈疙渣。如果你對(duì)鏈不太了解，你可以去閱讀該系列博客的第二部分堆巧。那篇文章里介紹了什么是鏈以及使用鏈帶來的好處妄荔。
在下圖中你可以看到如何使用編輯器構(gòu)建鏈。
對(duì)齊圖標(biāo)：
這個(gè)圖標(biāo)的彈出菜單里包含了多達(dá) 11 個(gè)圖標(biāo)谍肤。其中 4 個(gè)圖標(biāo)在選中單個(gè)視圖時(shí)可用啦租，其余的在選中多個(gè)視圖時(shí)可用。
首先我來介紹一下底部那四個(gè)在選中單個(gè)視圖時(shí)可用的圖標(biāo)吧荒揣。
第一個(gè)圖標(biāo)的作用是將視圖相對(duì)于相鄰視圖水平居中并構(gòu)建約束篷角。
第二個(gè)圖標(biāo)的作用是將視圖相對(duì)于相鄰視圖垂直居中并構(gòu)建約束。
第三個(gè)圖標(biāo)的作用是將視圖相對(duì)于父布局水平居中并構(gòu)建約束系任。
第四個(gè)圖標(biāo)的作用是將視圖相對(duì)于父布局垂直居中并構(gòu)建約束恳蹲。
這些圖標(biāo)實(shí)現(xiàn)的效果如下圖所示。
現(xiàn)在就剩下那些選中多個(gè)視圖后可用的圖標(biāo)了赋除。
先來介紹上面的三個(gè)：
第一個(gè)圖標(biāo)的作用是將所有選中視圖左對(duì)齊于所選中視圖的左邊緣并構(gòu)建約束阱缓。
第二個(gè)圖標(biāo)的作用是將所有選中視圖都水平居中并構(gòu)建約束非凌。
第三個(gè)圖標(biāo)的作用是將所有選中視圖右對(duì)齊于所選中視圖的右邊緣并構(gòu)建約束举农。
這些圖標(biāo)實(shí)現(xiàn)的效果如下圖所示。
下面的四個(gè)圖標(biāo)的作用是一樣的敞嗡，只不過是作用于垂直反向颁糟。
指示線圖標(biāo)：
我們已經(jīng)在第二部分中討論過什么是指示線以及使用它會(huì)帶來什么好處了航背。這里我就不再多介紹了。你可以放心地在 UI 中添加指示線因?yàn)樗凰阕饕晥D±饷玻現(xiàn)在有了這個(gè)圖標(biāo)玖媚，我們可以使用它來添加指示線，如下圖所示婚脱。
放大今魔、縮小、適應(yīng)屏幕圖標(biāo)：
這個(gè)大家應(yīng)該都懂就不用多說了吧障贸。
平移縮放圖標(biāo)：
當(dāng)我處理一些要放大很多倍错森，并且還需要拖動(dòng)界面的工作時(shí)，這個(gè)圖標(biāo)就非常有用了篮洁。如下圖所示涩维。
警告和錯(cuò)誤圖標(biāo)：
當(dāng)我在構(gòu)建我的 UI 時(shí)，這個(gè)圖標(biāo)非常有用袁波。只要點(diǎn)擊一下這個(gè)圖標(biāo)瓦阐，就可以看到是否有任何錯(cuò)誤或者警告發(fā)生。
到這里篷牌，我們終于結(jié)束了對(duì)可視化編輯器設(shè)計(jì)模式（Design mode）的學(xué)習(xí)睡蟋。是時(shí)候開始看看我是怎么在文本模式（Text mode）里工作的了。
除了通過編輯器來改變屬性外娃磺，剛剛我們?cè)谠O(shè)計(jì)模式中做的所有事情都可以在文本模式中做到薄湿。除此之外，我們還可以編寫 XML偷卧。
工具欄：
提供了一些按鈕用來配置編輯器中的布局外觀以及編輯布局的屬性豺瘤。（官方文檔介紹）
我只準(zhǔn)備介紹工具欄中的前三個(gè)和最后一個(gè)圖標(biāo)。其他的圖標(biāo)以前就有了听诸，我相信大家對(duì)它們都非常熟悉坐求。
設(shè)計(jì)視圖模式（Design View Mode）圖標(biāo)：
第一個(gè)會(huì)顯示純粹的 UI 布局。
第二個(gè)會(huì)顯示我們的 UI 布局的藍(lán)圖晌梨。
第三個(gè)則兩種都顯示桥嗤。
這些圖標(biāo)實(shí)現(xiàn)的效果如下圖所示。
多布局圖標(biāo)：
當(dāng)我想要為不同的布局創(chuàng)建不同的布局文件時(shí)這個(gè)圖標(biāo)就可以幫上大忙仔蝌。就比如我想要單獨(dú)創(chuàng)建一個(gè)橫屏的布局泛领。使用這個(gè)圖標(biāo)我可以很快地創(chuàng)建好而不用進(jìn)入文件夾中。如下圖所示敛惊。
組件樹（Component Tree）：
展示你的布局的界面層級(jí)渊鞋。單擊某一項(xiàng)可以將其在編輯器中選中。（官方文檔介紹）
這個(gè)窗口很有用，尤其是當(dāng)我在 Design 編輯器中并且有大量的圖標(biāo)層層堆疊時(shí)锡宋，這時(shí)很難去選中某些視圖旁邊的一些視圖儡湾。在這種情況下，我一般都會(huì)使用它來選中我想要的視圖执俩。如下圖所示徐钠。
Properties：
提供了對(duì)當(dāng)前選中視圖的屬性控制。（官方文檔介紹）
面板由上圖所示的兩部分組成役首。這里我只介紹第一張圖里的東西尝丐，因?yàn)榈诙垐D里的東西在 Android Studio 誕生之初就已經(jīng)存在了，所以應(yīng)該不用我多說了吧衡奥。至于如何切換這兩種視圖摊崭，如下圖所示。
讓我們開始學(xué)習(xí)第一個(gè)屬性窗口里的新東西吧杰赛！如下圖所示呢簸。
我們要探索的主要分為兩大部分。第一部分是方形內(nèi)部乏屯，這部分是用來設(shè)置視圖的尺寸根时。另一部分是方形外部的藍(lán)色的線條，這些是用來調(diào)整視圖的約束關(guān)系的辰晕。
方形內(nèi)部：
在方形內(nèi)部我們可以看到三種形態(tài)蛤迎。
1.Wrap content:
所有的視圖都有 wrap_content 的概念，這里也是一樣『眩現(xiàn)在我們可以在 Design 編輯器中設(shè)定該屬性了替裆。如下圖所示。
這里我將一個(gè)原本屬性為 match_parent窘问，match_parent 的按鈕修改為了 wrap_content辆童，wrap_content。
2.固定尺寸：
固定尺寸指的是像我們給寬度和高度設(shè)定 dp 值一樣惠赫，現(xiàn)在我們可以直接在 UI 界面里做到把鉴。如下圖所示。
這里我將一個(gè)屬性為 wrap_content儿咱，wrap_content 的按鈕更改成了固定尺寸庭砍，并通過拖拽來設(shè)定值。
3.任意尺寸：
任意尺寸在我們構(gòu)建約束時(shí)非常有用混埠。就比如我沒有給視圖設(shè)置任何約束怠缸，并將其設(shè)置為任意尺寸，視圖就會(huì)變?yōu)?0 dp钳宪，0 dp揭北。如下圖所示概耻。
現(xiàn)在我要對(duì)這個(gè)按鈕施加左右約束，之后將其寬高設(shè)置為任意尺寸罐呼，這時(shí)按鈕會(huì)填充所有剩余的空間。如下圖所示侦高。
現(xiàn)在是時(shí)候?qū)W習(xí)有關(guān)如何設(shè)置視圖的約束值了嫉柴。
上圖中所有紅色的方形區(qū)域包含了選中視圖的所有約束設(shè)置。
這些線條的作用如下圖所示奉呛。
上圖中有一個(gè)按鈕计螺，我為該按鈕構(gòu)建了左側(cè)值為 24 dp 的約束。之后我將值修改為 207 dp瞧壮，最后我通過點(diǎn)擊小圓點(diǎn)將約束移除登馒。有一點(diǎn)值得注意的是，這些值不是約束咆槽，而是外邊距陈轿。你只能在構(gòu)建約束后設(shè)置該值。
希望你們喜歡我的 Constraint Layout（這到底是什么） 這一系列教程秦忿。今天我們完成了所有我對(duì) Constraint Layout 了解的內(nèi)容的介紹麦射。
下次我們?cè)僖黄饘W(xué)點(diǎn)新的知識(shí)吧。再見灯谣。周末愉快 ?? 潜秋。
