轉(zhuǎn)載：http://www.reibang.com/p/17ec9bd6ca8a

1.介紹

約束布局ConstraintLayout是一個ViewGroup抄腔，可以在Api9以上的Android系統(tǒng)使用它，它的出現(xiàn)主要是為了解決布局嵌套過多的問題爷绘，以靈活的方式定位和調(diào)整小部件甚带。從Android Studio 2.3起省咨，官方的模板默認(rèn)使用ConstraintLayout须眷。

ConstraintLayout 官方文檔

2.為什么要用ConstraintLayout

在開發(fā)過程中經(jīng)常能遇到一些復(fù)雜的UI阱当，可能會出現(xiàn)布局嵌套過多的問題，嵌套得越多揩悄，設(shè)備繪制視圖所需的時間和計(jì)算功耗也就越多卖哎。簡單舉個例子：

假設(shè)現(xiàn)在要寫一個這樣的布局，可能有人會這么寫：

首先是一個垂直的LinearLayout，里面放兩個水平的LinearLayout亏娜，然后在水平的LinearLayout里面放TextView焕窝。這樣的寫法就嵌套了兩層LinearLayout。

有些人考慮到了嵌套布局帶來的風(fēng)險维贺，所以用一個RelativeLayout來裝下所有的控件它掂。那么問題來了，既然用RelativeLayout可以解決問題溯泣，為什么還要使用ConstraintLayout呢虐秋？因?yàn)镃onstraintLayout使用起來比RelativeLayout更靈活，性能更出色垃沦！還有一點(diǎn)就是ConstraintLayout可以按照比例約束控件位置和尺寸客给，能夠更好地適配屏幕大小不同的機(jī)型。

3.如何使用ConstraintLayout

3.1 添加依賴

首先我們需要在app/build.gradle文件中添加ConstraintLayout的依賴栏尚，如下所示起愈。

implementation'com.android.support.constraint:constraint-layout:1.1.3'

3.2 相對定位

相對定位是部件對于另一個位置的約束，這么說可能有點(diǎn)抽象译仗，舉個例子：

如圖所示抬虽，TextView2在TextView1的右邊，TextView3在TextView1的下面纵菌，這個時候在布局文件里面應(yīng)該這樣寫：

上面代碼中在TextView2里用到了app:layout_constraintLeft_toRightOf="@+id/TextView1"這個屬性阐污，他的意思是把TextView2的左邊約束到TextView1的右邊，如下圖所示：

同理TextView3在TextView1的下面咱圆，就需要用到app:layout_constraintTop_toBottomOf="@+id/TextView1"笛辟，即把TextView3的上面約束到TextView1的下面。

下面來看看相對定位的常用屬性：

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

layout_constraintStart_toEndOf

layout_constraintStart_toStartOf

layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf

上面屬性中有一個比較有趣的layout_constraintBaseline_toBaselineOf

Baseline指的是文本基線序苏，舉個例子：

如圖所示手幢，兩個TextView的高度不一致，但是又希望他們文本對齊忱详，這個時候就可以使用layout_constraintBaseline_toBaselineOf围来，代碼如下：

效果如下：

ConstraintLayout相對定位的用法跟RelativeLayout還是比較相似的，下面用一個圖來總結(jié)相對定位：

3.3 角度定位

角度定位指的是可以用一個角度和一個距離來約束兩個空間的中心匈睁。舉個例子：

上面例子中的TextView2用到了3個屬性：

app:layout_constraintCircle="@+id/TextView1"

app:layout_constraintCircleAngle="120"（角度）

app:layout_constraintCircleRadius="150dp"（距離）

指的是TextView2的中心在TextView1的中心的120度监透，距離為150dp，效果如下：

3.4 邊距

3.4.1 常用margin

ConstraintLayout的邊距常用屬性如下：

android:layout_marginStart

android:layout_marginEnd

android:layout_marginLeft

android:layout_marginTop

android:layout_marginRight

android:layout_marginBottom

看起來跟別的布局沒有什么差別航唆，但實(shí)際上控件在ConstraintLayout里面要實(shí)現(xiàn)margin胀蛮，必須先約束該控件在ConstraintLayout里的位置，舉個例子：

如果在別的布局里糯钙，TextView1的位置應(yīng)該是距離邊框的左邊和上面有一個10dp的邊距粪狼，但是在ConstraintLayout里退腥，是不生效的，因?yàn)闆]有約束TextView1在布局里的位置再榄。正確的寫法如下：

