ConstraintLayout-一一网

ConstraintLayout介绍

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

ConstraintLayout现在是AndroidStudio默认的布局，官网的介绍是让布局更加灵活。这样可以减少布局的嵌套，提升UI绘制效率。

ConstraintLayout 能够灵活地定位和调整子 View 的大小，子 View 依靠约束关系来确定位置，且每个子 View 必须至少有一个水平约束条件加一个垂直约束条件，每个约束条件均表示与其它视图、父布局或隐形引导线之间连接或对齐方式。

gradle引入的版本：

dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.0.4"
}

复制代码

相对定位

layout_constraintXXX_toYYYOf 格式的属性,用于设置ViewA的XXX方向与ViewB的YYY方向上的约束，其值可以是某个控件ViewB的ID或者ConstraintLayout本身即parent。

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_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf
layout_constraintBaseline_toBaselineOf //经常设置价格¥99元这种样式

Margins

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

示例代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/purple_200"
        android:text="我是tv1"
        android:gravity="center"
        android:textColor="#ffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@color/teal_200"
        android:text="我是tv2,我居中"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:background="@color/purple_700"
        android:text="我是tv3"
        android:gravity="center"
        android:textColor="#fff"
        android:layout_marginLeft="10dp"
        app:layout_constraintBaseline_toBaselineOf="@+id/tv2"
        app:layout_constraintLeft_toRightOf="@+id/tv2" />

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

相对坐标应用.png

强力约束

layout_constraintHorizontal_bias
layout_constraintVertical_bias

这两个属性来设置控件在水平和垂直方向的偏移量。也就是说当控件设置了某种约束后，如果添加了上述属性，则可以调整该控件在水平或者垂直方向上的比例。
取值：0-1。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <ImageView
        android:id="@+id/avatar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_marginLeft="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.8" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="10dp"
        android:background="@color/design_default_color_error"
        android:text="文本长文本文本长文本文本长文本文本长文本文本长文本文本长文本文本长文本文本长文本文本长文本"
        android:textColor="@android:color/white"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@+id/avatar2"
        app:layout_constraintTop_toTopOf="@+id/avatar2"
        tools:ignore="RtlCompat" />

    <ImageView
        android:id="@+id/avatar1"
        android:layout_marginLeft="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="10dp"
        android:background="@color/design_default_color_error"
        android:text="短文本"
        android:textColor="@android:color/white"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@+id/avatar1"
        app:layout_constraintTop_toTopOf="@+id/avatar1"
        tools:ignore="RtlCompat" />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

注意

TextView约束在ImageView跟ConstraintLayout之间，如果文本过短的话就会居中显示，这是设置layout_constraintHorizontal_bias="0"就可以控制TextView不管文本长短都靠左显示。
app:layout_constrainedWidth="true"属性是确认宽度约束，如果不加当文字过多的时候则会挤出屏幕外

宽高比

以前设置使控件宽高比是比较麻烦的，现在通过layout_constraintDimensionRatio属性将会如此的容易。

要使用layout_constraintDimensionRatio属性，需要其宽度或者高度当中有一个值是可知的，且剩下的一个是 0dp。 所谓的可知，即该值是已经具备了明确的约束条件。控件的宽高尺寸比例则通过 “float值” 或者 “宽度 : 高度” 的形式来设置，通过在比例值的前面添加 w 或者 h 来指明比例值是根据宽度还是高度来进行计算。

此比例分为三种情况：

情况一：

 w:0dp
 h:wrap_content/具体数值
 此时默认是以h作为标准来约束w,
 "w,2:1"="2:1"都是宽:高=2:1,若此时你写"h,2:1"则代表高:宽=2: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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="w,2:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/img4"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="50dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="h,2:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img3" />
    
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

情况二：

w:wrap_content/具体数值
h:0dp
此时默认是以w作为标准来约束h,
"h,2:1"="2:1"都是宽:高=2:1,若此时你写"w,2:1"则代表高:宽=2: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">

   <ImageView
       android:id="@+id/img1"
       android:layout_width="100dp"
       android:layout_height="0dp"
       android:scaleType="fitXY"
       android:src="@mipmap/ic_launcher"
       app:layout_constraintDimensionRatio="w,2:1"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <ImageView
       android:id="@+id/img2"
       android:layout_width="100dp"
       android:layout_height="0dp"
       android:layout_marginTop="50dp"
       android:scaleType="fitXY"
       android:src="@mipmap/ic_launcher"
       app:layout_constraintDimensionRatio="h,2:1"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/img1" />


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

