约束布局ConstraintLayout基础使用

前言

约束布局ConstraintLayout作为Google官方推荐的layout布局文件，是一个和线性布局LinearLayout，相对布局Relativelayout相似的ViewGroup。
约束布局的出现主要是为了能够让布局的设计更加的扁平化，优化布局嵌套问题，能够更加灵活的调整和控制其中的子View。

约束布局支持API 9以上的Android系统上使用。

一、包引入

使用ConstraintLayout需要引入对应的包，在build.gradle文件中引入如下内容：

    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

二、基本使用

约束布局已经支持非常多的功能，主要包括如下几个部分：

1. 相对定位
2. 角度定位
3. 可见性行为
4. 尺寸限制
5. 链条
6. 虚拟化助手对象
7. 优化器

下面我们将会对上述内容进行逐一讲解。

1. 相对定位

相对定位是用来控制子View在ConstraintLayout内部的位置关系，它类似于相对布局相对布局Relativelayout，能够以一个View为起点，逐步的定位其他子View的相对位置关系，它包含的主要设置属性主要包括上下左右四个方面，属性名称如下：

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

这块属性上大家可能容易搞乱，可以简单认为前一个方向是当前子View的方向边缘，后一个方向是参照View的方向边缘，以layout_constraintBottom_toTopOf为例，你设置的是当前View的底部(bottom)在参照View的顶部(top)。

上面属性上包括一个layout_constraintBaseline_toBaselineOf,这个指的是中心基准线，可以使得两个并排的View的中心基准线在同一水平上，基准线如下图：

相对定位1.jpg

居中定位

如果当你设置的当前控件起始点分别参照两个View而你当前的控件大小不能够完全填充两个参考控件间距大小的情况下，当前设置的控件会被参考View双向拉伸的效果，从而使你当前的控件有居中效果，示例如下：
我们设置当前button的left和right指向parent，

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

实际效果如下：

居中定位1.jpg

偏向定位

如果需要实现偏向效果，让当前的控件不再居中而是更加偏向左右 ，可以通过额外定义bias属性来实现。这一属性用来设置左侧和上方的百分比数值，数值越小，则当前控件会更加靠近左侧或者上方，如果不设置居中的情况下默认是0.5。

bias能使约束偏向某一边，默认是0.5
layout_constraintVertical_bias //纵向（0:最上，1:最下）
layout_constraintHorizontal_bias//横向（0:最左，1:最右）

举例来说，如果我们想要更加偏向左侧
30%，我们就可以设置

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.3"

效果如下：

偏压.png

2. 角度定位

除了上述的基本相对定位之外，约束布局还支持角度相对定位，具体方向是以Y轴正半轴为旋转起始线，顺时针旋转计算角度，示例图如下：

角度定位.png

其中角度定位的主要参数主要包括三项：定位原点View，旋转角度，距离，分别通过下面三项进行处理：

<!--定位原点View-->
app:layout_constraintCircle="@id/tv_testA"
<!--旋转角度-->
app:layout_constraintCircleAngle="120"
<!--距离-->
app:layout_constraintCircleRadius="120dp"

3. 可见性行为

当约束布局设置为Gone隐藏当前的控件时，当前的控件被解析成一个点，对于其他的控件的约束依然存在，但是被隐藏的View本身设置margin会被忽略，具体示例如下：

可见性行为.png

当View A被设置为不可见时，其对于View B的约束依然存在，但是View A本身的左边距会同时也隐藏掉。

goneMargin

当位置约束目标的可见性为View.GONE时，可以使用goneMargin属性设置不同的边距值。
如上图，如果设置View B的app:layout_goneMarginLeft="10dp",则当View A设置为View.GONE时，View B距离左侧边距则为10dp。

4. 尺寸限制

———— 大小约束

• 当约束布局的尺寸大小设置为wrap_content时，可以设置其最大大小和最小大小，设置参数如下：

android:minWidth 设置布局的最小宽度
android:minHeight 设置布局的最小高度
android:maxWidth 设置布局的最大宽度
android:maxHeight 设置布局的最大高度

• 使用0dp，等同** MATCH_CONSTRAINT**，默认行为是使得结果尺寸占用所有的可用空间，可替代match_parent。

