[譯] ConstraintLayout 可視化[Design]編輯器（這究竟是什麼）[第四部分]

• 原文地址：Constraint Layout Visual [Design] Editor ( What the hell is this )[Part4]

• 原文做者：Hafiz Waleed Hussain
• 譯文出自：掘金翻譯計劃
• 譯者：yazhi1992
• 校對者：phxnirvana，tanglie1993

哇哦，又是新的一天。爲了避免浪費這寶貴的時光，讓咱們來學點新知識吧 🙂 。

你們好，但願各位都有所進步。在第一部分, 第二部分 和 第三部分這些文章中咱們已經學習了許多關於 ConstraintLayout 的知識。如今是時候來學習這個神奇佈局的剩餘內容了。順便一提，本文是 Constraint Layout（這究竟是什麼）系列的最後一篇文章了。

動機：

學習動機與先前在第一部分中討論的是同樣的。這篇文章裏咱們將會學習如何使用可視化編輯器（Visual Editor）。有一些地方我會引用到第二部分的內容。我將會使用可視化編輯器來實現一些，咱們已經討論過怎樣在 XML 或者 Java 中實現的概念。經過這種方式咱們能夠節省許多的時間。

咱們須要下載 2.3 版本的 Android studio。先前版本的可視化編輯器不太完善，有時會在 Design 面板上顯示錯誤的信息。因此下載 2.3 beta 版是很是重要的，該版本在我寫這篇文章時已經能夠獲取到了。

引言

在這篇文章裏咱們大部分都是使用可視化編輯器，用到 XML 的機會比較少。那麼讓咱們開始吧！

在上圖中我標出了五個紅色的方框。這就是整個可視化編輯器了。在開始介紹以前有一個問題。那就是：瞭解各個組成部分以及它們的名字真的那麼重要嗎？在我看來，若是咱們只是想要獨立完成某些工做，那麼經過一遍又一遍地重複那些工做就能夠掌握相應的技能，並不須要瞭解術語。但若是咱們想要幫助社區裏的成員，或者說咱們想要成爲一名優秀的團隊合做者，咱們就應該學習全部相關的術語。這確實頗有用，我將會展現給大家看。

我知道大多數人不是很瞭解（或許有一些人瞭解 🙂）什麼是 Palette, Component Tree, Properties 等等，可是我將會使用這些術語來描述流程。任何從事 UI 工做的開發人員都會遵循這些步驟。

從 Palette 窗口選取 UI 組件 -> 拖拽到 Design 編輯器中 -> 在 Property 窗口中改變組件的屬性（寬度，高度，文字，外邊距，內邊距… 等等） -> 在 Design 編輯器中調整約束關係。

總共四個步驟，我再重複一遍。

Palette 窗口 -> Design 編輯器 -> Properties 窗口 -> Design 編輯器

咱們構建 UI 時 90% 都是這樣的基本流程。若是你知道這些術語，你就能夠輕易地想象出咱們說的是什麼。接下來我會向你們介紹我剛剛提到的那些術語究竟是什麼，以及咱們怎麼在可視化編輯器中找到它們。

Palette:

提供了一系列的部件（widgets）和佈局（layouts），你能夠將其拖拽到位於編輯器中的佈局裏。（官方文檔介紹）

在這裏你能夠獲取到 Android 提供的全部 UI 組件。在右上角有一個搜索圖標，你能夠經過搜索節省尋找的時間。搜索圖標的右邊還有一個設置圖標。點擊這個酷炫的圖標，你能夠根據我的喜愛更改 UI 組件的外觀。

Design 編輯器:

經過設計（Design）視圖和藍圖（Blueprint）視圖來預覽你的佈局。（官方文檔介紹）

上圖就是 Design 編輯器。在 Design 編輯器裏咱們有兩種模式可選，一種是設計模式（Design），另外一種是文本模式（Text）。首先咱們來看設計模式。

