约束布局ConstraintLayout

最新推荐文章于 2025-10-27 18:20:11 发布
原创 最新推荐文章于 2025-10-27 18:20:11 发布 · 2.8k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Android的ConstraintLayout，包括其背景、优点、项目引入方法及基本使用技巧，如相对位置、尺寸约束、宽高比、百分比宽高、偏移量、圆形定位等。此外，还探讨了ConstraintLayout 2.0的新特性，如Flow布局、自定义ConstraintHelper、状态切换布局功能和创建约束工具类，帮助开发者更高效地构建复杂且自适应的界面。
部署运行你感兴趣的模型镜像

文章目录


国际惯例，官网参考文档是最好的学习资料：

使用 ConstraintLayout 构建自适应界面

一，背景

约束布局 ConstraintLayout，也有人把它称作“增强型的相对布局”，扁平式的布局方式，无任何嵌套，减少布局的层级，优化渲染性能。是最受欢迎的 Jetpack 库之一，其实是 Android Studio 2.2 中主要的新增功能之一，也是 Google 在2016年的 I/O 大会上重点宣传的一个功能。AS 已经将它作为新建页面默认布局了。经历这几年的迭代，功能已经非常的成熟，现在 2.0 正式版本也发布了，也许你已熟悉了旧版本中的功能，并开始用它来快速构建复杂的页面布局，而新版本除了包含旧版本中的所有功能之外，还在 AS 中集成了可以直接预览 XML 的工具，甚至可以直接在预览界面中对布局进行编辑。

二，控件优点

ConstraintLayout 可以理解为 RelativeLayout + LinearLayout 的混合强化版，同时新版 Android Studio 的布局编辑器也提供了对 ConstraintLayout 完善的编辑支持。使用 ConstraintLayout 可以很方便地在一个层级上实现复杂的布局，功能也很完善，是 Android 官方目前非常重视的一个 Layout（替代以前的 RelativeLayout），使用 ConstraintLayout 后基本可以抛弃 LinearLayout 和 RelativeLayout 的使用，完全不需要任何嵌套就可以实现复杂的 UI，使用起来特别清爽。减少了很多的嵌套的层级，这样 View 在渲染的时候，减少了很多多余的 measure 和 layout 的开销，如果嵌套的层次越多，提升的效果越明显。

感兴趣的话看官方给出的性能测试示例：解析ConstraintLayout的性能优势

三，项目中引入

如需在项目中使用ConstraintLayout，请按以下步骤操作：

  1. 确保你的maven.google.com代码库已在模块级build.gradle文件中声明：
repositories {
    google()
}
  1. 将该库作为依赖项添加到同一个build.gradle文件中，如以下示例所示。请注意，最新版本可能与示例中显示的不同：
dependencies {
       implementation "androidx.constraintlayout:constraintlayout:2.0.4"
       // To use constraintlayout in compose
       implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha05"
}
  1. 在工具栏或同步通知中，点击 Sync Project with Gradle Files。

现在，你可以使用 ConstraintLayout 构建布局。

四，基本使用

4.1 相对位置

要在ConstraintLayout 中确定 view 的位置，必须至少添加一个水平和垂直的约束。每一个约束表示到另一个 view、父布局或者不可见的参考线的连接或者对齐。如果水平或者垂直方向上没有约束，那么其位置就是0。

下面是 ConstraintLayout 确定位置的属性，这些属性的值即可以是 parent（父布局），也可以是某个 view 的 id，和同类型的RelativeLayout属性很相似：

ConstraintLayoutRelativeLayout作用
layout_constraintLeft_toLeftOflayout_alignLeft与参照控件左对齐
layout_constraintLeft_toRightOflayout_toRightOf在参照控件的右边
layout_constraintRight_toLeftOflayout_toLeftOf在参照控件的左边
layout_constraintRight_toRightOflayout_alignRight与参照控件右对齐
layout_constraintTop_toTopOflayout_alignTop与参照控件上对齐
layout_constraintTop_toBottomOflayout_below在参照控件底部
layout_constraintBottom_toTopOflayout_alignBottom在参照控件的上部
layout_constraintBottom_toBottomOflayout_above与参照控件下对齐
layout_constraintBaseline_toBaselineOflayout_alignBaseline与参照控件基线对齐
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

说明：这里 start/end 一般情况下和 left/right 是一样的效果，主要是为了做国际化适配，方便从右往左读的语言文字（如阿拉伯文）。