情况三：

w:0dp
h:0dp
此时默认是以w作为标准来约束h,
"h,2:1"表示高度是计算出来的，宽度是充满约束的
"w,2:1"此时加上W，表示宽度是计算出来的，高度是充满约束的
复制代码

<?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">
    

    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="w,2:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="fitXY"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintDimensionRatio="h,2:1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


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

控件之间的宽高占比

ConstraintLayout 也可以像 LinearLayout 一样为子控件设置 layout_weight 属性，从而控件子控件之间的宽高占比，对应的属性是：layout_constraintHorizontal_weight 和 layout_constraintVertical_weight

<?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">

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/design_default_color_primary_dark"
        app:layout_constraintEnd_toStartOf="@+id/view2"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@color/design_default_color_secondary_variant"
        app:layout_constraintEnd_toStartOf="@+id/view3"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/design_default_color_error"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintStart_toEndOf="@+id/view2"
        app:layout_constraintBottom_toTopOf="@+id/view4"
        app:layout_constraintTop_toTopOf="parent" />
    <View
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/teal_200"
        app:layout_constraintEnd_toEndOf="@+id/view3"
        app:layout_constraintStart_toStartOf="@+id/view3"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintBottom_toTopOf="@+id/view5"
        app:layout_constraintTop_toBottomOf="@+id/view3" />
    <View
        android:id="@+id/view5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/purple_200"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintEnd_toEndOf="@+id/view3"
        app:layout_constraintStart_toStartOf="@+id/view3"
        app:layout_constraintTop_toBottomOf="@+id/view4"
        app:layout_constraintBottom_toBottomOf="parent" />

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

Dimensions

当控件的宽或者高设置为 0dp 时，可以用以下两个属性来指定控件的宽度或高度占父控件空间的百分比，属性值在 0 到 1 之间

1. layout_constraintWidth_percent
1. layout_constraintHeight_percent

<?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_target"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Target Button"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Source Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.3" />


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

Visibility

在使用其它布局时，如果将 View 的 visibility 属性设置为 gone，那么其它原本依赖该 View 来参照定位的属性都会失效，而在 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">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#f5ec7e"
        android:gravity="center"
        android:text="Hello World!"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#fa6e61"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="@+id/tv1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv1"
        app:layout_constraintTop_toTopOf="parent" />

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

而如果将黄色方块的 visibility 属性设置为 gone，那么红色方块的位置会发生变化。可以理解为黄色方块缩小为一个不可见的小点，位于其原先位置的中间，而红色方块则改为依照该点来进行定位

<?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">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#f5ec7e"
        android:gravity="center"
        android:text="Hello World!"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#fa6e61"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="@+id/tv1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/tv1"
        app:layout_constraintTop_toTopOf="parent" />

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

此外，红色方块也可以依靠以下几个属性来控制当黄色方块为 Gone 时红色方块的 margin 值，这类属性只有在黄色方块的 visibility 属性设置为 gone 时才会生效

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

圆形定位

圆形定位用于将两个 View 以角度和距离这两个维度来进行定位，以两个 View 的中心点作为定位点

app:layout_constraintCircle – 目标 View 的 ID
app:layout_constraintCircleAngle – 对齐的角度
app:layout_constraintCircleRadius – 与目标 View 之间的距离（顺时针方向，0~360度）

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:ignore="MissingConstraints"
    android:id="@+id/root">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/sun"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/sun"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/earth"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/earth"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="150dp"
        app:layout_constraintCircle="@id/sun"
            />


    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/moon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/moon"
        app:layout_constraintCircleRadius="40dp"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircle="@id/earth" />
    
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

Guideline

当需要一个任意位置的锚点时，可以使用指示线（Guideline）来帮助定位，Guideline 是 View 的子类，使用方式和普通的 View 相同，但 Guideline 有着如下的特殊属性：

