一.ConstraintLayout簡(jiǎn)介

ConstraintLayout是Android Studio 2.2中主要的新增功能之一，ConstraintLayout是使用可視化的方式來(lái)編寫(xiě)界面卿城。
ConstraintLayout優(yōu)點(diǎn)：ConstraintLayout是采用約束的方式來(lái)指定各個(gè)控件的位置和關(guān)系的产场，它有點(diǎn)類似于RelativeLayout，它可以有效地解決布局嵌套過(guò)多的問(wèn)題拗慨。

二.添加依賴

新建ConstraintLayout項(xiàng)目廓八。另外奉芦，確保你的Android Studio是2.2或以上版本。
為了要使用ConstraintLayout剧蹂，我們需要在app/build.gradle文件中添加ConstraintLayout的依賴声功，如下所示

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.1.1'
    testCompile 'junit:junit:4.12'
    
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

}

添加依賴后重新編譯

q.gif

轉(zhuǎn)換完成之后，原RelativeLayout中的內(nèi)容也會(huì)自動(dòng)轉(zhuǎn)換到ConstraintLayout中

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhoujian.constraintlayout.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/textView"
        tools:layout_constraintTop_creator="1"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        tools:layout_constraintLeft_creator="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"/>

</android.support.constraint.ConstraintLayout>

圖中的TextView宠叼。如果你不需要它的話先巴，可以選中這個(gè)控件，然后按鍵盤(pán)上的Delete鍵即可刪除冒冬。

w.gif

左邊部分主要用于預(yù)覽最終的界面效果伸蚯，右邊部分主要用于觀察界面內(nèi)各個(gè)控件的約束情況。

三.基本操作

ConstraintLayout的基本用法很簡(jiǎn)單简烤，比如我們想要向布局中添加一個(gè)按鈕剂邮，那么只需要從左側(cè)的Palette區(qū)域拖一個(gè)Button進(jìn)去就可以了，如下圖所示横侦。

e.gif

由于沒(méi)有添加任何約束抗斤，布局文件中的布局代碼是報(bào)錯(cuò)的

r.png

給Button添加約束，每個(gè)控件的約束都分為垂直和水平兩類丈咐，一共可以在四個(gè)方向上給控件添加約束瑞眼，如下圖所示。

t.png

比如說(shuō)棵逊，想讓Button位于布局的左上角伤疙，就可以這樣添加約束，如下圖所示辆影。

y.gif

如果我們想要讓Button居中顯示徒像，那么就需要給它的上下左右都添加約束，如下圖所示蛙讥。

u.gif

我們還可以使用約束讓一個(gè)控件相對(duì)于另一個(gè)控件進(jìn)行定位锯蛀。比如說(shuō)，我們希望再添加一個(gè)Button次慢，讓它位于第一個(gè)Button的正下方旁涤，并且間距50dp，那么操作如下所示迫像。

i.gif

添加約束的方式已經(jīng)學(xué)完了劈愚，那么怎樣刪除約束呢？刪除約束的方式一共有三種方式：

第一種：刪除一個(gè)單獨(dú)的約束闻妓，將鼠標(biāo)懸浮在某個(gè)約束的圓圈上菌羽，然后該圓圈會(huì)變成紅色，這個(gè)時(shí)候單擊一下就能刪除了由缆，如下圖所示注祖。

o.gif

第二種：刪除某一個(gè)控件的所有約束猾蒂，選中一個(gè)控件，然后它的左下角會(huì)出現(xiàn)一個(gè)刪除約束的圖標(biāo)是晨，點(diǎn)擊該圖標(biāo)就能刪除當(dāng)前控件的所有約束了婚夫，如下所示。

p.gif

第三種用于刪除當(dāng)前界面中的所有約束署鸡，點(diǎn)擊工具欄中的刪除約束圖標(biāo)即可案糙，如下圖所示。

a.png

刪除所有約束：

s.gif

當(dāng)選中任意一個(gè)控件的時(shí)候靴庆，在右側(cè)的Properties區(qū)域就會(huì)出現(xiàn)很多的屬性選項(xiàng)时捌，如下圖所示。

d.png

在這里我們就可以設(shè)置當(dāng)前控件的所有屬性炉抒，如文本內(nèi)容奢讨、顏色、點(diǎn)擊事件等等焰薄。

需要我們重點(diǎn)掌握的是Properties區(qū)域的上半部分拿诸，這部分也被稱為Inspector。

在Inspector中有一個(gè)縱向的軸和一個(gè)橫向的軸塞茅，這兩個(gè)軸也是用于確定控件的位置的亩码。我們剛才給Button的上下左右各添加了一個(gè)約束，然后Button就能居中顯示了野瘦，其實(shí)就是因?yàn)檫@里縱橫軸的值都是50描沟。如果調(diào)整了縱橫軸的比例，那么Button的位置也會(huì)隨之改變鞭光，如下圖所示吏廉。

f.gif

Inspector最中間的那個(gè)正方形區(qū)域，它是用來(lái)控制控件大小的惰许。一共有三種模式可選席覆，每種模式都使用了一種不同的符號(hào)表示，點(diǎn)擊符號(hào)即可進(jìn)行切換汹买。

如圖所示：

g.gif

箭頭表示wrap content
直線表示固定值
波浪線表示match parent

如何讓一個(gè)按鈕match parent佩伤，如圖所示：

h.gif

注意：要記得將Button左側(cè)和右側(cè)的間距設(shè)置成0才行。

四.Guidelines

如果讓兩個(gè)按鈕共同居中對(duì)齊該怎么辦卦睹？這時(shí)候就需要用到Guidelines
如下小圖標(biāo)就是Guidelines

j.png

如何使用畦戒，如下圖所示：

k.gif

五.自動(dòng)添加約束

自動(dòng)添加約束的方式主要有兩種方库，一種叫Autoconnect结序，一種叫Inference

Autoconnect:

開(kāi)啟Autoconnect，默認(rèn)是關(guān)閉的

z.png

動(dòng)態(tài)演示纵潦，如下圖所示：

x.gif

Inference圖標(biāo)：

m.png

動(dòng)態(tài)演示徐鹤，如下圖所示：

v.gif