文章目录

• 介绍
• 为什么要用ConstraintLayout
• 添加依赖
• 如何使用
• • 定位位置
  • 角度定位
  • 边距
  • • 常用margin
    • goneMargin
  • 居中和偏移
  • • 居中不生效时
  • 尺寸约束
  • 链
• 辅助工具
• • Guideline
  • Group
  • Placeholder
  • Barrier
• ConstraintSet 使用，动态修改约束布局

介绍

约束布局ConstraintLayout 是一个ViewGroup，可以在Api9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout

ConstraintLayout 官方文档

为什么要用ConstraintLayout

在开发过程中经常能遇到一些复杂的UI，可能会出现布局嵌套过多的问题，嵌套得越多，设备绘制视图所需的时间和计算功耗也就越多，例如：

假设现在要写一个这样的布局，可能有人会这么写：
首先是一个垂直的LinearLayout，里面放两个水平的LinearLayout，然后在水平的LinearLayout里面放TextView。这样的写法就嵌套了两层LinearLayout

有些人考虑到了嵌套布局带来的风险，所以用一个RelativeLayout来装下所有的控件。既然用RelativeLayout可以解决问题，为什么还要使用ConstraintLayout呢？因为ConstraintLayout使用起来比RelativeLayout更灵活，性能更出色！还有一点就是ConstraintLayout可以按照比例约束控件位置和尺寸，能够更好地适配屏幕大小不同的机型

添加依赖

这里使用androidx

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
复制代码

如何使用

定位位置

确定位置的属性提供了下面13个属性

• 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

栗子

<?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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView2"
        app:layout_constraintLeft_toRightOf="@+id/tv1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3"
        app:layout_constraintTop_toBottomOf="@+id/tv1" />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

对于一个View的边界界定，官方给了下面这张图：

一般情况下只是用layout_constraintLeft_toRightOf：

如图所示，两个TextView的高度不一致，但是又希望他们文本对齐，这个时候就可以使用layout_constraintBaseline_toBaselineOf

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#D8BFD8"/>

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:text="TextView2"
        android:background="#DDA0DD"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
        />
复制代码

角度定位

角度定位指的是可以用一个角度和一个距离来约束两个空间的中心

上面例子中的TextView2使用以下3个属性：

app:layout_constraintCircle="@+id/tv1"
app:layout_constraintCircleAngle="120"（角度）
app:layout_constraintCircleRadius="150dp"（距离）
复制代码

TextView2的中心在TextView1的中心的120度，距离为150dp

边距

常用margin

ConstraintLayout的边距常用属性如下：

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

看起来跟别的布局没有什么差别，但实际上控件在ConstraintLayout里面要实现margin，必须先约束该控件在ConstraintLayout里的位置

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#D8BFD8"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"/>
    
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

如果在别的布局里，TextView1的位置应该是距离边框的左边和上面有一个10dp的边距，但是在ConstraintLayout里，是不生效的，因为没有约束TextView1在布局里的位置。正确的写法如下：

<TextView
        android:id="@+id/tv1"
        ......
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
复制代码

把TextView1的左边和上边约束到parent的左边和上边，这样margin就会生效，效果如下：

在使用margin的时候要注意两点：

1. 控件必须在布局里约束一个相对位置
2. margin只能大于等于0

goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值，属性如下：

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

栗子：
TextView2的左边约束在TextView1的右边，并给TextView2设一个app:layout_goneMarginLeft=“10dp”，代码：

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#D8BFD8" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView2"
        android:gravity="center"
        android:background="#D8BFD8"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_goneMarginLeft="10dp"/>
复制代码

效果如图，TextView2在TextView1的右边，且没有边距

这个时候把TextView1的可见性设为gone，效果如下：

TextView1消失后，TextView2有一个距离左边10dp的边距

居中和偏移

在RelativeLayout中，把控件放在布局中间的方法是把layout_centerInParent设为true，而在ConstraintLayout中的写法是：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
复制代码

意思是把控件的上下左右约束在布局的上下左右，这样就能把控件放在布局的中间了

同理RelativeLayout中的水平居中layout_centerHorizontal相当于在ConstraintLayout约束控件的左右为parent的左右；RelativeLayout中的垂直居中layout_centerVertical相当于在ConstraintLayout约束控件的上下为parent的上下

居中不生效时