一个简单的页面：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左对齐"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右对齐"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="底部对齐"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平居中+垂直居中"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
居中显示：

<!--
即view的左边对齐父布局的左边，view的右边对齐父布局的右边，除非这个view的大小刚好充满整个父布局；
否则的话，就是水平居中显示了。我们可以理解为有两个相同的力，把view拉到中间。
-->
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

水平方向的相对位置：

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

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平参照物"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left_toLeftOf"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintLeft_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right_toLeftOf"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintRight_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Right_toRightOf"
        app:layout_constraintRight_toRightOf="@id/btn_center"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Left_toRightOf"
        app:layout_constraintLeft_toRightOf="@id/btn_center"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

效果如下：
在这里插入图片描述
竖直方向的相对位置：

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

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:text="竖直参照物"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top_toTopOf"
        app:layout_constraintTop_toTopOf="@id/btn_center"
        app:layout_constraintRight_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom_toTopOf"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintRight_toLeftOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Top_toBottomOf"
        app:layout_constraintLeft_toRightOf="@id/btn_center"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bottom_toBottomOf"
        app:layout_constraintLeft_toRightOf="@id/btn_center"
        app:layout_constraintBottom_toBottomOf="@id/btn_center"/>
</androidx.constraintlayout.widget.ConstraintLayout>

效果如下
在这里插入图片描述

4.2 尺寸约束

view 中使用 warp_content 或者固定值等等是没有问题的。但是在 ConstraintLayout 中不推荐使用 match_parent 这个值，如果需要实现跟 match_parent 同样的效果，可以使用 0dp 来代替，其表示 match_parent，即适应约束。其跟 match_parent 还是有区别的，后面的例子（宽高比那一小节）会提到。
我们来看下例子：

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

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/btn_1"
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:text="具体数值：180dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_center"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="0dp(match_parent)"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

4.3 宽高比 Ratio

在 ConstraintLayout 中，还可以将宽定义成高的一个比例或者高定义成宽的比率。首先，需要将宽或者高设置为0dp（即match_parent），即要适应约束条件。然后通过 layout_constraintDimensionRatio 属性设置一个比率即可。这个比率可以是一个浮点数，表示宽度和高度之间的比率；也可以是“宽度:高度”形式的比率。比如：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="30dp"
        app:layout_constraintTop_toTopOf="parent"
        android:text="-------------------宽高比2：1-------------------"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
如果宽和高都设置为0dp（match_parent），那么 layout_constraintDimensionRatio 的值需要先加一个"W,"或者"H,"来表示约束宽度或高度。如下：

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

    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

4.4 百分比宽高 Percent

ConstraintLayout 还能使用百分比来设置 view 的宽高。要使用百分比，宽或高同样要设置为 0dp（match_parent）。然后设置以下属性即可：

app:layout_constraintWidth_default="percent" //设置宽为百分比，可以设置percent、spread和wrap
app:layout_constraintWidth_percent="0.3" //0到1之间的值，为占父布局宽度的多少
app:layout_constraintHeight_default="percent" //设置高为百分比，可以设置percent、spread和wrap
app:layout_constraintHeight_percent="0.3" //0到1之间的值，为占父布局宽度的多少

例子如下：

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

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="宽50%"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintWidth_percent="0.5"/>

</androidx.constraintlayout.widget.ConstraintLayout>

注：在早期版本中必需手动指定 app:layout_constraintWidth_default=“percent”，在之后的版本中如果设置了app:layout_constraintWidth_percent 属性，则可以不用指定。

效果如下：
在这里插入图片描述
官网的介绍是这样的：

You can also define one dimension of a widget as a ratio of the other one. In order to do that, you need to have at least one constrained dimension be set to 0dp (i.e., MATCH_CONSTRAINT), and set the attribute layout_constraintDimensionRatio to a given ratio

意思是说约束布局支持子控件设置宽高比，前提条件是至少需要将宽高中的一个设置为0dp。为了约束一个特定的边，基于另一个边的尺寸，可以预先附加W，或H以逗号隔开。

4.5 偏移量 bias

如果想让view的位置偏向某一侧，可以使用以下的两个属性来设置：

layout_constraintHorizontal_bias  //水平偏向
layout_constraintVertical_bias  //竖直偏向

其值同样也是0到1之间。比如，以下例子为横向偏向左侧30%，默认的居中效果就是50％：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左边偏向30%"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

显示效果如下：
在这里插入图片描述

