一 背景
ConstraintLayout 是目前是android studio 2.2 以后的默認(rèn)根布局米碰。 到目前為止汰翠，大家還是習(xí)慣常用的布局踪栋。同事先嘗試了下ConstraintLayout優(yōu)化布局層次倦青，筆者也使用了下祭饭，發(fā)現(xiàn)確實(shí)比較好用芜茵。下面我們一起來試著使用布局吧~~
二 demo
來看下有個(gè)簡單的布局是這個(gè)樣子的
其中文字‘金豆’ 左邊金色條是居中對齊文字一欄的。按傳統(tǒng)布局倡蝙，這個(gè)簡單的布局至少需要三層布局九串， 垂直方向和 單個(gè)水平方向。下面看下使用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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp">
<ImageView
android:id="@+id/golden_beans_tips_icon"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:scaleType="fitCenter"
android:src="?attr/skin_line_gold30_gift"
app:layout_constraintBottom_toBottomOf="@+id/golden_beans_tips"
app:layout_constraintTop_toTopOf="@+id/golden_beans_tips"
tools:src="@drawable/line_gold30_gift" />
<TextView
android:id="@+id/golden_beans_tips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="25dp"
android:importantForAccessibility="no"
android:text="@string/pay_unit"
android:textColor="?attr/skinT2"
android:textSize="@dimen/skin_textsize_l3"
app:layout_constraintLeft_toRightOf="@+id/golden_beans_tips_icon"
app:layout_constraintTop_toBottomOf="parent"
tools:textColor="@color/skin_t2" />
<TextView
android:id="@+id/golden_bean_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:contentDescription="@{viewModel.goldenBeanDescription}"
android:text="12"
android:textColor="?attr/skinT2"
android:textSize="@dimen/mine_balance_text_size"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/golden_beans_tips"
tools:text="12"
tools:textColor="@color/skin_t2" />
<TextView
android:layout_width="90dp"
android:layout_height="35dp"
android:layout_marginRight="15dp"
android:background="@drawable/bg_btn_mine_balance"
android:gravity="center"
android:text="@string/pay_money"
android:textColor="@color/skin_t7"
android:textSize="@dimen/skin_textsize_l4"
app:layout_constraintBottom_toBottomOf="@+id/golden_bean_number"
app:layout_constraintRight_toLeftOf="parent"
app:layout_constraintTop_toTopOf="@+id/golden_bean_number" />
</android.support.constraint.ConstraintLayout>
其實(shí)猪钮，ConstraintLayout 寫起來比較方便，與RelativeLayout非常相似析既。 首先我們看下 要保證垂直方向的順序布局躬贡。 如果沒使用ConstraintLayout前，需要使用垂直方向的LinearLayout 或RelativeLayout眼坏。 我們的ConstraintLayout 怎樣保證的呢拂玻？
app:layout_constraintTop_toBottomOf="@+id/golden_beans_tips"
一行代碼，是不是跟RelativeLayout類似宰译。 同理 我們要保持文本 ‘12’ 和按鈕‘充值’ 水平方向
app:layout_constraintTop_toTopOf="@+id/golden_bean_number"
是不是很簡單檐蚜。那怎么保證第一行的金色條icon 居中對齊 文本 ‘金豆’呢？
app:layout_constraintBottom_toBottomOf="@+id/golden_beans_tips"
app:layout_constraintTop_toTopOf="@+id/golden_beans_tips"
即對齊文本‘金豆’的上下邊緣沿侈， 這里有一個(gè)比較形象的說法闯第，就是constraintXXX_toXXXOf 表示對于id 對本view的拉力。這里上下方向拉力一致缀拭，所以文本居中了咳短。那么我們的相對布局其實(shí)就有 4 * 2 8種方式：
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
三 進(jìn)一步升級打怪
看了上面的一個(gè)填帽，我們有個(gè)需求的ui是這樣子的
當(dāng)然，這個(gè)只是布局的一小塊咙好，你可以看成listView 的item 優(yōu)化布局的層次還是比較重要的篡腌。
你可能會說 what a shell ！９葱А嘹悼！ ConstraintLayout 來布局很簡單呀，實(shí)際上层宫，你使用上面的約束杨伙，想一層布局搞定，貌似搞不定萌腿。來限匣，看下我們的布局代碼
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:bind="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:maxLines="1"
android:ellipsize="end"
android:id="@+id/title"
android:textColor="?attr/skinT2"
bind:layout_constraintLeft_toLeftOf="parent"
bind:layout_constraintRight_toLeftOf="@+id/more"
bind:layout_constraintHorizontal_bias="0"
android:textSize="@dimen/skin_textsize_l3"
android:text="情感故事情情感故事情感故情感情感情感故事情感故情感情感感故情感情感"
tools:text="情感故事情情感故事情感故情感情感情感故事情感故情感情感感故情感情感"
tools:textColor="@color/skin_t2" />
<ImageView
android:id="@+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
bind:layout_constraintRight_toRightOf="parent"
bind:layout_constraintTop_toTopOf="@+id/title"
bind:layout_constraintBottom_toBottomOf="@+id/title"
android:src="?attr/skin_btn_arrow_stroke"
tools:src="@drawable/btn_arrow_stroke" />
</android.support.constraint.ConstraintLayout>
我們看
bind:layout_constraintLeft_toLeftOf="parent"
bind:layout_constraintRight_toLeftOf="@+id/more"
使用這兩行代碼之后文本 已經(jīng)在 icon 更多左邊，但是文本是居中的毁菱，看起來是這樣
原因是parent左邊和右邊more的拉力是相同的膛腐，所以文本寬度不夠時(shí)，居中了鼎俘。那問題來了，我想讓文本居左怎么辦辩涝？
bind:layout_constraintRight_toLeftOf去不掉贸伐，是需要保證在icon的左邊，那怎么辦呢怔揩？
app:layout_constraintHorizontal_bias="0"
layout_constraintHorizontal_bias 表示水平偏向捉邢， 取值 0 到 1， 即在兩個(gè)拉力中偏左為0商膊， 偏右為1 伏伐，默認(rèn)就是0.5， 也可以看成左右間距比例晕拆。相似的還有垂直方向layout_constraintVertical_bias
恩藐翎，ui需求又來了，比較常見的如实幕， 水平三個(gè)按鈕吝镣，我想等分水平的，這里不再贅述昆庇，ConstraintLayout中類似LinearLayout weight的屬性就ok末贾。
app:layout_constraintHorizontal_weight="1"
四 更多
還有幾個(gè)重要的屬性，本文不一一列出整吆，前面的基本需求都無壓力了拱撵。
app:layout_constraintHorizontal_chainStyle 鏈?zhǔn)降?br>
以及 按寬高比布局屬性 app:layout_constraintDimensionRatio辉川。
