ConstraintLayout从0到0.n学习

最新推荐文章于 2024-05-10 23:09:41 发布

娅娅梨

最新推荐文章于 2024-05-10 23:09:41 发布

阅读量1.6k

点赞数 2

分类专栏： Android基础

本文链接：https://blog.csdn.net/weixin_28774815/article/details/82731799

版权

Android基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

ps: 十分疑惑如此逆天的ConstraintLayout，竟然没多少人看！！当然也可能是除了我大家都会了。虽然我文章写的不咋地，但是还是想说ConstraintLayout非常非常好用，很值得学！
ConstraintLayout是位于support包下的继承自ViewGroup的类。称之为约束布局。android api level 9 版本以上的sdk均可以支持。并且官方特别强调了一句他们打算不断的去维持它。甚至在我当前使用的android studio 中，选择建立一个activity‘的时候甚至自动作为其XML文件的顶级标签了。可见google对其重视程度。那么为什么这个重视这个ConstriantLayout呢？下面简单的介绍几句约束布局的优势。
1 可视化布局。这种布局很适合你用可视化工具拖拽。前方拖拽，xml自动生成相应的布局代码。很方便。经验所谈，标签的属性含义必须理解，但是千万不要试图着用手硬码XML文件，太耗费时间，ConstraintLayout建议纯拖拽！！遇到奇葩的再回头看xml文档适当调整一下个别值即可。难点在于纯手码xml文件到改为拖拽的适应.
在这里插入图片描述
2 有效的解决布局嵌套层数过多问题。大家都应该知道，我们平常编辑XML布局的时候，应当注意的是想方法不让我们的布局层数嵌套的过多。越多越影响程序的性能。relativeLayout的使用可以使我们在一定程度上减少布局嵌套的层数。什么merge标签，include标签的结合使用也可以在一定程度上减少嵌套的层数。但是ConstriantLayout事实上要比relativeLayout还要灵活还要方便还要强大的多。甚至你可以把一个复杂的界面用一层即可搭建完成。当然，这个得看使用者的熟练程度。

相对定位

横向轴上的相对位置描述有： left, right, start, end.
纵向轴上的相对位置描述有：top, bottom, 和 text baseline （Text baseline,暂时不明白是个啥。）
这些特殊的词只是来描述相对的位置，比如b在a的右边：
在这里插入图片描述

在这里插入图片描述
TextView3是左边的那么控件， TextView4 是右边的那个控件。他们的相对位置被描述在了一个叫app:layout_constraintStart_toEndOf的标签里面去。

<TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

当我们不指定 android:layout_marginStart="72dp"这个参数的时候，左边的控件和控件默认为0，官方的解释是，左边控件的end边缘，与右边控件的start边缘共享同一个位置。不理解为什么要做这样的解释。
在这里插入图片描述

上图也解释了baseline这个是什么。至少我现在理解为文字位置的基线。
有关于相对定位的其他标签（举一反三，相信很快就能get到规则）以下图示全部是对textview4控件在xml做操作。
layout_constriantLeft_toLeftOf 当前控件的左侧居目标控件的左侧（左3右4）
有没有发现在这种情况下，textView4 对于 textview3 的 margin明明设置了72dp但是看起来这个72不奏效！

<TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintLeft_toLeftOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

在这里插入图片描述
再稍微的用可视化工具拖拽上面视图看看锚点是怎么指向的：4的左边指到了3的左边缘。然后仔细观察视图，你会发现TextView4的左边箭头指向了TextView3的同时，TextView4左侧实则有一个值为4的边距。这个是我自己拉出来的。XML代码的layout_marginstart 就是4. 似乎发现了一些神奇的事情！也就是margin并非是不奏效。它不仅奏效，而且是根据箭头的指向决定margin的到底是谁！！
在这里插入图片描述
layout_constriantLeft_toRightOf 当前控件的左边的边缘，居目标控件的右侧。一切展示符合正常的思考。

<TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="8dp"
        android:text="TextView"
        app:layout_constraintLeft_toRightOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