4.6 圆形定位 Circular positioning

以一个控件为圆心设置角度和半径定位

  • layout_constraintCircle：关联另一个控件，将另一个控件放置在自己圆的半径上，会和下面两个属性一起使用
  • layout_constraintCircleRadius：圆的半径
  • layout_constraintCircleAngle：圆的角度

4.7 权重 weight

LinearLayout中可以设置权重，ConstraintLayout 同样也有这个属性。通过设置以下两个属性：

app:layout_constraintHorizontal_weight //水平权重
app:layout_constraintVertical_weight //竖直权重

然后将相连的 view 两两约束好即可。如下：

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

    <Button
        android:id="@+id/btn_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为1"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_2"/>

    <Button
        android:id="@+id/btn_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="权重为2"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@id/btn_1"
        app:layout_constraintRight_toLeftOf="@id/btn_3"/>

    <Button
        android:id="@+id/btn_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="2"
        android:text="权重为2"
        app:layout_constraintLeft_toRightOf="@id/btn_2"
        app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

4.8 辅助线 Guideline

Guideline 可以用来辅助布局，通过 Guideline 能创建出一条水平线或者垂直线，该线不会显示到界面上，但是能够利用这些线条来添加约束去完成界面的布局。

Guideline主要的属性有：

android:orientation="horizontal|vertical" 
app:layout_constraintGuide_begin="30dp" 
app:layout_constraintGuide_end="30dp"
app:layout_constraintGuide_percent="0.5"

<!--
android:orientation=”horizontal|vertical”表示是水平或垂直引导线。
app:layout_constraintGuide_begin=”30dp”，如果是水平引导线，则距离布局顶部30dp，如果是垂直引导线，则距离布局左边30dp。
app:layout_constraintGuide_end=”30dp”，如果是水平引导线，则距离布局底部30dp，如果是垂直引导线，则距离布局右边30dp。
app:layout_constraintGuide_percent=”0.5”，如果是水平引导线，则距离布局顶部为整个布局高度的50%，如果是垂直引导线，则距离布局左边文这个布局宽度的50%。
-->

来看个例子：

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

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_v"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

    <Button
        app:layout_constraintLeft_toLeftOf="@id/guideline_v"
        app:layout_constraintTop_toTopOf="@id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="辅助线定位"/>
</androidx.constraintlayout.widget.ConstraintLayout>

如下图所示：
在这里插入图片描述

4.9 屏障 Barrier

Barrier，直译为障碍、屏障。在约束布局中，可以使用属性constraint_referenced_ids属性来引用多个带约束的组件，从而将它们看作一个整体，Barrier 的介入可以完成很多其他布局不能完成的功能。

开发中有这样的一个需求，看下图：
在这里插入图片描述
姓名、联系方式位于左侧区域（随着文本的宽度变化左侧区域的宽度也随之变化），使用传统的布局方式实现嵌套过多，布局不够优雅。那么来看看约束布局是怎么去实现的：

<?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="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="姓名："
        app:layout_constraintBottom_toBottomOf="@+id/et_name"
        app:layout_constraintTop_toTopOf="@+id/et_name"/>

    <TextView
        android:id="@+id/tv_contract"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="联系方式："
        app:layout_constraintBottom_toBottomOf="@+id/et_contract"
        app:layout_constraintTop_toTopOf="@+id/et_contract"/>

    <EditText
        android:id="@+id/et_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入姓名"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <EditText
        android:id="@+id/et_contract"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="请输入联系方式"
        app:layout_constraintLeft_toLeftOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_name"/>

    <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="tv_name,tv_contract"/>

</androidx.constraintlayout.widget.ConstraintLayout>

barrierDirection 指定方向，constraint_referenced_ids引用的控件 id（多个id以逗号隔开）。

4.10 Group

Group用于控制多个控件的可见性。使用非常简单，若 android:visibility="gone" 那么 btn1，btn2 控件都会隐藏。

<androidx.constraintlayout.widget.Group
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:constraint_referenced_ids="btn1,btn2">
    <Button
        android:id="@+id/btn1"
        android:text="btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <Button
        android:id="@+id/btn2"
        android:text="btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.Group>

4.11 隐藏边距 goneMargin

当约束目标的可见性为View.GONE时，还可以通过以下属性设置不同的边距值：

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

4.12 链 Chains

上面这种将相连的 view 两两约束好的实际上就形成了链。在 ConstraintLayout 中可以实现各种不同的链，权重链是其中一种。整个链由链中的第一个view（链头）上设置的属性控制。

