ConstraintLayout使用解析

AndroidStudio3.0建立Project默認的佈局就是ConstraintLayout。

AndroidStudio3.0前的能夠本身修改，使用ConstraintLayout。

爲了要使用ConstraintLayout，咱們須要在app/build.gradle文件中添加ConstraintLayout的依賴，以下所示。

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.1.2'
}

如今打開res/layout/activity_main.xml文件，因爲這是一個新建的空項目，Android Studio會自動幫咱們建立好一個佈局，以下圖所示。

不過，Android Studio自動建立的這個佈局默認使用的是RelativeLayout，咱們能夠經過以下操做將它轉換成ConstraintLayout。

轉換完成以後，原RelativeLayout中的內容也會自動轉換到ConstraintLayout中，好比圖中的TextView。若是你不須要它的話，能夠選中這個控件，而後按鍵盤上的Delete鍵便可刪除。

咱們能夠看到，如今主操做區域內有兩個相似於手機屏幕的界面，左邊的是預覽界面，右邊的是藍圖界面。這兩部分均可以用於進行佈局編輯工做，區別是左邊部分主要用於預覽最終的界面效果，右邊部分主要用於觀察界面內各個控件的約束狀況。

基本操做

下面咱們來學習一些具體的操做吧，ConstraintLayout的基本用法很簡單，好比咱們想要向佈局中添加一個按鈕，那麼只須要從左側的Palette區域拖一個Button進去就能夠了，以下圖所示。

雖然說如今Button已經添加到界面上了，可是因爲咱們尚未給Button添加任何的約束，所以Button並不知道本身應該出如今什麼位置。如今咱們在預覽界面上看到的Button位置並非它最終運行後的實際位置，若是一個控件沒有添加任何約束的話，它在運行以後會自動位於界面的左上角。

那麼下面咱們就來給Button添加約束，每一個控件的約束都分爲垂直和水平兩類，一共能夠在四個方向上給控件添加約束，以下圖所示。

上圖中Button的上下左右各有一個圓圈，這圓圈就是用來添加約束的，咱們能夠將約束添加到ConstraintLayout，也能夠將約束添加到另外一個控件。好比說，想讓Button位於佈局的右下角，就能夠這樣添加約束，以下圖所示。

咱們給Button的右邊和下邊添加了約束，所以Button就會將本身定位到佈局的右下角了。相似地，若是咱們想要讓Button居中顯示，那麼就須要給它的上下左右都添加約束，以下圖所示。

這就是添加約束最基本的用法了。

除此以外，咱們還可使用約束讓一個控件相對於另外一個控件進行定位。好比說，咱們但願再添加一個Button，讓它位於第一個Button的正下方，而且間距64dp，那麼操做以下所示。

如今添加約束的方式咱們已經學完了，那麼該怎樣刪除約束呢？其實也很簡單，刪除約束的方式一共有三種，第一種用於刪除一個單獨的約束，將鼠標懸浮在某個約束的圓圈上，而後該圓圈會變成紅色，這個時候單擊一下就能刪除了，以下圖所示。

第二種用於刪除某一個控件的全部約束，選中一個控件，而後它的左下角會出現一個刪除約束的圖標，點擊該圖標就能刪除當前控件的全部約束了，以下所示。

第三種用於刪除當前界面中的全部約束，點擊工具欄中的刪除約束圖標便可，以下圖所示。

Inspector

這樣咱們就把ConstraintLayout的基本用法學完了，接下來咱們開始學習一些進階的內容。

當你選中任意一個控件的時候，在右側的Properties區域就會出現不少的屬性選項，以下圖所示。

在這裏咱們就能夠設置當前控件的全部屬性，如文本內容、顏色、點擊事件等等。這些功能都很是簡單，我就再也不進行詳細介紹，你們本身點一點就會操做了。

須要咱們重點掌握的是Properties區域的上半部分，這部分也被稱爲Inspector。

首先能夠看到，在Inspector中有一個縱向的軸和一個橫向的軸，這兩個軸也是用於肯定控件的位置的。咱們剛纔給Button的上下左右各添加了一個約束，而後Button就能居中顯示了，其實就是由於這裏縱橫軸的值都是50。若是調整了縱橫軸的比例，那麼Button的位置也會隨之改變，以下圖所示。

不過，雖然咱們將橫軸的值拖動到了100，可是Button並無緊貼到佈局的最右側，這是爲何呢？實際上，Android Studio給控件的每一個方向上的約束都默認添加了一個16dp的間距，從Inspector上面也能夠明顯地看出來這些間距的值。若是這些默認值並非你想要的，能夠直接在Inspector上進行修改，以下圖所示：

能夠看到，修改爲0以後Button右側的間距就沒了。

接下來咱們再來學習一下位於Inspector最中間的那個正方形區域，它是用來控制控件大小的。一共有三種模式可選，每種模式都使用了一種不一樣的符號表示，點擊符號便可進行切換。

•  表示wrap content，這個咱們很熟悉了，不須要進行什麼解釋。
•  表示固定值，也就是給控件指定了一個固定的長度或者寬度值。
•  表示any size，它有點相似於match parent，但和match parent並不同，是屬於ConstraintLayout中特有的一種大小控制方式，下面咱們來重點講解一下。