上圖中咱們看到的兩個佈局實際上是同一個佈局。左邊那部分就是咱們將在設備中看到的 UI 界面。右邊那部分稱之爲藍圖（blueprint）。當你在設計時這些都很是有用。你能夠很輕易地看到每一個視圖的外邊距、邊緣以及它們之間是否有衝突。我就看成大家已經知道了怎麼去拖拽視圖到 Design 編輯器中，而且知道怎麼去建立與父佈局或其餘視圖的約束關係。我要開始介紹下一個步驟了。

從上圖中能夠看到有許多的圖標。是時候來介紹一下這些圖標究竟是什麼以及使用它們能夠帶來什麼好處。

在開始以前，爲了便於後面解釋，我會給這些圖標起個名。從左到右開始分別是：眼睛圖標、磁鐵圖標、交叉箭頭圖標、星星圖標、數字盒子、揹包圖標、對齊圖標、指示線圖標、放大圖標、縮小圖標、適應屏幕圖標、平移縮放圖標、警告和錯誤圖標。

眼睛圖標：

這個圖標頗有用，尤爲是當咱們的界面上有大量的視圖時。若是這個圖標處於打開狀態，這意味着咱們同時能夠看到全部視圖的約束關係。好比當我只在調整一個按鈕時，我卻能夠看到其餘全部視圖的約束關係。若是關閉了該功能，你就僅僅只能看到選中視圖的約束，以下圖所示。

磁鐵圖標：

若是你瞭解了這個圖標會節省許多的時間。老實說我不太擅長使用這個圖標，可是我會把我所知道的都告訴你。若是這個圖標處於關閉狀態，你在 Design 編輯器裏能夠拖拽或移動你的視圖，但你必須手動構建約束。若是這個圖標處於打開狀態，這時編輯器就會自動構建與父視圖的約束。

如上圖所示。一開始圖標處於關閉狀態，我將個人 ImageView 移動到居中的位置，但什麼都沒有發生。以後我將磁鐵圖標打開了，神奇的事情發生了。我將個人 ImageView 移動到居中的位置，編輯器自動爲我構建了約束。哇哦！

交叉箭頭圖標：

這個圖標很是簡單也很是酷炫。若是我想要清空全部的約束，只要點擊這個圖標，而後全部的約束都會被移除掉。以下圖所示。

如上圖所示，自動約束（磁鐵圖標）是打開的，這就是爲何當我將視圖移動到水平居中時會自動構建約束，可是當我點擊了這個圖標，全部的約束都被移除掉了。

星星圖標：

這又是一個酷炫的圖標。與交叉（清空約束）圖標正好相反。我能夠隨意地拖拽視圖而不用爲它們構建約束。當我操做完成時只要點擊一下這個圖標，就能夠自動構建出全部的約束，以下圖所示。我很喜歡這個功能。

數字盒子：

做用是爲你的父佈局設置默認的外邊距。

揹包圖標：

這個圖標包含了許多功能。我會一個個地解釋。

由於沒有選中任何視圖，因此一開始在 Design 編輯器中全部的圖標都是不可點擊的。有一些圖標在選中了單個視圖後可用，另一些圖標在選中多個視圖後可用。首先我來解釋一下那些選中單個視圖後可用的圖標。

當我選中了一個視圖，有兩個圖標會變爲可用的，以下圖所示。讓咱們來看一下它們能夠作些什麼。

我點擊了左邊的圖標，能夠看到視圖的寬度擴展到了屏幕邊緣，可是請記住，這只是以 dp 爲單位使用數值實現的效果而不是所謂的 match_parent(parent)。這就意味着若是在屏幕寬度更大的設備上，這個視圖就沒法擴展到屏幕邊緣了。右邊的圖標也是同樣的功能，只不過是做用於垂直方向的。以下圖所示。