官网上一共有4种样式的链：
在这里插入图片描述

  • Spread：视图是均匀分布的（在考虑外边距之后）。这是默认值。
  • Spread inside：第一个和最后一个视图固定在链两端的约束边界上，其余视图均匀分布。
  • Weighted：当链设置为 spread 或 spread inside 时，您可以通过将一个或多个视图设置为“match_parent”(0dp) 来填充剩余空间。默认情况下，设置为“match_parent”的每个视图之间的空间均匀分布，但您可以使用 layout_constraintHorizontal_weight 和 layout_constraintVertical_weight 属性为每个视图分配重要性权重。如果您熟悉线性布局中的 layout_weight 的话，就会知道该样式与它的原理是相同的。因此，权重值最高的视图获得的空间最大；相同权重的视图获得同样大小的空间。
  • Packed：视图打包在一起（在考虑外边距之后）。 然后，您可以通过更改链的头视图偏差调整整条链的偏差（左/右或上/下）。
layout_constraintHorizontal_chainStyle // 横向约束链
layout_constraintVertical_chainStyle // 纵向约束链

五，ConstraintLayout 2.0 新特性

官方更新文档：What’s New in 2.1

5.1 新增VirtualLayouts：Flow布局

Flow布局是Chains的强化版，是一种新的VirtualLayouts。用于构建流式排版效果：当出现空间不足时，可自动换行或自动延展到屏幕的另一区域。即当需要对多个View进行流式布局 / 不确定其布局空间的实际尺寸时，就可使用Flow布局。
在这里插入图片描述
使用步骤：

  1. 通过属性constraint_referenced_ids获取要引用的视图；
  2. 根据这些视图创建一个虚拟的virtual view group；
  3. 对这些视图进行流式布局。
<androidx.constraintlayout.helper.widget.Flow
 	app:constraint_referenced_ids="a1,a2,a3"
    app:flow_wrapMode="aligned"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

核心属性：flow_wrapMode，用于控制元素的排列方式。
wrapMode
属性说明如下：

<androidx.constraintlayout.helper.widget.Flow
 	app:constraint_referenced_ids="a1,a2,a3"
    app:flow_wrapMode="aligned"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />
<!--
NONE : 默认模式。Views不会被包裹到另一行或列。如果它们在屏幕之外，则不能被看到。
CHAIN : CHAIN与Chains非常相似，可以认为是Chains的强化版本。CHAIN是根据orientation逐行或逐列进行排列的，默认的展示风格是SPREAD。
ALIGNED : ALIGNED模式与CHAIN类似，但链式是在将不同行和列的视图对齐后考虑的，默认的样式是SPREAD。
-->

5.2 可自定义ConstraintHelper

ConstraintHelper 是一个用于记录标记 Views 的 Helper，通过引用指定 Views 从而实现具体效果。

使用场景

  • 辅助布局：创建一个新的布局方式，避免创建新的 ViewGroup 从而加深层级
  • 修改布局：在布局完成后，修改布局效果
  • 重新渲染：在View绘制完成后，对View进行修改、重新渲染效果

具体使用：通过继承 ConstraintHelper 类实现 & 重写所需回调，具体如下所示。

// 继承ConstraintHelper类
class carsonhoTest @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : ConstraintHelper(context, attrs, defStyleAttr) {
 
 // 复写常用方法
    override fun updatePostLayout(container: ConstraintLayout?) {
        super.updatePostLayout(container)
        getViews(container).forEach { view ->
            ViewAnimationUtils.createCircularReveal(
                view, view.width / 3,
                view.height / 3, 0f,
                hypot((view.height / 3.0), (view.width / 3.0)).toFloat()
            ).apply {
                duration = 2000
                start()
            }
        }
    }
}

// 常用方法说明
init() // 初始化调用
updatePreLayout() // 布局前更新
updatePostLayout() // 布局后更新
updatePostMeasure() // 测量后更新
updatePostConstraints() // 更新约束
onDraw() // 进行绘制

5.3 新增切换状态布局功能：ConstraintLayoutStates

ConstraintLayoutStates 用于根据状态切换不同的布局文件。

具体使用

// 步骤1：创建不同状态的layout xml文件，布局文件的root id相同即可。
// 如：states_1、states_2