宽度和高度均为 0
可见性为 View.GONE

即指示线只是为了帮助其他 View 进行定位，实际上并不会出现在页面上

例如，如下代码加入了两条 Guideline，可以选择使用百分比或实际距离来设置 Guideline 的位置，并通过 orientation 属性来设置 Guideline 的方向

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="120dp"
        app:layout_constraintGuide_end="60dp"  />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        app:layout_constraintGuide_percent="0.5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" />
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginTop="72dp"
        android:gravity="center_vertical"
        android:text="用户名"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv_password"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:gravity="center_vertical"
        android:text="密码"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/tv_username" />

    <EditText
        android:id="@+id/et_username"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/tv_username"
        app:layout_constraintStart_toStartOf="@+id/guideline" />

    <EditText
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/tv_password"
        app:layout_constraintStart_toEndOf="@+id/tv_password" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#f5ec7e"
        android:gravity="center"
        android:text="Hello World!"
        app:layout_constraintLeft_toRightOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/guideline2" />

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

Barrier

很多时候我们都会遇到控件的宽高值随着其包含的数据的多少而改变的情况，而此时如果有多个控件之间是相互约束的话，就比较难来设定各个控件间的约束关系了，而 Barrier（屏障）就是用于解决这种情况。Barrier 和 GuideLine 一样是一个虚拟的 View，对界面是不可见的，只是用于辅助布局

Barrier 可以使用的属性有：

1. barrierDirection：用于设置 Barrier 的位置，属性值有：bottom、top、start、end、left、right
1. constraint_referenced_ids：用于设置 Barrier 所引用的控件的 ID，可同时设置多个
1. barrierAllowsGoneWidgets：默认为 true，当 Barrier 所引用的控件为 Gone 时，则 Barrier 的创建行为是在已 Gone 的控件已解析的位置上进行创建。如果设置为 false，则不会将 Gone 的控件考虑在内

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="view1,view2" />


    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="长文字长文字长文字"
        android:textSize="32sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="52dp"
        android:text="长文"
        android:textSize="32sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toEndOf="@id/barrier"
        app:layout_constraintTop_toTopOf="@+id/view1" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="@+id/view2" />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

Group

再开发中我们经常遇到这种需求：某种情况下我们需要设置n个空间在某种条件下的显示跟隐藏，Group此时可以满足这个需求。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/button"
        android:text="group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/view1" />

    <ImageView
        android:id="@+id/view7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="80dp"
        android:layout_marginTop="72dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/view1"
        tools:ignore="RtlCompat" />

    <ImageView
        android:id="@+id/view8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="72dp"
        android:src="@mipmap/ic_launcher"
        tools:ignore="RtlCompat"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/view1" />

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

/**
 * @Description: Group 用于控制多个控件的可见性，先依靠 constraint_referenced_ids来绑定其它 View，之后就可以通过单独控制
 * Group 的可见性从而来间接改变绑定的 View 的可见性
 * @Author:         zhangchun
 * @CreateDate:     2021/8/23
 * @Version:        1.0
 */
class Group : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_group)
        findViewById<Button>(R.id.button).setOnClickListener {
            findViewById<Group>(R.id.group).visibility = View.GONE
        }
    }
}
复制代码

Placeholder

Placeholder （占位符）用于和一个视图关联起来，通过 setContentId() 方法将占位符转换为指定的视图，即视图将在占位符所在位置上显示，如果此时布局中已包含该视图，则视图将从原有位置消失

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeholder"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/favorite"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="onClick"
        android:src="@drawable/ic_favorite_black_24dp"
        android:tint="#E64A19"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/mail"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/mail"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="onClick"
        android:src="@drawable/ic_mail_black_24dp"
        android:tint="#512DA8"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/save"
        app:layout_constraintStart_toEndOf="@id/favorite"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/save"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="onClick"
        android:src="@drawable/ic_save_black_24dp"
        android:tint="#D32F2F"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/play"
        app:layout_constraintStart_toEndOf="@id/mail"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/play"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:onClick="onClick"
        android:src="@drawable/ic_play_circle_filled_black_24dp"
        android:tint="#FFA000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/save"
        app:layout_constraintTop_toTopOf="parent" />

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

