使用前先在 build.gradle 文件中添加：
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
一吐绵、屬性介紹
ConstraintLayout 基礎(chǔ)屬性和 RelativeLayout 屬性對(duì)比：
| ConstraintLayout | RelativeLayout | 作用 |
|---|---|---|
| layout_constraintLeft_toLeftOf | layout_alignLeft | 與目標(biāo)組件左對(duì)齊 |
| layout_constraintLeft_toRightOf | layout_toRightOf | 在目標(biāo)組件的右邊 |
| layout_constraintRight_toRightOf | layout_alignRight | 與目標(biāo)組件右對(duì)齊 |
| layout_constraintRight_toLeftOf | layout_toLeftOf | 在目標(biāo)組件的左邊 |
| layout_constraintTop_toTopOf | layout_alignTop | 與目標(biāo)組件上對(duì)齊 |
| layout_constraintTop_toBottomOf | layout_below | 在目標(biāo)組件底部 |
| layout_constraintBottom_toBottomOf | layout_alignBottom | 與目標(biāo)組件下對(duì)齊 |
| layout_constraintBottom_toTopOf | layout_above | 在目標(biāo)組件的上部 |
| layout_constraintBaseline_toBaselineOf | layout_alignBaseline | 與目標(biāo)組件基線對(duì)齊 |
對(duì)于和left弓柱、right相似的start、end基礎(chǔ)的屬性，這里不再贅述，大家可以自行查閱。當(dāng)然了塔粒，除了一些基礎(chǔ)的屬性，ConstraintLayout也有自己特有的屬性筐摘，這里向大家介紹一下常用的屬性：
1. bias（偏移量）
長(zhǎng)度和高度的偏移量
| 屬性 | 介紹 |
|---|---|
| layout_constraintHorizontal_bias | 水平方向的偏移量（小數(shù)） |
| layout_constraintVertical_bias | 豎直方向的偏移量（小數(shù)） |
2. Circular positioning（圓形定位）
以一個(gè)控件為圓心設(shè)置角度和半徑定位
| 屬性 | 介紹 |
|---|---|
| layout_constraintCircle | 關(guān)聯(lián)另一個(gè)控件卒茬，將另一個(gè)控件放置在自己圓的半徑上，會(huì)和下面兩個(gè)屬性一起使用 |
| layout_constraintCircleRadius | 圓的半徑 |
| layout_constraintCircleAngle | 圓的角度 |
3. Percent dimension（百分比布局）
寬高設(shè)置百分比長(zhǎng)度
| 屬性 | 介紹 |
|---|---|
| layout_constraintWidth_default | 寬度類型設(shè)置咖熟，可以設(shè)置percent圃酵、spread和wrap |
| layout_constraintHeight_default | 高度類型設(shè)置，同上 |
| layout_constraintWidth_percent | 如果layout_constraintWidth_percent設(shè)置的百分比馍管，這里設(shè)置小數(shù)郭赐，為占父布局寬度的多少 |
| layout_constraintHeight_percent | 設(shè)置高度的大小，同上 |
4. Ratio（比例）
控件的寬和高設(shè)置一定比例
| 屬性 | 介紹 |
|---|---|
| layout_constraintDimensionRatio | 寬高比 |
5. Chain Style（約束鏈類型）
設(shè)置約束鏈類型确沸，約束鏈類型包括：spread捌锭，spread_inside和packed
| 屬性 | 介紹 |
|---|---|
| layout_constraintHorizontal_chainStyle | 橫向約束鏈 |
| layout_constraintVertical_chainStyle | 縱向約束鏈 |
二俘陷、具體使用
1.Percent dimension
如果將ImageView的寬度設(shè)置為父布局寬度的70%，這個(gè)時(shí)候我們就可以考慮使用百分比屬性了观谦，代碼如下：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.7"
android:src="@mipmap/ic_launcher"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
效果：
可以看到拉盾，我們這里先將layout_constraintWidth_default屬性設(shè)置為percent，接著將layout_constraintWidth_percent設(shè)置為0.7豁状，同理捉偏，我們可以對(duì)layout_constraintHeight_default和layout_constraintHeight_percent進(jìn)行高度的設(shè)置。這里需要注意的是：
- 需要先將布局約束之后泻红，才可以進(jìn)行寬度或者高度的設(shè)置夭禽，如上述代碼，我們先添加了app:layout_constraintTop_toTopOf="parent"和app:layout_constraintLeft_toLeftOf="parent"谊路，將ImageView設(shè)置在左上角讹躯，如果沒(méi)有先進(jìn)行控件的約束，會(huì)發(fā)現(xiàn)我們的設(shè)置的百分比這個(gè)屬性沒(méi)有起作用缠劝。后面的很多屬性也是如此蜀撑，需要先對(duì)控件進(jìn)行約束，才能對(duì)我們的控件設(shè)置一些屬性剩彬。
2.居中和偏移(bias（偏移量）)
在RelativeLayout中，把控件放在布局中間的方法是把layout_centerInParent設(shè)為true矿卑，而在ConstraintLayout中的寫(xiě)法是：
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
意思是把控件的上下左右約束在布局的上下左右喉恋，這樣就能把控件放在布局的中間了。同理RelativeLayout中的水平居中l(wèi)ayout_centerHorizontal相當(dāng)于在ConstraintLayout約束控件的左右為parent的左右母廷；RelativeLayout中的垂直居中l(wèi)ayout_centerVertical相當(dāng)于在ConstraintLayout約束控件的上下為parent的上下轻黑。
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@mipmap/welfare"
android:scaleType="centerCrop"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
效果：
app:layout_constraintHorizontal_bias="0.1"代表水平方向往右偏移10%，app:layout_constraintVertical_bias="0.2"代表豎直方向往下偏移20%琴昆。
- 想要設(shè)置偏移氓鄙，必須先將控件設(shè)置父布局居中。
3.比例(Ratio)
將控件比如ImageView設(shè)置長(zhǎng):寬=2:1
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.AppCompatImageView
android:layout_width="200dp"
android:layout_height="0dp"
android:src="@mipmap/welfare"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="2:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
效果：
如果需要按照比例設(shè)置控件业舍，這里需要先將layout_width或者layout_height一方設(shè)置為0dp抖拦，另一個(gè)設(shè)置為正常比例，接著給layout_constraintDimensionRatio設(shè)置比例舷暮，例如app:layout_constraintDimensionRatio="2:1".
4.chain(約束鏈)
Chain 鏈?zhǔn)且环N特殊的約束讓多個(gè) chain 鏈連接的 Views 能夠平分剩余空間位置态罪。在 Android 傳統(tǒng)布局特性里面最相似的應(yīng)該是 LinearLayout 中的權(quán)重比 weight ，但 Chains 鏈能做到的遠(yuǎn)遠(yuǎn)不止權(quán)重比 weight 的功能下面。
約束鏈的三種類型复颈，分別是spread、spread_inside和packed：
- spread：視圖均勻分布沥割。
- spread_inside：除了約束鏈的頭部和尾部貼在兩邊的約束上耗啦，其余均勻分布凿菩。
- packed：將視圖打包在一起，默認(rèn)居中帜讲。
以spread為例衅谷，我們看一下代碼：
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 在第一個(gè)控件設(shè)置chain_style，第一個(gè)和最后一個(gè)TextView也要設(shè)置
好約束舒帮，上下控件也要互為約束 -->
<android.support.v7.widget.AppCompatTextView
android:id="@+id/txt1"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/txt2"
android:layout_width="wrap_content"
android:text="txt1"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/txt1"
app:layout_constraintRight_toLeftOf="@+id/txt3"
android:text="txt2"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/txt3"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toRightOf="@+id/txt2"
android:text="txt3"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
效果：
textView 中的約束屬性 app:layout_constraintHorizontal_chainStyle="spread" 就是指定了鏈模式 spread 你可以通過(guò)修改成 spread inside 或 packed 來(lái)切換鏈模式会喝，而且這個(gè)約束屬性必須在鏈頭，即是鏈組件中的第一個(gè)組件玩郊。
spread_inside 效果：
packed 效果：
Chain Style
在鏈條里面肢执，可以使用weight和bias：
- spread + weight-將元素的尺寸設(shè)置為MATCH_CONSTRAINT時(shí)，可以與weight平分空間
- packed + bias- 前面說(shuō)過(guò)bias是偏移的意思译红，這里就是將鏈條集體偏移预茄。
5.Guideline
Guideline是只能用在ConstraintLayout布局里面的一個(gè)工具類，用于輔助布局侦厚，類似為輔助線耻陕，可以設(shè)置android:orientation屬性來(lái)確定是橫向的還是縱向的
- 當(dāng)設(shè)置為vertical的時(shí)候，Guideline的寬度為0刨沦，高度是parent也就是ConstraintLayout的高度
- 同樣設(shè)置為horizontal的時(shí)候诗宣，高度為0，寬度是parent的寬度
重要的是Guideline是不會(huì)顯示到界面上的想诅，默認(rèn)是GONE的召庞。
Guideline還有三個(gè)重要的屬性，每個(gè)Guideline只能指定其中一個(gè)：
- layout_constraintGuide_begin来破，指定左側(cè)或頂部的固定距離篮灼，如100dp，在距離左側(cè)或者頂部100dp的位置會(huì)出現(xiàn)一條輔助線
- layout_constraintGuide_end徘禁，指定右側(cè)或底部的固定距離诅诱，如30dp，在距離右側(cè)或底部30dp的位置會(huì)出現(xiàn)一條輔助線
- layout_constraintGuide_percent送朱，指定在父控件中的寬度或高度的百分比娘荡，如0.8，表示距離頂部或者左側(cè)的80%的距離骤菠。
示例：
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineEnd"
app:layout_constraintGuide_end="100dp"
android:orientation="vertical"/>
<Button
android:text="Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/buttonEnd"
app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"
android:layout_marginTop="48dp"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="@+id/guidelinePercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8" />
<Button
android:text="Button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/buttonPercent"
app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"
android:layout_marginTop="96dp"
app:layout_constraintTop_toTopOf="parent" />
效果：
當(dāng)你要用一個(gè)控件占屏幕寬度的一半的時(shí)候它改，可以用layout_constraintGuide_percent，如下面代碼：
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guidelineBegin"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintStart_toStartOf="@id/button"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
效果：
6.Barrier
Barrier 是用多個(gè) View 作為限制源來(lái)決定自身位置的一種輔助線.
Barrier同Guideline一樣商乎，不會(huì)被顯示央拖。Barrier的使用效果：
Barrier效果
可以看到，中間的線就是我們的Barrier，會(huì)隨著左側(cè)控件組的最長(zhǎng)側(cè)變化而改變Barrier的位置鲜戒，從而改變右側(cè)控件的位置专控。
<android.support.v7.widget.AppCompatTextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="warehouse"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="hospitalhospitalhospital"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv1"
android:layout_height="wrap_content"/>
<!-- constraint_referenced_ids包含我們需要包含的組件，以這些組件的某一側(cè)為基準(zhǔn) -->
<!-- barrierDirection面向包含的組件 -->
<android.support.constraint.Barrier
android:id="@+id/barrier"
app:barrierDirection="right"
app:constraint_referenced_ids="tv1,tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v7.widget.AppCompatTextView
android:id="@+id/tv3"
android:layout_width="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="lorem_ipsumlorem_ipsumlorem_ilorem_ipsumlorem_ipsumlorem_ipsumlorem_ipsumpsumlorem_ipsumlorem_ipsumlorem_ipsumwww"
app:layout_constraintStart_toEndOf="@+id/barrier"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="wrap_content"/>
其中 constraint_referenced_ids 指定限定源id,多個(gè)id用逗號(hào)隔開(kāi)
app:barrierDirection 指定限制的方向 , 有 left, right, top, bottom, start, end, 6種遏餐。
上面代表的是 barrier 以 tv2 和 tv1 兩者最右側(cè)為基準(zhǔn)線來(lái)作為自己的定位
7.Circular positioning
Circular positioning 稱之為圓形定位伦腐，就是以目標(biāo)控件為圓心，通過(guò)設(shè)置角度和半徑確定我們當(dāng)前控件的位置失都，
可以設(shè)置的屬性有：
- layout_constraintCircle：引用另一個(gè)控件的 id柏蘑。
- layout_constraintCircleRadius：到另一個(gè)控件中心的距離。
- layout_constraintCircleAngle：控件的角度（順時(shí)針粹庞，0 - 360 度）咳焚。
如官方圖：
Circular positioning
示例：
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_menu"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
android:tint="#fff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="50dp"
android:src="@android:drawable/ic_dialog_info"
android:tint="#fff"
app:elevation="@null"
app:layout_constraintCircle="@+id/fab_menu"
app:layout_constraintCircleAngle="0"
app:layout_constraintCircleRadius="100dp"
android:layout_height="50dp"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@android:drawable/ic_dialog_info"
android:tint="#fff"
app:elevation="@null"
app:layout_constraintCircle="@+id/fab_menu"
app:layout_constraintCircleAngle="315"
app:layout_constraintCircleRadius="100dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@android:drawable/ic_dialog_info"
android:tint="#fff"
app:elevation="@null"
app:layout_constraintCircle="@+id/fab_menu"
app:layout_constraintCircleAngle="270"
app:layout_constraintCircleRadius="100dp" />
效果：
8.Group
Group通過(guò)app:constraint_referenced_ids添加對(duì)子View的引用，然后統(tǒng)一的顯示或者隱藏控件庞溜。
<android.support.constraint.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="btn1,btn2"/>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕1"/>
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="按鈕2"
app:layout_constraintTop_toBottomOf="@id/btn1"/>
別將view放Group包起來(lái).這樣會(huì)報(bào)錯(cuò),因?yàn)镚roup只是一個(gè)不執(zhí)行onDraw()的View.
使用多個(gè) Group 時(shí)革半，盡量不要將某個(gè)View重復(fù)的放在 多個(gè) Group 中，實(shí)測(cè)可能會(huì)導(dǎo)致隱藏失效.
