<b>本文講的是ConstraintLayout 可視化[Design]編輯器 （這到底是什麼）[第四部分]，</b>
<b></b>
哇哦，又是新的一天。為了不浪費這寶貴的時光，讓我們來學點新知識吧
。
動機：
我們需要下載下傳 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 時，這個圖示非常有用。隻要點選一下這個圖示，就可以看到是否有任何錯誤或者警告發生。
到這裡，我們終于結束了對可視化編輯器設計模式（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 了解的内容的介紹。
下次我們再一起學點新的知識吧。再見。周末愉快
<b>原文釋出時間為：2017年2月27日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>