// 步骤2：在xml文件夹下创建管理文件
<?xml version="1.0" encoding="utf-8"?>
<ConstraintLayoutStates xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <State
        android:id="@+id/state1"
        app:constraints="@layout/states_1" />

    <State
        android:id="@+id/state2"
        app:constraints="@layout/states_2" />

</ConstraintLayoutStates>

// 步骤3：使用loadLayoutDescription来加载管理文件
val constraintLayout = findViewById<ConstraintLayout>(R.id.constraint_state)
constraintLayout.loadLayoutDescription(R.xml.constraint_layout_states)
constraintLayout.setOnClickListener {
    // 点击时切换布局文件
    constraintLayout.setState(R.id.state2, 0, 0)
}

5.4 新增创建约束工具类：ConstraintProperties

ConstraintProperties 是在代码中创建约束的工具类。
具体使用：在该工具类出来前，修改属性的常用方式是：

ConstraintSet().apply {
    clone(constraintLayout)
    setTranslationX(R.id.xxx, 32f)
    setMargin(R.id.xxx, ConstraintSet.START, 42)
    applyTo(constraintLayout)
}

对于 ConstraintLayoutStates，可使用流式 API 修改属性，更加方便快捷。

ConstraintProperties(findViewById(R.id.xxx))
    .translationZ(8f)
    .margin(ConstraintSet.START, 8)
    .apply()

PS. 推荐阅读

您可能感兴趣的与本文相关的镜像

Facefusion

Facefusion

AI应用

FaceFusion是全新一代AI换脸工具，无需安装，一键运行，可以完成去遮挡，高清化，卡通脸一键替换，并且Nvidia/AMD等显卡全平台支持

