1.1 简介
除了几种传统的Android的布局方式，Google 在Android Studio 2.3发布以后，创建的布局默认都是使用ConstraintLayout。这是Google Android团队主推的一个新的布局方式，可以译为“约束布局”，于2016年在Google I/O大会推出亮相。ConstraintLayout也是继承自ViewGroup，在API 9以上的Android版本中都可以通过引入包来使用。ConstraintLayout的主要特点就是布局层级少，嵌套很多层的布局用ConstraintLayout进行布局只需要一层就可以了，ConstraintLayout也是为了解决布局嵌套层级过多而导致界面卡顿和性能与体验降低的问题。
下面先看一下ConstraintLayout的特点：
· 扁平式布局，无须嵌套，一个层级就可以绘制复杂布局；
· 高渲染性能；
· 集合了线性布局、相对布局、百分比布局的特点和大部分功能于一身；
· 支持在可视化环境下拖曳绘制约束布局。
在AndroidX 提供的库中，提供了ConstraintLayout布局可以直接让用户通过扁平化的结构来进行布局，由此可见ConstraintLayout在UI绘制的效率上是比较高的。（当然也可以手动在项目的build.gradle中手动引入：
dependencies {
implementation "androidx.constraintlayout:constraintlayout:2.1.4"
// To use constraintlayout in compose
implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
}）
当在不是所有的布局都使用ConstraintLayout布局都会效率很高，比如一些简单的线性布局、相对布局等就没必须要使用ConstraintLayout来完成。
1.2 相对定位
相对定位是ConstraintLayout中创建约束布局的基本方式之一，类似于相对布局。相对定位约束允许将给定的控件相对于另一个控件进行定位，可以在水平和垂直轴上约束控件。· 水平方向约束：left, right, start and end；· 垂直方向约束：top, bottom and text baseline。
下面看一个例子，如图所示，
1.1.png
可以使用相对定位的layout_constraintLeft_toRightOf属性:
<Button
android:id="@+id/buttonA"
android:layout_width="200dp"
android:layout_height="20dp"/>
<Button
android:id="@+id/buttonB"
android:layout_width="200dp"
android:layout_height="20dp"
app:layout_constraintLeft_toRightOf="@+id/buttonA" />
layout_constraintLeft_toRightOf约束属性就是让按钮B的左侧约束到按钮A的右侧上，这样就达到了想要的效果。
1.2.png
如图1.2就是相对定位可以使用的几个相对的边，ConstraintLayout中可以用的相对定位约束属性如下：
· 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。
当想要约束父控件时可以设置如下：
<Button
android:id="@+id/buttonA"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
使用parent这个id即可。
要注意的是水平方向和垂直方向同时设定，否则会报错，这和ConstraintLayout特性有关;
1.3边距
如图所示：
1.3.png
ConstraintLayout中边距设置也是一个控件相对于另一个控件，如按钮B相对于按钮A的右侧设置边距。边距可以设置的属性如下：
· android:layout_marginStart；
· android:layout_marginEnd；
· android:layout_marginLeft；
· android:layout_marginTop；
·android:layout_marginRight；
·android:layout_marginBottom。
这里的属性的值必须大于等于0。
1.4相对隐藏边距
如果一个控件隐藏了，也可以设置隐藏后的相对于这个控件的边距，也就是控件隐藏了，这个相对边距也可以继续存在，如图1.1.4所示。
1.4.png
相当于隐藏的控件变成了一个点，边距还是存在。如果不希望隐藏后还存在边距，就需要使用这些属性并将值设置为0。下面的这些属性可以设置控件隐藏后的边距：
· layout_goneMarginStart；
· layout_goneMarginEnd；
· layout_goneMarginLeft；
· layout_goneMarginTop；
· layout_goneMarginRight；
· layout_goneMarginBottom。
1.5居中定位和偏移
当需要将一个控件放置在中间居中位置时，可以进行如下设置：
<Button
android:id="@+id/button"
android:layout_width="200dp"
android:layout_height="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent/>
只需要将两侧约束到parent即可，如图1.5所示
1.5.png
还有一种更加强大的方式，不但可以设置居中，还可以设置两侧的偏移量和权重。可以通过以下两个属性来设置：
·layout_constraintHorizontal_bias；
·layout_constraintVertical_bias。
偏移值在0～1之间，越靠近1则越靠近右侧或底部。例如，实现如图1.5.1所示的偏移效果，可以这样设置：
1.5.1.png
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="200dp"
android:layout_height="30dp"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
这样写预览板面显示效果正常，但XML是报错的，原因是没有加垂直方向;(比如加上：
app:layout_constraintTop_toTopOf="parent")后面会说明;
1.6环形定位
环形定位就是允许一个控件相对于另一个控件的中心进行相对角度的定位。例如，可以设置控件B相对位于控件A的右上角45°的位置，距离为20dp。环形定位可供使用的属性如下：
· layout_constraintCircle：引用另一个控件的ID；
·layout_constraintCircleRadius：到另一个控件中心的距离；
·layout_constraintCircleAngle：自身相对于另一个控件应该处于哪个角度（以度为单位，范围为0°～360°）。
如图1.6所示为环形定位示意图:
1.6.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"
tools:context=".MainActivity">
<Button
android:id="@+id/buttonA"
android:layout_width="200dp"
android:layout_height="30dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="@+id/buttonB"
android:layout_width="200dp"
android:layout_height="30dp"
app:layout_constraintCircle="@id/buttonA"
app:layout_constraintCircleRadius="200dp"
app:layout_constraintCircleAngle="135"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
1.7尺寸约束
当控件设置宽或高的属性为WRAP_CONTENT时，可以通过以下属性控制最大和最小宽/高：
· android:minWidth：设置布局的最小宽度；
· android:minHeight：设置布局的最小高度；
· android:maxWidth：设置布局的最大宽度；
· android:maxHeight：设置布局的最大高度。
当控件设置宽或高为0dp时，相当于设置为MATCH_CONSTRAINT，将占用可用的全部空间。ConstraintLayout也支持百分比布局，使用步骤如下：
（1）将layout_width或者layout_height设置为0dp。
（2）设置layout_constraintWidth_default="percent"或layout_constraintHeight_default="percent"。
（3）通过layout_constraintWidth_percent或者layout_constraintHeight_percent指定百分比，值为0～1之间。
如图1.7所示为尺寸约束示意图：
1.7.png
ConstraintLayout也支持宽高比例约束设置，首先需要将宽度或者高度设置为0dp或MATCH_CONSTRAINT；然后通过属性layout_constraintDimensionRatio设置宽高比率。例如：
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1" />
这里的layout_constraintDimensionRatio属性可以是比率也可以是具体的浮点数值，如0.5，也就是宽度除以高度的浮点比值。也可以指定比值的分子是宽或者高，例如：
<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
这里的“H,16:9”代表高度比宽度为16比9，而“W,16:9”代表宽度比高度为16比9;
1.8 链约束
链约束可以创建一组水平或者垂直方向上的控件约束，非常方便、高效。当两个控件具有双向约束时，也就是互相约束时它们可以构成一个链，如图21.9所示:
1.8.png
其中，链的第一个元素为链头，这个链的属性也由链头控制，如图1.9所示:
1.9.png
<Button
android:id="@+id/bt_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
//默认样式
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/bt_2" />
<Button
android:id="@+id/bt_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
app:layout_constraintLeft_toRightOf="@+id/bt_1"
app:layout_constraintRight_toRightOf="parent" />
如图1.10所示为链样式示意图：
1.10.png
其中，权重链通过属性layout_constraintHorizontal_weight和layout_constraintVertical_weight来控制控件占用的空间大小。
在使用ConstraintLayout进行布局时，也可以设置优化选项。通过属性app:layout_optimizationLevel来设置优化选项，可以设置的值如下：
· none：无优化；· standard：仅优化直接约束和屏障约束（默认）；
· direct：优化直接约束；
· barrier：优化屏障约束；
· chain：优化链约束；
· dimensions：优化尺寸测量。
也可以叠加使用多个优化，app:layout_optimizationLevel ="direct|barrier|chain"。
未完：后面关于ConstraintLayout的特性和用法还有很多细节，如Barrier、Group、Placeholder和Guideline等会加以记录与学习;
网友评论