ConstraintLayout的宽高要设置为match_parent，否则居中不生效

android:layout_width="match_parent"
android:layout_height="match_parent"
复制代码

除了margin，ConstraintLayout还提供了另外一种偏移的属性：

• layout_constraintHorizontal_bias 水平偏移
• layout_constraintVertical_bias 垂直偏移

假如现在要实现水平偏移，给TextView1的layout_constraintHorizontal_bias赋一个范围为 0-1 的值，假如赋值为0，则TextView1在布局的最左侧，假如赋值为1，则TextView1在布局的最右侧，假如假如赋值为0.5，则水平居中，假如假如赋值为0.3，则更倾向于左侧
垂直偏移同理

<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#D8BFD8"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

尺寸约束

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

1. 使用指定的尺寸
2. 使用wrap_content，让控件自己计算大小
   当控件的高度或宽度为wrap_content时，可以使用下列属性来控制最大、最小的高度或宽度：
   android:minWidth 最小的宽度
   android:minHeight 最小的高度
   android:maxWidth 最大的宽度
   android:maxHeight 最大的高度
   注意！当ConstraintLayout为1.1版本以下时，使用这些属性需要加上强制约束，如下所示：
   app:constrainedWidth=”true”
   app:constrainedHeight=”true”
3. 使用 0dp (MATCH_CONSTRAINT)
   官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView1"
        android:gravity="center"
        android:background="#D8BFD8"
        android:layout_marginLeft="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
复制代码

宽度设为0dp，左右两边约束parent的左右两边，并设置左边边距为50dp，效果如下：

4. 宽高比
   当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比

<TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#D8BFD8"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
复制代码

宽设置为0dp，宽高比设置为1:1，这个时候TextView1是一个正方形，效果如下：

除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。 例如：
app:layout_constraintDimensionRatio=”H,2:3″指的是 高:宽=2:3
app:layout_constraintDimensionRatio=”W,2:3″指的是 宽:高=2:3

链

如果两个或以上控件通过下图的方式约束在一起，就可以认为是他们是一条链（图为横向的链，纵向同理）

栗子：

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#DDA0DD"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv2"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView2"
        android:gravity="center"
        android:background="#D8BFD8"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintRight_toLeftOf="@+id/tv3"
        />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView3"
        android:gravity="center"
        android:background="#FFC0CB"
        app:layout_constraintLeft_toRightOf="@+id/tv2"
        app:layout_constraintRight_toRightOf="parent"
        />
复制代码

3个TextView相互约束，两端两个TextView分别与parent约束，成为一条链，效果如下：

一条链的第一个控件是这条链的链头，我们可以在链头中设置 layout_constraintHorizontal_chainStyle来改变整条链的样式。chains提供了3种样式，分别是：

• CHAIN_SPREAD —— 展开元素 (默认)；
  
• CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；
  
• CHAIN_PACKED —— 链的元素将被打包在一起
  
  上面的例子创建了一个样式链，除了样式链外，还可以创建一个权重链
  可以留意到上面所用到的3个TextView宽度都为wrap_content，如果我们把宽度都设为0dp，这个时候可以在每个TextView中设置横向权重layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链

    <TextView
        android:id="@+id/tv1"
        android:layout_width="0dp"
        ......
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_weight="1"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="0dp"
        ......
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintRight_toLeftOf="@+id/tv3"
        app:layout_constraintHorizontal_weight="2"
        />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        ......
        app:layout_constraintLeft_toRightOf="@+id/tv2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="3"
        />
复制代码

辅助工具

除了ConstraintLayout自身属性之外，谷歌还提供了很多辅助布局（只是在布局中起辅助作用，并不会在界面真正显示），来使ConstraintLayout的功能更加强大。下面，我们就一一来了解下这些布局

Guideline

Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上），ConstraintLayout 的定位原则就是一个View参考其他View的相对布局，如果有的时候当前布局没有合适的参考View，而建一个专门用于定位的View又会太重，这种情况正是GuideLine的用武之地

Guildline的主要属性：

• android:orientation 垂直vertical，水平horizontal
• layout_constraintGuide_begin 开始位置
• layout_constraintGuide_end 结束位置
• layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>
复制代码

guideline1为水平辅助线，开始位置是距离顶部50dp，guideline2位垂直辅助线，开始位置为屏幕宽的0.5(中点位置)