首先須要說明，在ConstraintLayout中是有match parent的，只不過用的比較少，由於ConstraintLayout的一大特色就是爲了解決佈局嵌套，既然沒有了佈局嵌套，那麼match parent也就沒有多大意義了。

而any size就是用於在ConstraintLayout中頂替match parent的，先看一下咱們怎樣使用any size實現和match parent一樣的效果吧。好比說我想讓Button的寬度充滿整個佈局，操做以下圖所示。

能夠看到，咱們將Button的寬度指定成any size，它就會自動充滿整個佈局了。固然還要記得將Button左側的間距設置成0才行。

那有的朋友可能會問了，這和match parent有什麼區別呢？其實最大的區別在於，match parent是用於填充滿當前控件的父佈局，而any size是用於填充滿當前控件的約束規則。舉個例子更好理解，若是咱們有一個新的Button，它的其中一個約束是添加到當前這個Button上的，那麼any size的效果也會發生改變，以下圖所示。

經過上圖的演示，相信你已經很好地理解any size的做用了。

Guidelines

如今你已經對ConstraintLayout比較熟悉，而且能使用ConstraintLayout來編寫一些簡單的界面了。不過目前有一個問題可能還比較頭疼，剛纔咱們已經實現了讓一個按鈕居中對齊的功能，若是咱們想讓兩個按鈕共同居中對齊該怎麼實現呢？

其實這個需求很常見，好比說在應用的登陸界面，都會有一個登陸按鈕和一個註冊按鈕，無論它們是水平居中也好仍是垂直居中也好，但確定都是兩個按鈕共同居中的。

想要實現這個功能，僅僅用咱們剛剛學的那些知識是不夠的，這須要用到ConstraintLayout中的一個新的功能，Guidelines。

下面咱們仍是經過實際操做來學習一下Guidelines的用法吧。好比如今已經向界面中添加了登陸和註冊這兩個按鈕，以下圖所示。

而後咱們但願讓這兩個按鈕在水平方向上居中顯示，在垂直方向上都距離底部64dp，那麼就須要先添加一個垂直方向上的Guideline，以下圖所示。

我來對上圖中的操做進行一下解釋。首先點擊通知欄中的Guidelines圖標能夠添加一個垂直或水平方向上的Guideline，這裏咱們須要的是垂直方向上的。而Guideline默認是使用的dp尺，咱們須要選中Guideline，並點擊一下最上面的箭頭圖標將它改爲百分比尺，而後將垂直方向上的Guideline調整到50%的位置，這樣就將準備工做作好了。

接下來咱們開始實現讓兩個按鈕在水平方向上居中顯示，並距離底部64dp的功能，以下圖所示。

能夠看到，咱們給登陸按鈕的右邊向Guideline添加約束，登陸按鈕的下面向底部添加約束，並拖動按鈕讓它距離底部64dp。而後給註冊按鈕的左邊向Guideline添加約束，註冊按鈕的下面向登陸按鈕的下面添加約束。這樣就實現了讓兩個按鈕在水平方向上居中顯示，在垂直方向上都距離底部64dp的功能了。

自動添加約束

不過若是界面中的內容變得複雜起來，給每一個控件一個個地添加約束也是一件很繁瑣的事情。爲此，ConstraintLayout中支持自動添加約束的功能，能夠極大程度上簡化那些繁瑣的操做。

自動添加約束的方式主要有兩種，一種叫Autoconnect，一種叫Inference，咱們先來看第一種。

想要使用Autoconnect，首先須要在工具欄中將這個功能啓用，默認狀況下Autoconnect是不啓用的，以下圖所示。

Autoconnect能夠根據咱們拖放控件的狀態自動判斷應該如何添加約束，好比咱們將Button放到界面的正中央，那麼它的上下左右都會自動地添加上約束，以下圖所示。

而後咱們在這個Button的下方再放置一個Button，效果以下。

能夠看到，只須要將Button拖放到界面上，Autoconnect會判斷咱們的意圖，並自動給控件添加約束。不過Autoconnect是沒法保證百分百準確判斷出咱們的意圖的，若是自動添加的約束並非你想要的話，還能夠在任什麼時候候進行手動修改。總之，能夠把它當成一個輔助工具，但不能徹底靠它去添加控件的約束。

以上是Autoconnect的用法，接下來咱們看一下Inference的用法。Inference也是用於自動添加約束的，但它比Autoconnect的功能要更爲強大，由於AutoConnect只能給當前操做的控件自動添加約束，而Inference會給當前界面中的全部元素自動添加約束。於是Inference比較適合用來實現複雜度比較高的界面，它能夠一鍵自動生成全部的約束。

下面咱們就經過一個例子來演示一下Inference的用法，好比界面上如今有兩個TextView，兩個EditText，和兩個Button，以下圖所示。

接下來咱們先將各個控件按照界面設計的位置進行擺放，擺放完成以後點擊一下工具欄上的Infer Constraints按鈕，就能爲全部控件自動添加約束了，以下圖所示。

如今運行一下程序，最終效果以下圖所示：