class PlaceHolder : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_place_holder)
    }

    fun onClick(view: View) {
        findViewById<Placeholder>(R.id.placeholder).setContentId(view.id)
    }
}
复制代码

Chains

多个控件通过明确的相互约束来互相约束对方的位置，从而形成一个链条。

链条分为水平链条和竖直链条两种，分别用 layout_constraintHorizontal_chainStyle 和 layout_constraintVertical_chainStyle 两个属性来设置，属性值有以下三种：

spread（默认值）
spread_inside
packed

<?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">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/textview"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed"></ImageView>

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:background="@color/design_default_color_secondary_variant"
        android:text="长文本长文本长文本长文本长文本文本长文本长文本"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/avatar"
        app:layout_constraintStart_toStartOf="@+id/avatar"
        app:layout_constraintTop_toBottomOf="@+id/avatar" />

    <ImageView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view3"
        app:layout_constraintStart_toEndOf="@+id/view1" />

    <ImageView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view2" />
    
    <ImageView
        android:id="@+id/view4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toTopOf="@+id/view1"
        android:layout_marginBottom="20dp"
        app:layout_constraintEnd_toStartOf="@+id/view5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/view5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitXY"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toTopOf="@+id/view1"
        app:layout_constraintEnd_toStartOf="@+id/view6"
        app:layout_constraintStart_toEndOf="@+id/view4" />

    <ImageView
        android:id="@+id/view6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:scaleType="fitXY"
        android:layout_marginBottom="20dp"
        app:layout_constraintBottom_toTopOf="@+id/view1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view5" />

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

Flow

Flow 是一种新的虚拟布局，它专门用来构建链式排版效果，当出现空间不足的情况时，它能够自动换行，甚至是自动延展到屏幕的另一区域。当您需要对多个元素进行链式布局，但不确定在运行时布局空间的实际大小是多少，那么 Flow 对您来说就非常有用。您可以使用 Flow 来实现让布局随着应用屏幕尺寸的变化 (比如设备发生旋转后出现的屏幕宽度变化) 而动态地进行自适应。

2d4b3159aeec49e6a40d07f123efd095_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.gif

Flow 中最重要的一个配置选项是 wrapMode，它可以决定在内容溢出 (或出现换行) 时的布局行为，一共有三种模式：

none – 所有引用的视图以一条链的方式进行布局，如果内容溢出则溢出内容不可见
chain – 当出现溢出时，溢出的内容会自动换行，以新的一条链的方式进行布局
aligned – 同 chain 类似，但是不以行而是以列的方式进行布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/design_default_color_primary_variant"
        android:orientation="horizontal"
        app:flow_wrapMode="chain"
        app:flow_verticalGap="16dp"
        app:flow_horizontalGap="16dp"
        app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:ignore="RtlCompat" />


    <View
        android:id="@+id/view1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary_variant" />

    <View
        android:id="@+id/view2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary_variant" />

    <View
        android:id="@+id/view3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_margin="8dp"
        android:background="@color/design_default_color_secondary_variant" />

    <View
        android:id="@+id/view4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary_variant" />

    <View
        android:id="@+id/view5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary_variant" />

    <View
        android:id="@+id/view6"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/design_default_color_secondary_variant" />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

none

该模式下可以同时使用的配置项有：

flow_horizontalStyle = “spread|spread_inside|packed” //Chains 链的展示形式
flow_verticalStyle = “spread|spread_inside|packed”
flow_horizontalBias = “float” //只在 style 为 packed 时才生效，用于控制控件在水平方向上的偏移量
flow_verticalBias = “float“
flow_horizontalGap = “dimension” //设置每个控件的左右间距
flow_verticalGap = “dimension“
flow_horizontalAlign = “start|end”
flow_verticalAlign = “top|bottom|center|baseline

chain

此模式下可以同时使用的配置项有：