在这里插入图片描述

layout_constraintRight_toLeftOf 当前控件的右边边缘居目标控件的左边

<TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="8dp"
        android:text="TextView4"
        app:layout_constraintRight_toLeftOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

在这里插入图片描述
如果把位置稍微调整一下看看锚点到底是怎么指向的，你会发现一个有趣的现象：
凡是 layout_constraintXXX_roYYYOf 观察可视化工具，你会发现锚点的指向，全部都是当前控件的XXX侧为起点，指向目标控件的YYY侧作为终点。再仔细看这个可视化工具的图示，你会发现另外一个有意思的现象。咱们XML文件中明明白白写着 android:layout_marginStart=“72dp”， android:layout_marginTop=“8dp” 。但是咦？marginTop 8dp 是好使的，但是marginStart 的 72dp呢？被吃了？TextView4位置都快被流放到区域外了。明明XML写着距离start 72dp。。好好猜想一下，是不是ConstraintLayout中的layout_marginXXX专门针对带锚点的才奏效？也就是有箭头，才知道靶目标是谁，才能正确的margin。否则不奏效？

在这里插入图片描述

layout_constraintRight_toRightOf 当前控件的右边缘位于目标控件边缘的右侧
按照前面那个规则推理的话，应该是TextView4右侧为锚点头，指向TextView3的右侧。

<TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="48dp"
        android:layout_marginTop="48dp"
        android:text="TextView4"
        app:layout_constraintRight_toRightOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

在这里插入图片描述
事实说明猜想合理。

那么这样的话，我们几乎可以重新理解 layout_constraintXXX_roYYYOf 这个标签了，它描述了一个锚点，从当前控件的XXX侧边缘指向目标控件的YYY侧边缘

同理类似的其他标签：

**当前控件的上方边缘为锚点起点： **
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
当前控件的下方边缘为锚点起点：
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
当前控件的横向轴开始为锚点起点
layout_constraintStart_toStartOf
layout_constraintStart_toEndOf
当前控件的横向轴结束为锚点起点
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
剩下一个关于baseLine的标签也是遵循这个原则，目的是让文字的基准线对齐
layout_constraintBaseline_toBaselineOf

margin

普通时候的margin

上面通过操作已经看出了一些倪端，那就是margin！仅仅简单的使用 layout_marginXXX这种标签，表面上看有时候奏效有时候不奏效。但是官方网站说，设置两个控件的距离就是用的layout_marginXXX标签，但是有一句提的很诡异！
在这里插入图片描述
我这样理解，margin要么就好使，要么等价于给他设置了0！按照之前分析的现象。目前我至少可以有很大把握确定margin只当有靶目标的时候奏效。无论这个靶目标是父布局还是同级布局。（因为至今没有看源码。不是特别确定到底是不是这个规则。）

当靶向目标控件是gone的时候，怎么margin？

官方特意说明靶向目标是gone的时候如何确定当前目标的margin。为什么要专门说明一下这个？我们不妨试试，当靶向目标为gone的时候究竟会发生什么。
1 开始设置成正常的布局。
在这里插入图片描述

<TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="140dp"
        android:layout_marginTop="16dp"
        android:text="TextView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginTop="16dp"
        android:text="TextView4"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

2 然后把textView3 设置为gone，其余不变！看看可视化工具中的变化！

 <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="140dp"
        android:layout_marginTop="16dp"
        android:text="TextView3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:visibility="gone"/>

在这里插入图片描述
TextView4明显左移了，并且它的箭头指歪了？？有箭头，莫非箭头数据还存在只不过把靶向目标的位置数据给默认成了 0，0 ？才导致箭头这么歪，textView4 的 margin依然奏效？目前找不出其他的更合理的理由了。这个真的得看源码分析下了。
3 那么如果我们用了官方给的这类标签又会怎么样？试一试。但是目前仍然不清楚，这个标签究竟是用到靶向目标控件上，还是当前控件呀？
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
经过测试，这个标签是用到当前对象的。意思是，如果靶向目标为gone了，我应当调整我的margin值为多少。

<TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginTop="16dp"
        android:text="TextView4"
        app:layout_goneMarginStart="140dp"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toTopOf="parent" />

如图所示：
在这里插入图片描述
好，现在我至少大概猜到了靶向目标设置为gone的时候大约是怎么个规则了。

bias

bias 是用来对当前控件定位置比例的，指的是当前控件的start方或者top方占据的剩余空间的比例。例如设置app:layout_constraintHorizontal_bias=0.5 代表横向方向上，当前控件开头的比例占据当前控件横向剩余总空间的0.5的比例。也就是这样居中。显的感觉到，用可视化工具的时候，简直是想拖到那里就拖到那里。十分方便。但是万一，给的UI恰好是给你一个TextView，让你放到水平位置，控件的左边距靶向目标距离与右边距靶向目标距离的比例是3：1呢？
在这里插入图片描述

圆形定位

不得不赞颂constraintLayout的强大之处了。竟然可以搞圆形。那么我们根据这些说明再写一个控件看看什么样子。
layout_constraintCircle : references another widget id
layout_constraintCircleRadius : the distance to the other widget center
layout_constraintCircleAngle : which angle the widget should be at (in degrees, from 0 to 360)

<TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:text="TextView5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView6"
        app:layout_constraintCircle="@id/textView5"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="246dp"
        tools:layout_editor_absoluteY="205dp" />

在这里插入图片描述
试了试才发现，TextView6 设置对于TextView5的圆形位置元素后。6即使没有锚点也能活！神奇啊！

可见性行为

通过前面的现象，已经怀疑当靶向目标（我称之为靶向，实则人家不叫靶向。就是为了自身的理解而起的一个自己能理解的名字）设置为gone的时候，靶向目标似乎缩到了左上角。但是约束好像依然存在。除非你为当前控件设置上 goneMarginXXX。那么对于靶向目标控件的消失，究竟对于靶向目标控件而言是什么样的规则呢？
For the layout pass, their dimension will be considered as zero (basically, they will be resolved to a point)
If they have constraints to other widgets they will still be respected, but any margins will be as if equals to zero。
好了，就这样，当靶向目标设置为gone的时候，自身的长宽变为0，同时他对别的控件的约束（也就是从他为起点向别的控件发的箭头）实则还在，但是margin无效，为0! 这也就解释了在上面的分析中所产生的现象。详见 当靶向目标控件是gone的时候，怎么margin 自然段的现象描述。
但是既然是这样的规则，我们要用goneMarginXXX来对一些控件设置其靶向目标消失时候的，可能用到的边距！
还有一句话不解，如下：
This specific behavior allows to build layouts where you can temporarily mark widgets as being GONE, without breaking the layout (Fig. 7), which can be particularly useful when doing simple layout animations.
breaking layout 是什么意思啊？

尺寸约束

对于ConstraintLayout标签的书写，当ConstraintLayout被设置为WRAP_CONTENT的时候，可以给其设置最小或者最大的尺寸限制。这个其实很好理解，因为其他的layout也是这样用的，就不多做描述了。
android:minWidth set the minimum width for the layout
android:minHeight set the minimum height for the layout
android:maxWidth set the maximum width for the layout
android:maxHeight set the maximum height for the layout
这段标签应当是相当好理解了。

权重尺寸约束

在ConstraintLayout的所有子控件中，他们的layout_width , layout_height的设置方式只有3种：
1 给定精确的值，如 20dp
2 wrap_content：适应里面的内容
3 用0dp表示，代表 MATCH_CONSTRAINT. 注意对于约束布局中的控件而言根本就没有match_parent这一说！

WRAP_CONTENT : enforcing constraints (Added in 1.1)

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
一个陌生的标签。搞不懂啊，英文解释也没看懂。摘抄了一份其他人说的。