還有一件事別忘了。若是你點擊了擴展寬度或高度的圖標，而選中視圖的寬高卻只擴展到了相鄰的視圖邊緣。不要感到困惑。由於在上面的例子中佈局裏只有一個視圖，因此它填充滿了父佈局的寬高。下面的例子中我會給你看點不同的。

在開始介紹那些與多選視圖有關的圖標以前，還有一點是值得注意的，你在選中多個視圖時仍然可使用那些單選視圖時可用的圖標，以下圖所示。

如今讓咱們開始學習那些多選視圖後可用的圖標吧。

當我在 Design 編輯器裏選中多個視圖後，剩下的幾個圖標就都變爲可用的了。以下圖所示。

這兩個圖標功能是同樣的的，只不過一個用於水平方向，另外一個用於垂直方向。當我點擊了水平方向的圖標後，全部視圖都會水平方向對齊。那麼隨之而來的問題是：這和上面剛學習過的那對圖標有什麼區別呢？

區別在於，上面的圖標經過擴展尺寸（來對齊）。而這兩個圖標並不會擴展尺寸，而是將視圖平移至互相對齊。另外值得注意的是，這只是在 Design 編輯器中設定了值，若是你運行到設備上你是沒法得到在 Design 編輯器中顯示的效果的。你須要本身去構建約束。但其實你能夠先經過使用這些圖標來對齊視圖，這樣能夠節省不少時間，而後再構建約束，這樣你就能夠在設備上獲得適當的效果。讓咱們來看一下點擊這些圖標以後會發生什麼吧。

接着再來解釋剩下的兩個圖標。

一樣的，這兩個圖標也有着同樣的功能，只不過做用的方向不同。

用不着去移動位置或者改變數值，我只要點擊左邊的圖標，就能夠爲全部選中的視圖構建水平方向的約束。以下圖所示。

還能夠經過雙擊圖標將視圖連接成鏈。若是你對鏈不太瞭解，你能夠去閱讀該系列博客的第二部分。那篇文章裏介紹了什麼是鏈以及使用鏈帶來的好處。

在下圖中你能夠看到如何使用編輯器構建鏈。

對齊圖標：

這個圖標的彈出菜單裏包含了多達 11 個圖標。其中 4 個圖標在選中單個視圖時可用，其他的在選中多個視圖時可用。

首先我來介紹一下底部那四個在選中單個視圖時可用的圖標吧。

第一個圖標的做用是將視圖相對於相鄰視圖水平居中並構建約束。

第二個圖標的做用是將視圖相對於相鄰視圖垂直居中並構建約束。

第三個圖標的做用是將視圖相對於父佈局水平居中並構建約束。

第四個圖標的做用是將視圖相對於父佈局垂直居中並構建約束。

這些圖標實現的效果以下圖所示。

如今就剩下那些選中多個視圖後可用的圖標了。

先來介紹上面的三個：

第一個圖標的做用是將全部選中視圖左對齊於所選中視圖的左邊緣並構建約束。

第二個圖標的做用是將全部選中視圖都水平居中並構建約束。

第三個圖標的做用是將全部選中視圖右對齊於所選中視圖的右邊緣並構建約束。

這些圖標實現的效果以下圖所示。

下面的四個圖標的做用是同樣的，只不過是做用於垂直反向。

指示線圖標：

咱們已經在第二部分中討論過什麼是指示線以及使用它會帶來什麼好處了。這裏我就再也不多介紹了。你能夠放心地在 UI 中添加指示線由於它不算做視圖。如今有了這個圖標，咱們可使用它來添加指示線，以下圖所示。

放大、縮小、適應屏幕圖標：

這個你們應該都懂就不用多說了吧。

平移縮放圖標：

當我處理一些要放大不少倍，而且還須要拖動界面的工做時，這個圖標就很是有用了。以下圖所示。

警告和錯誤圖標：

當我在構建個人 UI 時，這個圖標很是有用。只要點擊一下這個圖標，就能夠看到是否有任何錯誤或者警告發生。