flow_firstHorizontalStyle = “spread|spread_inside|packed” //第一行 Chains 链的展示形式
flow_firstVerticalStyle = “spread|spread_inside|packed”
flow_firstHorizontalBias = “float” //只在 style 为 packed 时才生效，用于控制第一行在水平方向上的偏移量
flow_firstVerticalBias = “float“
flow_lastHorizontalStyle = “spread|spread_inside|packed” //最后一行 Chains 链的展示形式
flow_lastHorizontalBias = “float“

aligned

Layer

如果想对多个视图整体进行旋转 (rotate)、平移 (translate) 或缩放 (scale) 操作，那么 Layer 将会是最佳的选择

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <Button
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/button"
        android:text="layer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>



    <androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="view,view1,view7,view8"
        tools:ignore="MissingConstraints" />


    <ImageView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/view1" />

    <ImageView
        android:id="@+id/view7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:layout_marginTop="72dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/view1" />

    <ImageView
        android:id="@+id/view8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="72dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="@+id/view1" />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

class LayerActivity : AppCompatActivity() {
    override fun setContentView(view: View?) {
        setContentView(R.layout.activity_layer)
        findViewById<Button>(R.id.button).setOnClickListener {
            findViewById<Layer>(R.id.layer).rotation = 45f
            findViewById<Layer>(R.id.layer).translationY = 100f
            findViewById<Layer>(R.id.layer).translationX = 100f
        }
    }
}
复制代码

ConstraintSet

Layer 是对 ConstraintLayout 内的一部分控件做动画变换，ConstraintSet 则是用于对 ConstraintLayout 整体进行一次动画变换

ConstraintSet 可以理解为 ConstraintLayout 对其所有子控件的约束规则的集合。在不同的交互规则下，我们可能需要改变 ConstraintLayout 内的所有子控件的约束条件，即子控件的位置需要做一个大调整，ConstraintSet 就用于实现平滑地改变子控件的位置

activity_constraint_start

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:onClick="onClick">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/twitter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:src="@drawable/twitter"
        android:tint="#00ACED"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/wechat"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/wechat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/wechat"
        android:tint="#51C332"
        app:layout_constraintEnd_toStartOf="@+id/weibo"
        app:layout_constraintStart_toEndOf="@+id/twitter"
        app:layout_constraintTop_toTopOf="@+id/twitter" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/weibo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/weibo"
        android:tint="#D32024"
        app:layout_constraintEnd_toStartOf="@+id/qzone"
        app:layout_constraintStart_toEndOf="@+id/wechat"
        app:layout_constraintTop_toTopOf="@+id/wechat" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/qzone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/qzone"
        android:tint="#FFCE00"

        app:layout_constraintEnd_toStartOf="@+id/wechat_friend"
        app:layout_constraintStart_toEndOf="@+id/weibo"
        app:layout_constraintTop_toTopOf="@+id/weibo" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/wechat_friend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/wechat_friend"
        android:tint="#51C332"
        app:layout_constraintEnd_toStartOf="@+id/qq"
        app:layout_constraintStart_toEndOf="@+id/qzone"
        app:layout_constraintTop_toTopOf="@+id/qzone" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/qq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/qq"
        android:tint="#00ACED"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/wechat_friend"
        app:layout_constraintTop_toTopOf="@+id/wechat_friend" />

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

activity_constraint_end

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/twitter"
        android:onClick="onClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:src="@drawable/twitter"
        android:tint="#00ACED"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/wechat"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/wechat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/wechat"
        android:tint="#51C332"
        app:layout_constraintEnd_toStartOf="@+id/weibo"
        app:layout_constraintStart_toEndOf="@+id/twitter"
        app:layout_constraintTop_toTopOf="@+id/twitter" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/weibo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/weibo"
        android:tint="#D32024"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/wechat"
        app:layout_constraintTop_toTopOf="@+id/wechat" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/qzone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:src="@drawable/qzone"
        android:tint="#FFCE00"
        app:layout_constraintEnd_toStartOf="@+id/wechat_friend"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/twitter" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/wechat_friend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/wechat_friend"
        android:tint="#51C332"
        app:layout_constraintEnd_toStartOf="@+id/qq"
        app:layout_constraintStart_toEndOf="@+id/qzone"
        app:layout_constraintTop_toTopOf="@+id/qzone" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/qq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/qq"
        android:tint="#00ACED"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/wechat_friend"
        app:layout_constraintTop_toTopOf="@+id/wechat_friend" />

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