在 1.1 版本之前，如果将控件的尺寸设置为 wrap_content，那么对控件设置的 app:layout_constrainedWidth\Height这些约束是不起作用的，因此就在 1.1 中增加了
app:layout_constrainedWidth 、app:layout_constrainedHeight 这两个属性，当置为 true 时且控件尺寸为 wrap_content 时，通过 app:layout_constrainedWidth_max 等设置等限制大小的值就会生效。
另外，当 layout_width 或者 layout_height 为 wrap_content 时（注意：非 0dp），同样可以使用对应的 android:minXXX 与 android:maxXXX 来限制控件的尺寸。
而如果有同时设置 android:maxHeight 与 app:layout_constrainedWidth_max，则不管有没有设置 app:layout_constrainedWidth，都会强制生效 android:maxHeight ，而忽略app:layout_constrainedWidth_max的影响。

也就是针对某个控件，如果你将其长宽设置为 wrap_content, 你还想给这个控件设置个最大最小的值。要么你就直接给个android:maxHeight 之类的，要么你就先添加app:layout_constrainedHeight=”true|false”让控件知道你要使constrain自带的max，min之类的标签奏效，然后再设置app:layout_constrainedWidth_max之类的标签。如果你同时设置了android:maxHeight 和 app:layout_constrainedWidth_max，那么走前者。试了试，的确是是这样的！

MATCH_CONSTRAINT dimensions (Added in 1.1)

当控件的长宽是MATCH_CONSTRAINT的时候，它的最大最小长宽相比于为wrap_content的时候就好理解多了。直接以下标签就能奏效！
layout_constraintWidth_min
layout_constraintHeight_min （ will set the minimum size for this dimension）
layout_constraintWidth_max
layout_constraintHeight_max : （will set the maximum size for this dimension）
layout_constraintWidth_percent
layout_constraintHeight_percent （will set the size of this dimension as a percentage of the parent）
值得注意的是，当控件的长宽是MATCH_CONSTRAINT的时候，你的layout_minHeight 之类的标签是不奏效的！人家只看ConstriantLayout自带的标签，也就上面那几个标签。

设置当前控件宽高占父控件的百分比。

假设我们需要设置一个控件的宽占父布局的30%，通常这种宽高如果用其他的layout的话，我们可能要在代码中计算出父布局宽度然后再根据百分比计算出当前控件的宽度，设置进去。这个过程通常是显得相当麻烦。但是constraintLayout已经为我们提供了标签设置的方法。足以看出其强大之处。
那么怎么做呢？
假设要设置一个控件，其高度是父布局的1/2，那么首先要做的是：
1 将其高度设置为 match_constraint
2 设置自身高度是占父布局高度的百分比。
3 指定自己的百分比。
依次设置
android:layout_height=“0dp”
app:layout_constraintHeight_default=“percent”
app:layout_constraintHeight_percent=“0.5”
这样就可以了。
结果如下：

<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="TextView6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        />

在这里插入图片描述

再如下方，宽和高都设置为百分比：

<TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="TextView1"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintWidth_percent="0.5"
        tools:layout_editor_absoluteX="29dp"
        tools:layout_editor_absoluteY="16dp" />

在这里插入图片描述

Ratio 设置当前控件的宽高比率

我们可以设置当前控件的宽高比例。但是有个前提，就是宽和高的指定至少有一方是0dp。

 <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="TextView6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        />

在这里插入图片描述

链 chains

对于这个东西，我开始是很不理解的。这家伙到底是干啥用的？接下来就看图理解：
开始手动写一个布局，是这样的

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".AppCompatActivitySub">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView2" />
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3" />
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView4" />

</android.support.constraint.ConstraintLayout>

然后看看可视化工具的排列：
在这里插入图片描述
可以看出来这四个textView重叠在了一起。然后在可视化工具把他们拉开，给个位置。

原先的XML代码变成了下图这付样子：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".AppCompatActivitySub">


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

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView2"
        tools:layout_editor_absoluteX="92dp"
        tools:layout_editor_absoluteY="128dp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3"
        tools:layout_editor_absoluteX="181dp"
        tools:layout_editor_absoluteY="128dp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView4"
        tools:layout_editor_absoluteX="66dp"
        tools:layout_editor_absoluteY="84dp" />