到這裏，咱們終於結束了對可視化編輯器設計模式（Design mode）的學習。是時候開始看看我是怎麼在文本模式（Text mode）裏工做的了。

除了經過編輯器來改變屬性外，剛剛咱們在設計模式中作的全部事情均可以在文本模式中作到。除此以外，咱們還能夠編寫 XML。

工具欄：

提供了一些按鈕用來配置編輯器中的佈局外觀以及編輯佈局的屬性。（官方文檔介紹）

我只準備介紹工具欄中的前三個和最後一個圖標。其餘的圖標之前就有了，我相信你們對它們都很是熟悉。

設計視圖模式（Design View Mode）圖標：

第一個會顯示純粹的 UI 佈局。

第二個會顯示咱們的 UI 佈局的藍圖。

第三個則兩種都顯示。

這些圖標實現的效果以下圖所示。

多佈局圖標：

當我想要爲不一樣的佈局建立不一樣的佈局文件時這個圖標就能夠幫上大忙。就好比我想要單首創建一個橫屏的佈局。使用這個圖標我能夠很快地建立好而不用進入文件夾中。以下圖所示。

組件樹（Component Tree）：

展現你的佈局的界面層級。單擊某一項能夠將其在編輯器中選中。（官方文檔介紹）

這個窗口頗有用，尤爲是當我在 Design 編輯器中而且有大量的圖標層層堆疊時，這時很難去選中某些視圖旁邊的一些視圖。在這種狀況下，我通常都會使用它來選中我想要的視圖。以下圖所示。

Properties：

提供了對當前選中視圖的屬性控制。（官方文檔介紹）

面板由上圖所示的兩部分組成。這裏我只介紹第一張圖裏的東西，由於第二張圖裏的東西在 Android Studio 誕生之初就已經存在了，因此應該不用我多說了吧。至於如何切換這兩種視圖，以下圖所示。

讓咱們開始學習第一個屬性窗口裏的新東西吧！以下圖所示。

咱們要探索的主要分爲兩大部分。第一部分是方形內部，這部分是用來設置視圖的尺寸。另外一部分是方形外部的藍色的線條，這些是用來調整視圖的約束關係的。

方形內部：

在方形內部咱們能夠看到三種形態。

1.Wrap content:

全部的視圖都有 wrap_content 的概念，這裏也是同樣。如今咱們能夠在 Design 編輯器中設定該屬性了。以下圖所示。

這裏我將一個本來屬性爲 match_parent，match_parent 的按鈕修改成了 wrap_content，wrap_content。

2.固定尺寸：

固定尺寸指的是像咱們給寬度和高度設定 dp 值同樣，如今咱們能夠直接在 UI 界面裏作到。以下圖所示。

這裏我將一個屬性爲 wrap_content，wrap_content 的按鈕更改爲了固定尺寸，並經過拖拽來設定值。

3.任意尺寸：

任意尺寸在咱們構建約束時很是有用。就好比我沒有給視圖設置任何約束，並將其設置爲任意尺寸，視圖就會變爲 0 dp，0 dp。以下圖所示。

如今我要對這個按鈕施加左右約束，以後將其寬高設置爲任意尺寸，這時按鈕會填充全部剩餘的空間。以下圖所示。

如今是時候學習有關如何設置視圖的約束值了。

上圖中全部紅色的方形區域包含了選中視圖的全部約束設置。

這些線條的做用以下圖所示。

上圖中有一個按鈕，我爲該按鈕構建了左側值爲 24 dp 的約束。以後我將值修改成 207 dp，最後我經過點擊小圓點將約束移除。有一點值得注意的是，這些值不是約束，而是外邊距。你只能在構建約束後設置該值。

但願大家喜歡個人 Constraint Layout（這究竟是什麼） 這一系列教程。今天咱們完成了全部我對 Constraint Layout 瞭解的內容的介紹。

下次咱們再一塊兒學點新的知識吧。再見。週末愉快 🙂 。