Group

Group可以把多个控件归为一组，方便隐藏或显示一组控件
例如我们用 链 一节的三个TextView为例

    <androidx.constraintlayout.widget.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tv1,tv3"
        android:visibility="invisible"/>
复制代码

现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性

Placeholder

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置

     <androidx.constraintlayout.widget.Placeholder
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:content="@+id/tv1"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#DDA0DD"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
复制代码

新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content=”@+id/tv1″，这时TextView会跑到屏幕的左上角

Placeholder自己本身不会绘制任何内容，但可以通过设置app:content=“id”，将id View的内容绘制到自己的位置上，而原id的 View就像gone了一样

应用场景，比如可以作为位置模板，引入后只需要写内容view；使用代码动态改变内容，结合TransitionManager可以做一些有趣的过度动画等

Barrier

屏障，一个虚拟View。主要解决下面遇到的问题：

假设有3个控件ABC，AB的宽是不固定的，C在AB的右边，这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障

这个时候C只要约束在Barrier的右边就可以了

<TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="TextView1"
        android:gravity="center"
        android:background="#DDA0DD"
        />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:text="TextView2"
        android:gravity="center"
        android:background="#D8BFD8"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv1,tv2"/>

    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="TextView3"
        android:gravity="center"
        android:background="#FFC0CB"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        />
复制代码

app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)

app:barrierDirection为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top

ConstraintSet 使用，动态修改约束布局

官方文档

以往我们在代码中动态的修改布局中控件的大小、位置以及与其他控件的相对关系时，都需要使用到 LayoutParams，不同的布局有对应的不同的LayoutParams 的子类，使用起来十分繁琐。而 ConstraintLayout 时代，与之搭配的就是 ConstraintSet

1、创建和初始化ConstraintSet

ConstraintSet constraintSet = new ConstraintSet();
//用法1：从ConstraintLayout实例中获取约束集，最常用的用法
constraintSet.clone(mainLayout)//mainLayout为ConstraintLayout
//用法2：从布局中获取约束集
constraintSet.clone(context, R.layout.my_layout)//my_layout.xml的根布局必须是ConstraintLayout
//用法3：从其他约束集中获取约束集
constraintSet.clone(otherConstraintSet)
复制代码

2、设置组件之间的约束

constraintSet.connect(startID: Int, startSide: Int, endID: Int, endSide: Int, margin: Int)
 
constraintSet.connect(startID: Int, startSide: Int, endID: Int, endSide: Int)
复制代码

3、可以修改控件尺寸

constrainWidth(int viewId, int width)
constrainHeight(int viewId, int height)
constrainPercentWidth(int viewId, float percent)
constrainPercentHeight(int viewId, float percent)
复制代码

其他的跟尺寸有关的API还有：

constrainDefaultWidth/constrainDefaultHeight
constrainMaxWidth/constrainMaxHeight
constrainMinWidth/constrainMinHeight
用来设置一些默认、最大最小尺寸，不常用，可以看以下文章展示的例子 RecyclerView 设置最大高度

4、设置动画

TransitionManager.beginDelayedTransition(mainLayout)
复制代码

5、apply一下使设置生效

constraintSet.applyTo(rootLayout)
复制代码

举个梨子

Button operate = findViewById(R.id.operate);

        ConstraintLayout constraintLayout = findViewById(R.id.view_constraintLayout);
        ConstraintSet constraintSet = new ConstraintSet();
        constraintSet.clone(constraintLayout);

        operate.setOnClickListener(v -> {
            constraintSet.connect(R.id.button2,ConstraintSet.TOP,R.id.button1,ConstraintSet.BOTTOM,dpToPx(this,40));
            constraintSet.connect(R.id.button2,ConstraintSet.LEFT, ConstraintSet.PARENT_ID,ConstraintSet.LEFT);
            constraintSet.constrainWidth(R.id.button2, ConstraintSet.WRAP_CONTENT);
            constraintSet.constrainHeight(R.id.button2, dpToPx(this,100));
            TransitionManager.beginDelayedTransition(constraintLayout);
            constraintSet.applyTo(constraintLayout);
        });
复制代码

这只是 ConstraintSet的最基本用法，更多用法可以查看文章末尾参考链接

ConstraintLayout 用法全解析
约束布局ConstraintLayout看这一篇就够了\