百分比维度

尺寸设置为MATCH_CONSTRAINT时可以采用百分比设置，属性如下：

app:layout_constraintWidth_default="percent"
app:layout_constraintHeight_default="percent"

然后将layout_constraintWidth_percent 和layout_constraintHeight_percent属性设置为 0 到 1 之间的值用来制定当前控件的百分比。

示例如下，我们设置当前控件的宽度百分比为0.33，高度百分比为0.5，代码如下：

<?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=".constraintlayout.TestConstraintLayoutActivity">

    <TextView
        android:id="@+id/tv_testA"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        android:padding="10dp"
        android:text="test text"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.33" />


</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：

约束布局百分比.jpg

宽高比设置

当宽或者高至少一个尺寸设置为0dp时，可以通过属性app:layout_constraintDimensionRatio="m:n"来设置当前控件的宽高比.
属性默认中m为宽度，n为高度。你也可以指定m的为高度或者宽度，需要在添加H或者W。如：

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

示例效果如下：

<?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=".constraintlayout.TestConstraintLayoutActivity">

    <TextView
        android:id="@+id/tv_testA"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/black"
        android:padding="10dp"
        android:layout_marginTop="@dimen/dp_52"
        android:text="test text"
        app:layout_constraintDimensionRatio="1:2"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

宽高比.jpg

三、链条

链条也是约束布局里的一个组行为用法，可以在一个轴上对链条组做操作。
如下图：

链条.jpg

当一组部件通过双向连接连在一起，则他们可以被视为一条链，其中第一个元素被称为链头。代码如下：

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/TextView2" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_constraintRight_toLeftOf="@+id/TextView3"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView2"
        app:layout_constraintRight_toRightOf="parent" />

设置好链头之后，我们可以在链头的地方添加属性已调整整个链条的样式，一共有三种样式：

• CHAIN_SPREAD-- 元素将被展开（默认样式）

加权链 - 在CHAIN_SPREAD模式下，如果某些小部件设置为MATCH_CONSTRAINT，它们将分割可用空间，使用layout_constraintHorizontal_weight和layout_constraintVertical_weight来分别控制每个元素的权重。

• CHAIN_SPREAD_INSIDE-- 类似，但链的端点不会散开
• CHAIN_PACKED-- 链的元素将被打包在一起。子元素的水平或垂直偏差属性将影响打包元素的定位

示例效果如下：

链条样式.jpg

三、辅助工具

1. Barrier

Barrier可以为我们设置一道分界线线以便我们调整布局。
例如我们有3个控件，其中testB在testA的下方，testC在A和B的右方，如果此时A和B的长度不是固定的，则此时C的约束依赖无论是A还是B都不正确，有可能造成遮挡。

barrier1.jpg

使用Barrier可以解决这一问题。Barrier可以生成一道以A和B的右侧为基准的分界线，这样C约束依赖于这道分界线即可,示例代码如下：

<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=".constraintlayout.TestConstraintLayoutActivity">

    <TextView
        android:id="@+id/tv_testA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_52"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="testA"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_testB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_52"
        android:background="@color/colorAccent"
        android:paddingHorizontal="@dimen/dp_30"
        android:paddingVertical="@dimen/dp_10"
        android:text="testB"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_testA" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv_testA,tv_testB" />

    <TextView
        android:id="@+id/tv_testC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_20"
        android:layout_marginTop="@dimen/dp_24"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="testC"
        app:layout_constraintLeft_toRightOf="@id/barrier1"
        app:layout_constraintTop_toTopOf="@id/tv_testA" />

</androidx.constraintlayout.widget.ConstraintLayout>

app:barrierDirection为屏障所在的位置，可以分别设置上下左右等方向。
app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)

效果：

barrier2.jpg

分界线并不会真实显示，只用来做约束依赖。

2. Group

Group可以把多个控件归为一组，方便对当前组的控件统计的进行隐藏或者显示，其用法和barrrier相似，都是设置constraint_referenced_ids属性，示例如下,把tv_testA和tv_testB一起隐藏：

    <androidx.constraintlayout.widget.Group
        android:visibility="gone"
        app:constraint_referenced_ids="tv_testB,tv_testA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

参考文档

约束布局的官方文档