其实这东西刚出来的时候玩了会感觉太累，就放弃了。
不过看这个google不会放弃这东西，咱还是在平时的demo练习中用这个来写吧，写多了估计就习惯了。
下边就记录下平时使用的问题
看这里https://blog.csdn.net/fallfollowernolisten/article/details/61195236
首先基本的属性

app:layout_constraintLeft_toLeftOf
app:layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf

简单说下
app:layout_constraintLeft_toLeftOf
约束控件的左边界，和某个控件的左边界对齐
app:layout_constraintLeft_toRightOf
约束控件的左边界，和某个控件的右边界对齐

很多时候后边跟着的就是个parent，那么这个parent是谁，就是ConstraintLayout这个整体布局
举例

image.png

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:padding="9dp">
      <ImageView
        android:id="@+id/iv_cover"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"
        android:layout_marginRight="10dp"
        app:layout_constraintDimensionRatio="5:10"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="#000"
        app:layout_constraintLeft_toRightOf="@+id/iv_cover"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="title........" />

看下imageview里的
app:layout_constraintLeft_toLeftOf="parent" 就是和ConstraintLayout的左边界对齐
然后看下textview里的
app:layout_constraintLeft_toRightOf="@+id/guideline" 就是说textview的左边界在imageview的右边

layout_constraintBaseline_toBaselineOf 这个就是文字的基线了。这个不研究。

我们用这个布局的时候需要了解，这玩意就是靠一圈4个橡皮筋拉着的。
所以宽高的wrap_content，0dp是和其他有点区别的
0dp才相当与match_parent，而这个布局里的match_parent是不支持的
如果你用了match_parent，那么这个控件的约束就没了意义了，比如你在a的左边，在b的右边，最后你会发现他的宽度和ConstraintLayout一样，也就是左右两边的橡皮筋失去了意义。

android:layout_width="0dp"
android:layout_height="wrap_content"
如果我们只设置了 layout_constraintLeft ，layout_constraintTop ,就相当与左边和上边有橡皮筋，那么这时候控件就在左上角这个位置。比如宽度是个wrap或者固定的大小。。这时候如果你设置一个layout_constraintRight，那么相当与右边也有一个橡皮筋了。结果就是这个控件跑到中间去了。这个时候如果把宽度设置为0dp，那么控件宽度就铺满全屏了

这些基础属性其实也就和相对布局差不多，那么它的优势咋体现的？所以肯定不止这些了。

常用的两种基准点

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

一般就弄2个属性，方向和百分比，
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
方向用来确定百分比是相对水平方向的还是垂直方向的。
当然了，
你也可以使用app:layout_constraintGuide_begin="100dp" 或者app:layout_constraintGuide_end="200dp"来添加约束
2- Barrier
这种处理比如textview1和textview2的右边有个textview3， 3需要在1和2个右边，而1和2的宽度谁大不确定。

image.png

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="tv_time,iv_like,tv_author"
        />

app:barrierDirection表示约束的方向，在app:constraint_referenced_ids所指定的这些控件的哪边

margin属性

这个里边的 margin属性不能为负的。负的结果就相当于0dp

goneMargin属性

其实就是这个控件相对的约束的那个控件不可见的时候，下边的属性才会起作用。
比如控件B在控件A的右边，当A不可见的 时候，goneMarginLeft 就会起作用了。换句话说，他参考的那个边界的控件为gone的时候，对应的goneMargin会起作用
– layout_goneMarginBottom

– layout_goneMarginEnd

– layout_goneMarginLeft

– layout_goneMarginRight

– layout_goneMarginStart

– layout_goneMarginTop

bias偏差来约束

 <TextView
        android:id="@+id/tv7"
        android:text="text7"
        android:visibility="visible"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintVertical_bias="0.7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

效果图如下，需要注意的是
app:layout_constraintHorizontal_bias="0.7"
app:layout_constraintVertical_bias="0.7"
这个生效的前提是两边都有了约束，而且是wrap_content，如果没有上边的2个属性，那么默认的是居中显示的。上边的2个属性就是用来改变弹簧拉伸的距离的。

image.png

layout_constraintDimensionRatio

控件的宽高比列的约束，这个以前碰到比如我们的封面图宽高比是固定的，可手机的宽是不一样的，所以都还得回来算下高度。。现在就简单了
分析1，如下这种，是没有效果的，宽高里边必须有一个是0dp，才可以参照其中一个不为0的来计算。
当然也可以2个都是0dp的，这种情况就相当与宽高都是match_parent的，会根据宽高比例来计算

app:layout_constraintDimensionRatio="1:1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

比如这样写layout_constraintDimensionRatio 也可以是个小数

app:layout_constraintDimensionRatio="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content" 

小数 2或者1:1这种默认的都宽/高的比例
还有另外的写法 “w,4:1” 或者“h,4” ,其实上边的 两种写法就相当于省略是w逗号，因为默认就是宽高比，
加上h逗号以后就成了高和宽的比了。

链条布局（Chains）

如图，简单的创建方法，添加自己打算链条布局的控件，完事鼠标滑动全选，右键，如下图，选择chain，垂直的或者水平的，就可以自动生成相关的代码了

image.png

下边分析下他的属性。需要注意下，链条的特性都是在第一个view上设置的

image.png

上图可以看到chainStyle 有3种，默认的就是
1.spread,铺开的，如下图，两边中间一样的间隔

image.png

2.spread_inside 两边没有间隔，就中间的有，如下图

image.png

3.packed，就是大家相当于一个整体，居中显示了。

image.png

最后，这些效果其实只是在wrap_content,或者固定的宽度才有效果，如果有一个为0dp，那么它就会铺满剩余的空间的， 如果有2个 都是0dp咋办，那么就这2个平分剩下的空间。 上边的chain_style其实也就失去了意义了。

当然了这里也可以设置layout_constraintHorizontal_weight ，比重，和线性布局一样的道理。

circle相关属性

app:layout_constraintCircle="@id/btn_pattern"
        app:layout_constraintCircleRadius="20dp"
        app:layout_constraintCircleAngle="0"

效果图如下，可以看到角度是0的话默认是在正上方的，改为90就跑到右边去了，所以应该是顺时针了。
而且能看出两只是以控件的中心点来比较的。

image.png

UI 编辑器所使用的属性

下面几个属性是 UI 编辑器所使用的，用了辅助拖拽布局的，在实际使用过程中，可以不用关心这些属性。

layout_optimizationLevel
layout_editor_absoluteX
layout_editor_absoluteY
layout_constraintBaseline_creator
layout_constraintTop_creator
layout_constraintRight_creator
layout_constraintLeft_creator
layout_constraintBottom_creator

最后

弄这个得特别小心啊，一个不注意就会发现效果不是自己要的。
尤其是你以前是相对布局，你改成这个约束布局，举个简单的例子
一个textview，下边有个FramLayout，原来就设置个below textview，然后宽高都是match的。
现在你如果只设置了app:layout_constraintTop_toBottomOf="@+id/tv" 不设置app:layout_constraintBottom_toBottomOf="parent"的话是不行的，而且高度也得改成0dp .