class ConstraintSetX : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_constraint_start)
    }


    @RequiresApi(Build.VERSION_CODES.KITKAT)
    fun onClick(view: View) {
        val constraintLayout = view as ConstraintLayout

        val constraintSet = ConstraintSet().apply {
            isForceId = false
            clone(this@ConstraintSetX,
                R.layout.activity_constraint_end
            )
        }
        TransitionManager.beginDelayedTransition(constraintLayout)
        constraintSet.applyTo(constraintLayout)
    }
复制代码

ImageFilterView

ImageFilterView 是放在 ConstraintLayout 的 utils.widget包下的一个 View，从包名可以猜测 ImageFilterView 只是 Google 官方提供的一个额外的工具属性的类，和 ConstraintLayout 本身并没有啥关联.

ImageFilterView 直接继承于 AppCompatImageView，在其基础上扩展了很多用于实现图形变换的功能

属性	含义
altSrc	用于指定要从 src 变换成的目标图片，可以依靠 crossfade 来实现淡入淡出
crossfade	设置 src 和 altSrc 两张图片之间的混合程度。0=src 1=altSrc图像
saturation	饱和度。0=灰度，1=原始，2=过饱和
brightness	亮度。0=黑色，1=原始，2=两倍亮度
warmth	色温。1=自然，2=暖色，0.5=冷色
contrast	对比度。1=不变，0=灰色，2=高对比度
round	用于实现圆角，以 dimension 为值
roundPercent	用于实现圆角，取值在 0f-1f 之间，为 1f 时将形成一张圆形图片

<?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">

    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:flow_wrapMode="aligned"
        app:flow_verticalGap="16dp"
        app:flow_horizontalGap="16dp"
        app:constraint_referenced_ids="imageView1,imageView2,imageView3,imageView4,imageView5,imageView6,imageView7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        tools:ignore="RtlCompat" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintEnd_toStartOf="@id/imageView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintEnd_toStartOf="@id/imageView3"
        app:layout_constraintStart_toEndOf="@+id/imageView1"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />


    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintEnd_toStartOf="@id/imageView4"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintEnd_toStartOf="@id/imageView5"
        app:layout_constraintStart_toEndOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintEnd_toStartOf="@id/imageView6"
        app:layout_constraintStart_toEndOf="@+id/imageView4"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView6"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintEnd_toStartOf="@id/imageView7"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageView7"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintStart_toEndOf="@+id/imageView6"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/avator" />


    <androidx.appcompat.widget.AppCompatSeekBar
        android:id="@+id/seekBar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:max="100"
        android:progress="0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

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

class ImageFilerActivity : AppCompatActivity() {
    var imageView1 : ImageFilterView? =null
    var imageView2 : ImageFilterView? =null
    var imageView3 : ImageFilterView? =null
    var imageView4 : ImageFilterView? =null
    var imageView5 : ImageFilterView? =null
    var imageView6 : ImageFilterView? =null
    var imageView7 : ImageFilterView? =null
    var seekBar : AppCompatSeekBar? =null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_imagefilter)
        imageView1=findViewById(R.id.imageView1)
        imageView2=findViewById(R.id.imageView2)
        imageView3=findViewById(R.id.imageView3)
        imageView4=findViewById(R.id.imageView4)
        imageView5=findViewById(R.id.imageView5)
        imageView6=findViewById(R.id.imageView6)
        imageView7=findViewById(R.id.imageView7)
        seekBar=findViewById(R.id.seekBar)
        seekBar?.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
            override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
                if (fromUser) {
                    val realProgress = (progress / 100.0).toFloat()

                    imageView1?.saturation = realProgress * 20
                    imageView2?.brightness = 1 - realProgress

                    imageView3?.warmth = realProgress * 20
                    imageView4?.contrast = realProgress * 2

                    imageView5?.round = realProgress * 40
                    imageView6?.roundPercent = realProgress

                    imageView7?.crossfade = realProgress
                }
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {

            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {

            }
        })
    }


}

复制代码