</android.support.constraint.ConstraintLayout>

有没有发现每个textview都多了两行关于XY方向距离的代码。但是目前没有任何与锚点相关的代码。下面将会做一件事情。在可视化工具上给这四个指定chians
在这里插入图片描述

在这里插入图片描述

你会发现似乎在Y方向上发生了什么不得了的事情！他们在垂直方向重新刷新了位置，并且两两之间垂直方向上的间距是一样的！
再看看XML代码发生了什么样的变化！

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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=".AppCompatActivitySub">


    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:text="TextView1"
        app:layout_constraintBottom_toTopOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView2"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        tools:layout_editor_absoluteX="92dp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2"
        tools:layout_editor_absoluteX="181dp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView4"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView1"
        tools:layout_editor_absoluteX="66dp" />

</android.support.constraint.ConstraintLayout>

每项textView的tools:layout_editor_absoluteY标签定义消失，随之增加的代码是关于相对位置的。并且随便抽出来两个用链连上的TextView代码一看，比如TextView2 与 TextView3之间。
对于TextView2 有一行关于锚点的描述是：
app:layout_constraintBottom_toTopOf="@+id/textView3" （描述了一个锚点，由TextView2的底边指向TextView3的顶边）
对于TextView3有一行关于锚点的描述是：
app:layout_constraintTop_toBottomOf="@+id/textView2" （描述一个锚点，由TextView3的顶边出发指向TextView2的底边）
方向相反的两个锚点线！！
来来来，再给他们加一个水平方向的链：
在这里插入图片描述
俨然一个梯队！四者横向上的间距也统一了！！！！
对于XML代码的变化，不做过多描述。不用想也应该是两两之间多了一波方向相反的锚点。
好！那么重新想下chians是干嘛的，怎么来定义的？
我认为是横/纵水平统一控件之间间距的。定义就是代码上在两个控件之间加互相指向对方的锚点！
如果你仔细一点观察上方的XML代码，你会发现控件之间没有任何margin之类的标签，间距就这么神奇的被统一了！那我要是强制在中间加一个margin会出现什么神奇的效果？
下面是对TextView2 加了一个margin: android:layout_marginStart=“100dp”
在这里插入图片描述
TextView2 往后挤了。
有点不明白了，看看官方怎么说吧：
If margins are specified on connections, they will be taken in account. In the case of spread chains, margins will be deducted from the allocated space.
个人感觉chain就是用来让子控件们根据屏幕剩余空间平分间距的。（如果对中间的某个控件重新指定margin，那么剩余的控件重新分配余下的空间。如果没有空间了，那么他们就会在某个方向上挤一起，上下前后排列）
对于链条而言，横向链条最左边的那个是这个链条的头，纵向链条，最上边的是这个链条的头。如果我们有特定的style要指定的话，就对链条的头进行指定即可！
涉及到的标签是：
layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle
一个是横向一个是纵向。这几个标签所指定的style有下面几种样子。但是使用上可能有一些需要格外注意的地方
在这里插入图片描述

**CHAIN_SPREAD：**空间间距根据屏幕剩余空间平分，但是如果这种情况下有子控件设置自身宽或高是MATCH_CONSTRAINT的话，他们自己的宽高会撑开这些空间,
在这里插入图片描述

在这里插入图片描述

CHAIN_SPREAD_INSIDE
链的头和尾间距不参与分配多余空间。
在这里插入图片描述
CHAIN_PACKED
挤一块，剩余间距被头和尾平分

有权重的。

首先， ABC的宽度都是 0dp，也就是 MATCH_CONSTRAINT这种模式
然后设置相应的权重比例，用以下标签即可。
layout_constraintHorizontal_weight
layout_constraintVertical_weight
有的控件设置了margin，会发生什么？前提是所有控件都是 0dp的。
margin奏效，然后，其余空间照样被其他的控件平分。