把TextView1的左邊和上邊約束到parent的左邊和上邊阅虫，這樣margin就會生效，效果如下：

在使用margin的時候要注意兩點(diǎn)：

控件必須在布局里約束一個相對位置

margin只能大于等于0

3.4.2 goneMargin

goneMargin主要用于約束的控件可見性被設(shè)置為gone的時候使用的margin值不跟，屬性如下：

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

舉個例子：

假設(shè)TextView2的左邊約束在TextView1的右邊，并給TextView2設(shè)一個app:layout_goneMarginLeft="10dp"米碰，代碼如下：

效果如下窝革，TextView2在TextView1的右邊，且沒有邊距吕座。

這個時候把TextView1的可見性設(shè)為gone虐译，效果如下：

TextView1消失后，TextView2有一個距離左邊10dp的邊距吴趴。

3.5 居中和偏移

在RelativeLayout中漆诽，把控件放在布局中間的方法是把layout_centerInParent設(shè)為true，而在ConstraintLayout中的寫法是：

意思是把控件的上下左右約束在布局的上下左右锣枝，這樣就能把控件放在布局的中間了厢拭。同理RelativeLayout中的水平居中l(wèi)ayout_centerHorizontal相當(dāng)于在ConstraintLayout約束控件的左右為parent的左右；RelativeLayout中的垂直居中l(wèi)ayout_centerVertical相當(dāng)于在ConstraintLayout約束控件的上下為parent的上下撇叁。

由于ConstraintLayout中的居中已經(jīng)為控件約束了一個相對位置供鸠，所以可以使用margin，如下所示：

效果如下：

上面TextView1在水平居中后使用layout_marginLeft="100dp"向右偏移了100dp陨闹。除了這種偏移外楞捂，ConstraintLayout還提供了另外一種偏移的屬性：

layout_constraintHorizontal_bias? 水平偏移

layout_constraintVertical_bias? 垂直偏移

舉個例子：

效果如下：

假如現(xiàn)在要實(shí)現(xiàn)水平偏移，給TextView1的layout_constraintHorizontal_bias賦一個范圍為 0-1 的值趋厉，假如賦值為0寨闹，則TextView1在布局的最左側(cè)，假如賦值為1君账，則TextView1在布局的最右側(cè)繁堡，假如假如賦值為0.5，則水平居中杈绸，假如假如賦值為0.3帖蔓，則更傾向于左側(cè)。

垂直偏移同理瞳脓。

3.6 尺寸約束

控件的尺寸可以通過四種不同方式指定：

使用指定的尺寸

使用wrap_content塑娇，讓控件自己計(jì)算大小

當(dāng)控件的高度或?qū)挾葹閣rap_content時，可以使用下列屬性來控制最大劫侧、最小的高度或?qū)挾龋?/p>

android:minWidth 最小的寬度

android:minHeight 最小的高度

android:maxWidth 最大的寬度

android:maxHeight 最大的高度

注意埋酬！當(dāng)ConstraintLayout為1.1版本以下時哨啃，使用這些屬性需要加上強(qiáng)制約束，如下所示：

app:constrainedWidth=”true”

app:constrainedHeight=”true”

使用 0dp (MATCH_CONSTRAINT)

官方不推薦在ConstraintLayout中使用match_parent写妥，可以設(shè)置 0dp (MATCH_CONSTRAINT) 配合約束代替match_parent拳球，舉個例子：

寬度設(shè)為0dp，左右兩邊約束parent的左右兩邊珍特，并設(shè)置左邊邊距為50dp祝峻，效果如下：

寬高比

當(dāng)寬或高至少有一個尺寸被設(shè)置為0dp時，可以通過屬性layout_constraintDimensionRatio設(shè)置寬高比扎筒，舉個例子：

寬設(shè)置為0dp莱找，寬高比設(shè)置為1:1，這個時候TextView1是一個正方形嗜桌，效果如下：

除此之外奥溺，在設(shè)置寬高比的值的時候，還可以在前面加W或H骨宠，分別指定寬度或高度限制浮定。 例如：

app:layout_constraintDimensionRatio="H,2:3"指的是? 高:寬=2:3

app:layout_constraintDimensionRatio="W,2:3"指的是? 寬:高=2:3

3.7 鏈

如果兩個或以上控件通過下圖的方式約束在一起，就可以認(rèn)為是他們是一條鏈（圖為橫向的鏈层亿，縱向同理）桦卒。

用代碼表示：

