优点
- 极大程度减少布局层级
- 可以实现一些其他布局管理器不能实现的样式
缺点
- 每个被参考的控件都需要设置id
基本用法
1.相对定位
- 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：文字Baseline对齐
- layout_constraintStart_toEndOf
- layout_constraintStart_toStartOf
- layout_constraintEnd_toStartOf
- layout_constraintEnd_toEndOf
2. 圆形定位
- layout_constraintCircle : 参考控件的id
- layout_constraintCircleRadius : 本控件与参考控件中心点间距
- layout_constraintCircleAngle : 角度0～360
3. 百分比定位（bias）
- layout_constraintHorizontal_bias
- layout_constraintVertical_bias
取值范围0～1，默认值0.5
4. 居中对齐
所有居中对其需要设置对应方向尺寸大小为wrap_content或固定值
- 水平居中
<androidx.constraintlayout.widget.ConstraintLayout
...
>
<TextView
...
android:layout_width="60dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
- 垂直居中
<androidx.constraintlayout.widget.ConstraintLayout
...
>
<TextView
...
android:layout_height="60dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
5.间距设置
表示当前控件与参考的控件之间的间距
layout_marginStart 左间距
layout_marginEnd 右间距
layout_marginLeft 左间距
layout_marginTop 上间距
layout_marginRight 右间距
layout_marginBottom 下间距
6.权重比
主要依赖于以下两个属性：
app:layout_constraintHorizontal_weight 横向权重比
app:layout_constraintVertical_weight 竖向权重比
7.百分比
百分比需要满足下面三个条件：
宽或高设置成0dp
-
宽或高默认值设置成百分比
- app:layout_constraintWidth_default="percent"
- app:layout_constraintHeight_default="percent"
-
宽或高百分比的值（取值范围0～1）
- app:layout_constraintWidth_percent
- app:layout_constraintHeight_percent
以下代码表示Textview宽度为ConstraintLayout宽度的50%
<androidx.constraintlayout.widget.ConstraintLayout
...
>
<TextView
...
android:layout_width="0dp"
app:layout_constraintHeight_default="percent"
app:layout_constraintWidth_percent="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>
8.宽高比
百分比需要满足下面两个条件：
a. 宽或高至少有一个设置成0dp
b. 通过app:layout_constraintDimensionRatio设置宽高比
这里layout_constraintDimensionRatio宽高的取值有以下4种形式：
- 16:9 表示宽高比为16:9
- 0.2 表示宽高比为1:5
- H,16:9 表示宽高比为9:16
- W,16:9 表示宽高比为16:9
以下代码表示Textview的宽高比为2:1
<androidx.constraintlayout.widget.ConstraintLayout
...
>
<TextView
...
android:layout_height="0dp"
app:layout_constraintDimensionRatio="2:1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
9.强制约束
-
应用场景
使用wrap_content，但仍要强制执行约束以限制结果尺寸，比如一个Textview的宽度是根据文字内容自适应的，文字内容可能很短也可能很长，当文字内容很长的时候可能会打破原先的约束，比如本来在在某个控件的左边，但是随着文字内容的增长会越界！
-
使用方式
layout_constrainedWidth="true|false" layout_constrainedHeight="true|false"
使用以上两个属性来强制控件的宽或高严格执行相应的约束条件
10.Barrier
-
应用场景
当某个控件的约束想以一组控件为参考点，并且始终不越界
使用方式
app:barrierDirection="start|left|top|right|end|bottom"
app:constraint_referenced_ids="tv1,tv2"
- 示例
以下代码表示以tv1和tv2的底部为一个屏障，tv3始终在tv1和tv2下面，即使tv1和tv2全部都消失
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierAllowsGoneWidgets="true"
app:barrierDirection="bottom"
app:constraint_referenced_ids="bt1,bt2" />
<Button
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/bt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/bt1" />
<Button
android:id="@+id/bt3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout>
11.Guideline
-
应用场景
布局参考线可以作为其他控件布局约束的参考，但不会显示出来
-
使用方式
参考线的方向，可分为水平和竖直两个方向： android:orientation="vertical|horizontal" 参考线的位置： app:layout_constraintGuide_begin="100dp" app:layout_constraintGuide_end="100dp" app:layout_constraintGuide_percent="0.5"
12.Group
-
应用场景
将某几个控件归为一组动态进行显示或隐藏控制
-
使用方式
需要归为一组控件的ID app:constraint_referenced_ids="tv1,tv2"
13.Chain
Chain可以很容易达到其他布局管理器不容易实现，甚至无法实现的样式
-
应用场景
某几个控件之间首位相接，排列方式有特殊要求
-
使用方式
layout_constraintHorizontal_chainStyle="spread|spread_inside|packed" layout_constraintVertical_chainStyle="spread|spread_inside|packed"
chainStyle取值：
- spread: 控件均匀分布，即控件之间（包括边框）间距相同
- spread_inside: 第一个和最后一个控件固定在链两端的约束边界上，其余控件均匀分布，即控件内部之间间距相同
- packed: 控件打包在一起（在考虑外边距之后）。 然后，您可以通过更改链的头视图偏差调整整条链的偏差（左/右或上/下）。
image.png
<androidx.constraintlayout.widget.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">
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/tv2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="@id/tv1"
app:layout_constraintEnd_toStartOf="@id/tv3"
app:layout_constraintStart_toEndOf="@id/tv1" />
<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBaseline_toBaselineOf="@id/tv1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