（九）Android布局类型（约束布局ConstraintLayout）
以秘
03-18 1046
Android布局类型（ConstraintLayout约束布局）
Android约束布局ConstraintLayout的使用
跟着哆啦学Android
06-04 1690
Android引入约束布局的目的是为了减少布局层级的嵌套，从而提升渲染性能。约束布局综合线性布局、相对布局、帧布局的部分功能，缺点也很明显，就是可能要多写几行代码。所以约束布局使用时，还得综合考虑代码量。提升性能也并不一定非得使用约束布局，也可以在ViewGroup上dispatchDraw。你需要根据业务的具体情况选择最合适的实现方式。我知道很多人一开始很不习惯使用约束布局，但既然你诚心诚意问我怎么使用了？于是我就大发慈悲告诉你怎么使用呗。
带你了解Android约束布局ConstraintLayout
四月葡萄的博客
09-18 6613
目录1 ConstraintLayout简介2 引入ConstraintLayout3 相对位置4 尺寸约束5 宽高比6 百分比宽高7 位置偏向8 权重9 链10 Guideline辅助线11 小结 ConstraintLayout是Android新推出的一个布局，其性能更好，连官方的hello world都用ConstraintLayout来写了。所以极力推荐使用ConstraintLayout...
约束布局ConstraintLayout看这一篇就够了
weixin_34167819的博客
09-27 3579
目录 1.介绍 2.为什么要用ConstraintLayout 3.如何使用ConstraintLayout 3.1 添加依赖 3.2 相对定位 3.3 角度定位 3.4 边距 3.5 居中和偏移 3.6 尺寸约束 3.7 链 4.辅助工具 4.1 Optimizer 4.2 Barrier 4.3 Group 4.4 Placeholder 4.5.Guideline 5.总结 1.介绍 约...
Android ConstraintLayout 使用详解
最新发布
要乐观，要积极，多笑，多照镜子
10-27 989
ConstraintLayout是Android官方推出的一种灵活布局管理器，通过约束关系定位UI元素，具有减少嵌套、提升性能的优势。核心功能包括：支持相对定位、边距调整、居中偏移、自适应尺寸和比例约束等。使用前需添加依赖，然后在XML中通过app:layout_constraintXXX属性定义视图间的约束关系。关键特性包括视图居中（bias）、尺寸自适应（0dp）和宽高比设置（ratio），可大幅简化复杂布局的实现。
基础布局之ConstraintLayout约束布局
似霰的博客
04-01 6786
基础布局之ConstraintLayout约束布局
最全面的ConstraintLayout教程
郭霖
02-03 5741
亲自执笔，给大家带来新年第一篇原创文章
Android约束布局ConstraintLayout使用完全解析
11-21
`ConstraintLayout`是Google在Android Design Support Library中引入的一种布局，它允许开发者通过建立视图间的约束来定位和调整大小，使得布局在不同屏幕尺寸上都能保持良好的适应性。相比传统的线性布局...
Android 入门第二讲03-约束布局ConstraintLayout（可视化介绍，Chains链，MATCH_CONSTRAIN，百分比布局，圆形定位，Guideline，Barrier）
Rose J 的博客
07-02 2039
安卓入门第二讲-约束布局ConstraintLayout 约束布局ConstraintLayout 介绍：约束布局是2016年在Google io大会上提出来的技术 1.可视化介绍 1.基本介绍 提示：魔法棒不适用于复杂定位约束，因为可能会发生约束冲突，不够精准。 2.给控件添加约束的方法 1. 魔法棒一键添加约束（适合简单ui） 2. 代码进行约束 约束布局基本属性 app:layout_constraintLeft_toLeftOf="" 控件左边缘相对id控件左边缘 app:layout_con
【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-28 6356
一. ConstraintLayout 简介 1. 引入 约束 布局 ( 1 ) 约束性布局 作用 和 简介 2. 约束 简介 ( 1 ) 约束个数要求 ( 2 ) 约束设置 与 显示位置 3. ConstraintLayout 引入 ( 1 ) ConstraintLayout 依赖添加 ( 2 ) ConstraintLayout 转换 与 添加 二. ConstraintLayout 约束 的 基本操作 1. 约束基本操作 ( 1 ) Design ( 设计 ) 和 Bluepr
Android详解——ConstraintLayout约束布局
闲暇部落
12-19 4871
ConstraintLayout继承自ViewGroup，允许用户以更加灵活的方式在布局中设置控件的位置和尺寸（ConstraintLayout在API>9可用）。ConstraintLayout采用方向约束的方式对控件进行定位,至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。相对位置边距中心位置圆形位置可见性尺寸约束链式布局虚拟辅助控件优化器记住，依赖关系中不能有循环依赖关系。
constraintlayout嵌套_约束布局ConstraintLayout看这一篇就够了
weixin_39772651的博客
12-20 1322
目录1.介绍2.为什么要用ConstraintLayout3.如何使用ConstraintLayout3.1 添加依赖3.2 相对定位3.3 角度定位3.4 边距3.5 居中和偏移3.6 尺寸约束3.7 链4.辅助工具4.1 Optimizer4.2 Barrier4.3 Group4.4 Placeholder4.5.Guideline5.总结1.介绍约束布局ConstraintLayout 是...
通过代码来添加布局约束
ffblog的专栏
05-18 1271
本系列的第一篇文章介绍了自动布局的基本原理，第二篇文章通过一个简单的例子演示了如何使用Xcode的Interface Builder（简称IB）以可视化方式添加约束。本篇为该系列的第三篇文章，主要介绍如何通过代码来添加布局约束。  其实，我个人认为本篇才应该是系列的第二篇，因为通过代码构建自动布局约束是最基础的，也是最灵活的方式。而IB只不过是把复杂的过程以直观简单的方式呈现出来，而且并非所有的
约束布局ConstraintLayout（学习）
秦.帆
10-28 767
简单了解 约束布局：它是为了解决什么样的问题才出现的？为了解决布局嵌套过多的问题。 RelativeLayout(相对布局)不也可以解决布局嵌套过多的问题吗？它与之相比又有何优势呢？是的。它与之相比更灵活，性能更好，而且它使用百分比来进行定位与布局，可以相对的解决屏幕适配问题。 开始使用 官方文档 1.添加依赖 implementation 'com.android.support.constraint:constraint-layout:1.1.3' 2.简单使用 <andr.
约束布局ConstraintLayout（官翻篇）
梦想家Eva的专栏
11-15 3126
想写一篇关于约束布局ConstraintLayout的使用，看了网上其他人总结的很全面，一下子不知道自己该写什么了，索性翻译下官网文章，顺便锻炼下英文阅读能力。 原文地址： ConstraintLayout https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout
Android约束布局ConstraintLayout
2401_84011132的博客
03-30 1696
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析，我把大厂面试中常被问到的技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。Android 基础知识点Java 基础知识点Android 源码相关分析常见的一些原理性问题。
Android约束布局ConstraintLayout使用详解
Android约束布局ConstraintLayout是Google在2016年推出的一种现代化的布局管理器，旨在解决传统布局嵌套过深、性能低下以及难以维护的问题。作为Android开发中UI设计的重要组成部分，ConstraintLayout通过引入“约束...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小山研磨代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值