3個TextView相互約束，兩端兩個TextView分別與parent約束匿又，成為一條鏈闸盔，效果如下：

一條鏈的第一個控件是這條鏈的鏈頭，我們可以在鏈頭中設(shè)置 layout_constraintHorizontal_chainStyle來改變整條鏈的樣式琳省。chains提供了3種樣式迎吵，分別是：

CHAIN_SPREAD —— 展開元素 (默認(rèn))；

CHAIN_SPREAD_INSIDE —— 展開元素针贬，但鏈的兩端貼近parent击费；

CHAIN_PACKED —— 鏈的元素將被打包在一起。

如圖所示：

上面的例子創(chuàng)建了一個樣式鏈桦他，除了樣式鏈外蔫巩，還可以創(chuàng)建一個權(quán)重鏈。

可以留意到上面所用到的3個TextView寬度都為wrap_content快压，如果我們把寬度都設(shè)為0dp圆仔，這個時候可以在每個TextView中設(shè)置橫向權(quán)重layout_constraintHorizontal_weight(constraintVertical為縱向)來創(chuàng)建一個權(quán)重鏈，如下所示：

效果如下：

4.輔助工具

4.1 Optimizer

當(dāng)我們使用 MATCH_CONSTRAINT 時蔫劣，ConstraintLayout 將對控件進(jìn)行 2 次測量坪郭，ConstraintLayout在1.1中可以通過設(shè)置layout_optimizationLevel進(jìn)行優(yōu)化，可設(shè)置的值有：

none：無優(yōu)化

standard：僅優(yōu)化直接約束和屏障約束（默認(rèn)）

direct：優(yōu)化直接約束

barrier：優(yōu)化屏障約束

chain：優(yōu)化鏈約束

dimensions：優(yōu)化尺寸測量

4.2 Barrier

假設(shè)有3個控件ABC脉幢，C在AB的右邊歪沃，但是AB的寬是不固定的嗦锐，這個時候C無論約束在A的右邊或者B的右邊都不對。當(dāng)出現(xiàn)這種情況可以用Barrier來解決沪曙。Barrier可以在多個控件的一側(cè)建立一個屏障奕污，如下所示：

這個時候C只要約束在Barrier的右邊就可以了，代碼如下：?? ? ? ?

app:barrierDirection為屏障所在的位置液走，可設(shè)置的值有：bottom碳默、end、left缘眶、right腻窒、start、top

app:constraint_referenced_ids為屏障引用的控件磅崭，可設(shè)置多個(用“,”隔開)

4.3 Group

Group可以把多個控件歸為一組，方便隱藏或顯示一組控件瓦哎，舉個例子：

現(xiàn)在有3個并排的TextView砸喻，用Group把TextView1和TextView3歸為一組，再設(shè)置這組控件的可見性蒋譬，如下所示：

效果如下：

4.4 Placeholder

Placeholder指的是占位符割岛。在Placeholder中可使用setContent()設(shè)置另一個控件的id，使這個控件移動到占位符的位置犯助。舉個例子：? ??

新建一個Placeholder約束在屏幕的左上角癣漆，新建一個TextView約束在屏幕的右上角，在Placeholder中設(shè)置 app:content="@+id/textview"剂买，這時TextView會跑到屏幕的左上角惠爽。效果如下：

4.5 Guideline

Guildline像輔助線一樣，在預(yù)覽的時候幫助你完成布局（不會顯示在界面上）瞬哼。

Guildline的主要屬性：

android:orientation 垂直vertical婚肆，水平horizontal

layout_constraintGuide_begin 開始位置

layout_constraintGuide_end 結(jié)束位置

layout_constraintGuide_percent 距離頂部的百分比(orientation = horizontal時則為距離左邊)

舉個例子：

? ?

guideline1為水平輔助線，開始位置是距離頂部50dp坐慰，guideline2位垂直輔助線较性，開始位置為屏幕寬的0.5(中點(diǎn)位置)，效果如下：

5.總結(jié)

本篇文章主要介紹了ConstraintLayout和它在布局文件里的用法结胀，和一些輔助ConstraintLayout布局的工具赞咙，跟著敲一遍就能學(xué)會ConstraintLayout。除此之外糟港，ConstraintLayout還有一個獨(dú)立的編輯器攀操，只需要托拉拽就可以完成整個布局，但我個人比較喜歡直接用代碼寫秸抚，就不介紹了崔赌，有興趣的可以參考https://blog.csdn.net/guolin_blog/article/details/53122387