<b>本文講的是ConstraintLayout (這到底是什麼)，</b>
<b></b>
喔，又是新的一天，為了不浪費這寶貴的時光，讓我們來學點新知識吧 :)。
大家好，今天讓我們學習 Android 裡的 Constraint 布局。
動機：
我想先讨論一下我在學習這個很酷的布局時的經驗。當 Google 釋出這個布局後我就開始學習了，在這個過程中我遇到了很多的問題。我想找一些優秀的教程，但是結果都是一些教我在可視化編輯器裡拖拽圖檔的東西，這些對我一點用都沒有。兩個月之後我改變了我的方法。通過分析我自己的特點我找到了答案。我擅長用 XML 來編寫 LinearLayout，RelativeLayout，FrameLayout 等，是以我覺得我應該通過 XML 來學習 ConstraintLayout。但是當我在可視化編輯器裡添加了一些元件并打開 XML 檔案的時候，我再一次陷入了困境，這裡面有太多我不認識的新标簽了。雖然感到很沮喪但我并不打算就此放棄。再一次地，我改變了方法，這次我決定放棄可視化編輯器，建立一個 RelativeLayout 再将它轉換成 ConstraintLayout。一切盡在意料之中，這次我隻用了一天就掌握了它
，現在我已經習慣使用 ConstraintLayout 了。
在這之後，我又用同樣的方法将 LinearLayout 和 FrameLayout 轉成了 ConstraintLayout。今天我将會在這篇部落格中使用同樣的方法。每個人腦回路都不太一樣，是以有可能你并不認同我的方法。但是對于那些苦于不知如何入手的朋友們那那可以向你保證這個方法時值得一試的。還有一個好消息那就是現在我知道如何順暢的使用可視化編輯器了。事情已經說的很清楚了，現在是時候開始學習 CONSTRAINT LAYOUT 了。
首先我們需要下載下傳 Android Studio 2.3。在這之前的可視化編輯器做的不夠好，而且在 Design 标簽欄裡還有一些問題。是以一定要下載下傳 2.3 beta 版。
建立新工程
現在，我們的工程已經準備好了。因為我選了 No Activity，是以在工程裡沒有 Java 和 XML 布局檔案。如下所示。
我們将主要圍繞布局檔案來建構這篇文章。
1. 從 RelativeLayout 到 ConstraintLayout：
現在我會建立第一個 RelativeLayout，之後我們将把它轉化成 ConstraintLayout。
從上圖我們可以看到這是一個 Android 最常見的清單設計樣式。我會在下面向你展示我是如何通過 XML 實作的。現在隻簡單的關注圖檔上一眼就可以看到的箭頭。從這些箭頭可以看出來我們是怎樣用 RelativeLayout 的标簽來實作位置關系的。
比如标題 TextView 就是 android:layout_toRightOf ImageView 的。
作為一個使用者我有這些需求
我想要一個貼靠螢幕左側并且寬高比為 4:3 的 ImageView。
我想要一個單行标題，它應該在圖檔的右邊。
我想要一個描述，在圖檔右邊标題下邊，最多兩行。
我想要一個按鈕，在圖檔下邊并且和描述左對齊
我寫了下面這樣的 XML，重要的标簽會加粗顯示。
現在我想每個人都可以很輕松地知道我是如何實作這個 UI 的了。為了更突出一點，我将 UI 中重要的标簽單獨拿出來了。
現在是時候把這個布局轉換成 ConstraintLayout 了。首先我們需要在 gradle 檔案裡增加依賴并同步。
如下圖示，現在我們的 UI 已經是 ConstraintLayout 了。
這和 RelativeLayout 的效果是百分百相同的。你可能要問了。為什麼我沒有在這張圖裡顯示箭頭。那是因為我不想攪亂你的思緒。我馬上就會向你展示帶箭頭的圖像，但是你得保證不隻關注下面這張圖，開始閱讀和享受吧。
哈哈，再說一件事。當我學習到這個階段時，我不依賴可視化編輯器建立了這個 UI，但是當我打開可視化編輯器了，我對自己做到的事感到驚訝。是以在學習了 XML 之後，我可以在幾分鐘之内通過可視化編輯器完成同樣的事了。現在是時候從 XML 開始學習了。重要的标簽已經被加粗顯示。
在了解更多細節之前，我要告訴你一個關于 ConstraintLayout 的秘密武器：如何閱讀XML。
就像在 RelativeLayout 中，當我們使用 android:layout_toRightOf="@id/abc" 就代表着目前的視圖在源視圖的右邊。這意味着編輯器自動地識别出了我們指的是目前的視圖。我不需要額外的聲明我操作的是哪個視圖，隻需要通過 id 引用其它視圖就好了。
但在 ConstraintLayout 中，我需要同時指出目前的元件和别的元件。這是 ConstraintLayout 的一個特點。就像下面的例子一樣。(隻需要關注标簽名，暫時别去想它是幹嘛的)
如果你看了就知道我指的是 "layout_constraintLeft_toLeftOf"。
我對這個元件說，嗨，把你的的左邊緣和有這個 id 的元件的左邊對齊。簡單，現在回到正題吧。
為了簡單考慮，我還是将我們需要的标簽單獨拿出來讨論。
現在我們就隻讨論描述文字。把之前提到的 ConstraintLayout 的特點記在腦子裡，你需要先提目前視圖，然後才輪到其它視圖。。
android:id=”@+id/titleTextView”:
我想這夠簡單，不需要解釋。
android:layout_width=”0dp”:
寬 0dp 說明寬應當被别的限制控制，你會在下面看到它。
app:layout_constraintLeft_toRightOf=”@+id/listingImageView”:
在這裡我指定了渲染的順序。嗨，把我(目前的 TextView)的左邊緣放在 ImageView(@+id/listingImageView) 的右邊。歡呼吧，現在我們已經知道該如何使用這個布局。隻要你掌握了閱讀的方法就是很簡單的。
app:layout_constraintRight_toRightOf=”parent”:
在這裡我指定了渲染的順序。嗨，讓我(目前的 TextView)的右邊緣和父元件的右邊對齊。現在，我的寬度就是從 ImageView 的右邊到父元件右邊這麼多了。這就是為什麼我們将寬度設為 0dp。
着重注意：
這裡沒有 match_parent 屬性，就算你用了也沒用。你必須使用 parent 屬性。你肯定要問為什麼了，可是我也不知道。但是我覺得使用 parent 會讓你在閱讀 XML 更明确。
app:layout_constraintTop_toTopOf=”parent”:
在這裡我指定了渲染的順序。嗨，把我(目前的 TextView)的上邊緣和父元件的上邊緣對齊。這樣我就始終在上面了。
現在大家最重要的事就是去練習練習了。我花費了大量的時間去學習這個布局，但希望你能節省點時間。
現在我想向你展示完成時的可視化編輯器顯示的樣子。
現在你可以暫停一下了。嘗試去實作同樣的例子。當你完成适應了這個布局就可以嘗試我下面提到的這些标簽了。
在試過之後。找一個合适的時間，我們将會在下一篇文章中說一些 ConstraintLayout 的新知識。掌握了這些标簽後學點新東西也就不是什麼難事了。
那麼大家，是時候說再見了。讓我們在下一篇文章中再會。
<b>原文釋出時間為：2017年2月10日</b>
<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>