[譯] 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 瞭解的內容的介紹。

下次我們再一起學點新的知識吧。再見。週末愉快 ? 。