前言：2016 Google I/O上，google帶來了全新的布局方式：約束布局ConstraintLayout边灭，我也在最近試用了一下這種全新的布局方式
ConstraintLayout是什么
ConstraintLayout可以說是相對布局RelativeLayout的升級版，它允許我們在layout上設(shè)計子控件與子控件之間的位置關(guān)系健盒∪奘荩或許你會說，這不就是RelativeLayout之前一直在干的事情嗎扣癣？
但我們用RelativeLayout時惰帽，經(jīng)常會出現(xiàn)多層布局嵌套，而ConstraintLayout往往只需要一層就可以滿足需求父虑，從而提高軟件布局渲染的性能该酗。
例如：
相對布局RelativeLayout允許我們用以下4個屬性來設(shè)置view與view之間的位置關(guān)系
- layout_toRightOf
- layout_toLeftOf
- layout_toTopOf
- layout_toBottomOf
然而，約束布局ConstraintLayout帶來了眾多屬性
- layout_constraintTop_toTopOf
- layout_constraintTop_toBottomOf
- layout_constraintBottom_toTopOf
- layout_constraintBottom_toBottomOf
- layout_constraintLeft_toTopOf
- layout_constraintLeft_toBottomOf
- layout_constraintLeft_toLeftOf
- layout_constraintLeft_toRightOf
- layout_constraintRight_toTopOf
- layout_constraintRight_toBottomOf
- layout_constraintRight_toLeftOf
- layout_constraintRight_toRightOf
- ......
這么多屬性士嚎，中間的constraintXXX又是什么意思呢呜魄？不用想了，直接新建一個項目航邢，一探究竟就知道了耕赘！
怎樣使用ConstraintLayout
- 下載Android Studio 2.2 Preview2（2.1正式版沒有該功能骄蝇，必須安裝最新的版本）
http://tools.android.com/download/studio/canary/latest - 新建項目膳殷，在build.gradle中添加
dependencies
{
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha1'
}
ok，切換到布局的Design頁面九火，拖動一個ImageView到布局里面赚窃，如下圖：
(圖)分了兩部分，左邊為設(shè)計預(yù)覽岔激，右邊為藍圖模式
點擊一下左邊視圖的imageview勒极，會出現(xiàn)4邊各有一個小圓和4角各有一個小正方形：小圓手柄（調(diào)整手柄）可以調(diào)節(jié)控件的大小，而正方形手柄（約束手柄）可以調(diào)整控件的位置虑鼎。嘗試把4個約束手柄分別拉到界面的邊緣辱匿，看看有什么情況出現(xiàn)：
Android Studio自動把該imageview居中，來看看xml布局代碼：
<ImageView
android:src="@drawable/abc_ic_menu_cut_material"
android:layout_width="91dp"
android:layout_height="59dp"
android:id="@+id/imageView"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintLeft_toLeftOf="@+id/activity_constraint_layout"
app:layout_constraintTop_toTopOf="@+id/activity_constraint_layout"
app:layout_constraintRight_toRightOf="@+id/activity_constraint_layout"
app:layout_constraintBottom_toBottomOf="@+id/activity_constraint_layout"
/>
可以看到炫彩，自動添加了4個ConstraintLayout的屬性匾七。還是不太懂，我們再添加一個TextView來試試看：
把TextView放到ImageView下面江兢，會自動把TextView的左右約束與ImageView的左右約束連接起來昨忆。我再把TextView的頂部約束和ImageView的底部約束兩者連接起來，看看xml代碼發(fā)生了怎樣的變化：
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView"
android:layout_marginTop="8dp"
app:layout_constraintLeft_toLeftOf="@+id/imageView"
app:layout_constraintTop_toBottomOf="@+id/imageView"
app:layout_constraintRight_toRightOf="@+id/imageView"
/>
多了3個ConstraintLayout的屬性杉允。TextView顯示在ImageView的正下方邑贴。如果我再添加一個layout_constraintBottom_toTopOf屬性呢（也就是兩者的頂部約束連接）席里？
噢！TextView疊加在ImageView的上面拢驾。
原來奖磁，constraintXXX的意思是XXX約束在另一個view的什么位置。
例如控件A定義了app:layout_constraintLeft_toLeftOf="@+id/控件B"
說明控件A的左邊與控件B的左邊位置要一致繁疤。
再定義控件A的app:layout_constraintBottom_toTopOf="@+id/控件B"
說明控件A的底部與控件B的頂部位置要一致署穗，言下之意就是A出現(xiàn)在B的上方了。
結(jié)合上面兩個屬性嵌洼，A就會出現(xiàn)在B的左上方的位置上案疲。
試試只添加控件A的app:layout_constraintLeft_toLeftOf="@+id/控件B"和app:layout_constraintTop_toTopOf="@+id/imageView"，看看是不是控件A疊加在控件B的上面麻养，有點FrameLayout的味道吧：址取！鳖昌！
其實多動手拖拉一下备畦，就會明白這個全新布局的用法了。對于精細布局许昨，還是蠻有效果的呢６巍！糕档！
