Android ConstraintLayout 使用详解

水深无声 2024-03-22 15:04 96阅读 0赞

### 前言 ###

对于初学者来说，可能觉得ConstraintLayout属性多，且属性长而弃用它，那你错失了这个大宝贝。

因为在复杂布局，我们会一直用RelativeLayout和LinearLayout去嵌套，因为嵌套的ViewGroup会导致手机多次测量和绘制，从而影响性能，如果嵌套严重可能出现掉帧或卡顿。

使用ConstraintLayout一招入魂。一句话概括是：传统布局能实现的，它能轻松实现实现。传统布局不能实现的，它也能实现。

### 一、为什么要用呢? ###

这里举个2个简单的例子。

#### 1.1、例1 ####

如图下图所示，我们分别用RelativeLayout和ConstraintLayout去实现它：

![1.png][]

##### 1.1.1、使用RelativeLayout实现如下 #####

<RelativeLayout...>
    
    
        <TextView
            android:id="@+id/txt_a"
            android:layout_centerHorizontal="true"
            .../>
    
        <RelativeLayout
            android:layout_alignTop="@+id/txt_a"
            android:layout_toLeftOf="@+id/txt_a"
            android:layout_alignBottom="@+id/txt_a"
            ...>
    
            <TextView
                android:layout_centerInParent="true"
                android:id="@+id/txt_b"
                .../>
    
        </RelativeLayout>
    
    
    </RelativeLayout>

这里使用了伪代码，把无关紧要的属性去掉了。相信懂的人都明白。这里用图层表示下，如下：

![2.png][]

*  最外层是 RelativeLayout（根布局）
 *  红色TextView\_A 在顶部且横向居中。
 *  使用绿色 RelativeLayout上边和下边和A齐平，从而保证绿色RelativeLayout高度和A一样。且宽度满屏，在A左边
 *  蓝色TextView\_B 在绿色RelativeLayout里居中。

那么接下来看看ConstraintLayout如何实现？

##### 1.1.2、使用ConstraintLayout实现如下 #####

<androidx.constraintlayout.widget.ConstraintLayout...>
    
        <TextView
            android:id="@+id/txt_a"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            .../>
    
        <TextView
            app:layout_constraintRight_toLeftOf="@+id/txt_a"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="@+id/txt_a"
            app:layout_constraintBottom_toBottomOf="@+id/txt_a"
            android:id="@+id/txt_b"
            .../>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    复制代码

我们继续看下，他的图层关系，真的简洁。

![3.png][]

#### 1.2、例2 ####

如图下图所示，我们分别用RelativeLayout和ConstraintLayout去实现它：

![4.png][]

在xml里。我们无法用RelativeLayout去实现，如下分析

*  B在A下方，通过 android:layout\_below="@+id/txt\_a"实现
 *  B要在A底部边框上，垂直居中。那么我们要知道B的height。B再使用marginTop="-height/2"才能达到效果。所以在xml里无法实现，只能去代码里动态计算。

使用ConstraintLayout则可轻松完成：

<androidx.constraintlayout.widget.ConstraintLayout ...>
    
    
        <TextView
            android:id="@+id/txt_a"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            .../>
    
        <TextView
            app:layout_constraintRight_toRightOf="@+id/txt_a"
            app:layout_constraintLeft_toLeftOf="@+id/txt_a"
            app:layout_constraintTop_toBottomOf="@+id/txt_a"
            app:layout_constraintBottom_toBottomOf="@+id/txt_a"
            android:id="@+id/txt_b"
            .../>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    复制代码

上面只是简单的2个小例子，实战上在复杂布局里，真的有太多好处。接下我们具体说说把。

### 二、ConstraintLayout各属性介绍 ###

#### 2.1、相对定位 ####

##### 2.1.1、例1，如图：靠右边 #####

![5.png][]

实现如图功能：

<TextView
        ...
        app:layout_constraintRight_toRightOf="parent"
        />
    复制代码

layout\_constraintRight\_toRightOf 属性还有left、right、top、bottom、start、end等搭配使用。什么意思呢？

*  第一个Right代表 本控件的右边
 *  第二个Right代表 要位于目标控件右边。
 *  所以app:layout\_constraintRight\_toRightOf=“parent”； 红色A的右边位于父容器的右边

> 注意start、end是因为很多国家阅读习惯不一样，比如我们是习惯从左往右阅读。所以start对于我们来说就是left，end就是right。

--------------------

##### 2.1.2、例2，如图：居中 #####

![6.png][]

实现如图功能：

<TextView
        ...
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        />
    复制代码

右边和父控件右边对齐，左边和父控件左边对齐。这样就可以达到横向居中，同理竖直。

注意这里居中了。同样还可以用margin进行偏移。也可以利用属性app:layout\_constraintHorizontal\_bias=“0.5”，进行横向偏移，0.5意思也还算居中。同理竖直的属性。

--------------------

##### 2.1.3、例3，如图：充满屏幕 #####

![7.png][]

比如B要在A的右边，且相对A上下居中，而且B要充满剩余横屏：

<TextView
        app:layout_constraintLeft_toRightOf="@+id/txt_a"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/txt_a"
        app:layout_constraintBottom_toBottomOf="@id/txt_a"
        android:layout_width="0dp"
        ...
        />
    复制代码

要想充满全屏把宽度设置为0dp。然后通过以下代码:

*  app:layout\_constraintLeft\_toRightOf=“@+id/txt\_a”；B的左边和A的右边对齐
 *  app:layout\_constraintRight\_toRightOf=“parent”；B的右边和父容器的右边对齐

> 这样B就在A的右边，且横向充满屏。注意：在约束布局里match\_parent是不生效的。

要想B竖直方向与A平行的话，通过如下代码：

*  app:layout\_constraintTop\_toTopOf=“@+id/txt\_a”；B的上边和A的上边对齐
 *  app:layout\_constraintBottom\_toBottomOf=“@id/txt\_a”；B的下边和A的下边对齐

这样就可以让B在A右边，上下居中。

--------------------

##### 2.1.4、例4，如图：不嵌套居中 #####

![8.png][]

在列表里我们经常会遇到这样的需求，A是一张图片，title是标题，des是描述。用RelativeLayout的做法是:继续用一个layout布局包裹title和des，居中然后放在A的右边。

用ConstraintLayout的话不用嵌套，3个view就搞定了。如下：

<ImageView
        ...
        />
    
    
    <TextView
        app:layout_constraintTop_toTopOf="@+id/image"
        app:layout_constraintBottom_toTopOf="@+id/txt_des"
        android:id="@+id/txt_title"
        ...
        />
    
    <TextView
        app:layout_constraintTop_toBottomOf="@+id/txt_title"
        app:layout_constraintBottom_toBottomOf="@+id/image"
        
       * 这个时候你会发现还没有居中因为还缺了一条约束，title在des上边；
        android:id="@+id/txt_des"
        ...
        />
    复制代码

因为例3，已经讲过如何全屏了，这里主要讲title和des如何居中：

*  des 在title下面；app:layout\_constraintTop\_toBottomOf=“@+id/txt\_title”
 *  title上边和图片A上边对齐；app:layout\_constraintTop\_toTopOf=“@+id/image”
 *  des下边和图片A下边对齐；app:layout\_constraintBottom\_toBottomOf=“@+id/image”
 *  这个时候你会发现还没有居中因为还缺了一条约束，title在des上边； app:layout\_constraintBottom\_toTopOf=“@+id/txt\_des”，这和RelativeLayout有些区别

--------------------

这里还有一个属性文本基线对齐，和RelativeLayout里的 layout\_alignBaseline 是一样的效果

*  app:layout\_constraintBaseline\_toBaselineOf=“@+id/txt\_a”

关于相对定位已经讲完了。

#### 2.2、角度定位 ####

如图：

![9.png][]

实现代码如下：

<TextView
        android:id="@+id/txt_a"
        ...
         />
    
    <TextView
        app:layout_constraintCircle="@+id/txt_a"；
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="100dp"
        android:id="@+id/txt_b"
        ...
        />
    复制代码

*  app:layout\_constraintCircle=“@+id/txt\_a”；B相对于A角度定位
 *  app:layout\_constraintCircleAngle=“90”；角度定位角度为90°
 *  app:layout\_constraintCircleRadius=“100dp”；B中心与A中心相差100dp

这个时候我也在想有什么用呢？我觉得可以用在某些自定义view上。比如圆形menu、实现时钟更简单了。我用属性动画，实现一个效果你就明白了。录制有点卡顿，真机不会…

![GIF.gif][]

#### 2.3、边距 ####

##### 2.3.1、margin #####

**margin** 值要生效，一定是伴随约束属性的。什么意思呢，要实现如图功能：

![10.png][]

代码实现如下：

<TextView
        android:id="@+id/txt_a"
        ...
         />
    
    <TextView
        android:layout_marginLeft="20dp"
        app:layout_constraintLeft_toRightOf="@+id/txt_a"
        android:id="@+id/txt_b"
        ...
         />
    复制代码

*  比如B左边和A的右边对齐app:layout\_constraintLeft\_toRightOf=“@+id/txt\_a”，此时在B上加上margin值生效
 *  如果这个时候在A上加上android:layout\_marginRight=“50dp”，是不生效的。谨记

--------------------

##### 2.3.2、goneMargin #####

**goneMargin**属性比较有意思。比如要实现如下功能，从图1–>图2：

图1如下：

![11.png][]

图2如下：

![12.png][]

隐藏A的时候B要置顶排布。在RelativeLayout里，我们只需要在A里使用Margin\_Bottom=“20dp”,然后对A进行隐藏就可以实现了。但是在ConstraintLayout里，因为margin生效必须要有约束，所以这个时候B就要使用goneMargin属性，实现代码如下：

<TextView
        android:id="@+id/txt_a"
        android:visibility="gone"
        ...
         />
    
    //意思就是当有约束的控件隐藏时，goneMargin就会生效，那么B就会置顶排布。
    <TextView
        android:id="@+id/txt_b"
        app:layout_constraintTop_toBottomOf="@+id/txt_a"
        android:layout_marginTop="20dp"
        app:layout_goneMarginTop="0dp"
        ...
         />
    复制代码

#### 2.4、尺寸 ####

在ConstraintLayout里，设置尺寸大小的有3个：

*  设置固定的dp值
 *  wrap\_content
 *  0dp（MATCH\_CONSTRAINT），前面讲过match\_parent是不生效的。如果想达到match\_parent的效果只能通过0dp和约束来达到。

##### 2.4.1、满屏 #####

比如控件A满屏（在2.1.3一样），如下效果：

![13.png][]

则通过如下代码实现：

<TextView
        android:layout_width="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        ...
        />
    复制代码

--------------------

##### 2.4.2、layout\_constraintWidth\_max #####

属性 **layout\_constraintWidth\_max** 在使用dp固定值的时候和 **android:maxWidth=“100dp”** 用法是一致的。

但是layout\_constraintWidth\_max可以搭配属性 **app:layout\_constraintWidth\_percent=“0.5”** 使用，什么意思呢。

比如我们要实现红色区域占父容器宽度的一半：

![14.png][]

实现代码如下：

<TextView
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="0dp"
        android:text=""
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.5"
        ...
         />
    复制代码

这里这样设置的时候，意思最大宽度是父容器的一半。注意这里text=""空的时候，会像图中直接展示父容器的一半，假设我们给text="A"设置上值后,如下图，那么只会展示A的宽度，但最大宽度是父容器一半。

![15.png][]

--------------------

##### 2.4.3、app:layout\_constrainedWidth #####

**app:layout\_constrainedWidth=“true”** 属性，是按约束去限制宽度，什么意思呢？我们先不加上这条属性，实现如下图效果是这样的：

![16.png][]

代码是这样的：

<TextView
        android:id="@+id/txt_a"
        ...
         />
    
    
    <TextView
        app:layout_constraintLeft_toLeftOf="@id/txt_a"
        app:layout_constraintRight_toRightOf="@id/txt_a"
        app:layout_constraintTop_toBottomOf="@+id/txt_a"
        android:id="@+id/txt_b"
        android:layout_width="wrap_content"
        android:text="BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB"
        ...
         />
    复制代码

给txt\_b加上 app:layout\_constrainedWidth=“true” 属性后，就会实现下面的效果：

![17.png][]

意思就是B的最大宽度按照A的宽度来约束，这里要注意的是，B的宽度是wrap\_content。假设这里是0dp的话，那这里就另外一种情况了，意思就是B的宽度和A的宽度一样宽。

--------------------

##### 2.4.4、layout\_constraintDimensionRatio 宽高比 #####

**app:layout\_constraintDimensionRatio=“1:1”**,宽高比，注意这一条属性要生效的话要达到2个条件：

*  其中一条边为0dp
 *  其中一条边为固定值或wrap\_content

比如要实现如下，一个正方形的A：

![18.png][]

代码如下：

<TextView
        android:id="@+id/txt_a"
        android:layout_width="0dp"
        android:layout_height="50dp"
        app:layout_constraintDimensionRatio="1:1"
        ...
        />
    复制代码

#### 2.5、链/约束. ####

指多个控件在一条方向上相互约束，形成一条链子似的。（这里还不算是线性布局， 因为还没加权重） 比如实现如下：

![19.png][]

代码如下：

<TextView
        android:id="@+id/txt_1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/txt_2"
        ...
        />
    
    <TextView
        android:id="@+id/txt_2"
        app:layout_constraintLeft_toRightOf="@+id/txt_1"
        app:layout_constraintRight_toLeftOf="@id/txt_3" 
        ...
        />
    
    <TextView
        android:id="@+id/txt_3"
        app:layout_constraintLeft_toRightOf="@id/txt_2"
        app:layout_constraintRight_toRightOf="parent"
        ...
        />
    复制代码

这样就在横向方向形成一条链子了（同理纵向），在一条链子的第一个控件也就是链头，我们可以加上layout\_constraintHorizontal\_chainStyle来改变整条链的样式，有3中

*  spread就是上面的样子
 *  spread\_inside

![20.png][]

*  packed

![21.png][]

--------------------

上面的降的宽度都是wrap\_content，如果我们把宽度设置为0do然后通过属性**layout\_constraintHorizontal\_weight**（同理纵向），加上权重后，就是我们的线性布局。比如实现如下：

![22.png][]

代码：

<TextView
        android:id="@+id/txt_1"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/txt_2"
        ...
        />
    
    <TextView
        android:id="@+id/txt_2"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@+id/txt_1"
        app:layout_constraintRight_toLeftOf="@id/txt_3"
        ...
        />
    
    <TextView
        android:id="@+id/txt_3"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/txt_2"
        app:layout_constraintRight_toRightOf="parent"
        ...
        />
    复制代码

#### 2.6、辅助工具 ####

##### 2.6.1、Guideline #####

guideline和辅助先一样，运行项目的时候，不会显示在界面上。也不用担心会消耗性能，因为在其onDraw方法里，没有具体的实现。guideline属性具体如下：

*  android:orientation=“vertical” 纵向辅助线，同理横向
 *  然后就是确定辅助线的位置，通过下面3个属性，多个出现时只会有一个生效，权重是百分比 > begin > end

> app:layout\_constraintGuide\_percent=“0.5” 在父布局的百分比位置  
> app:layout\_constraintGuide\_begin=“10dp” 距离父布局开始位置，横向为左，纵向为顶部  
> app:layout\_constraintGuide\_end=“10dp” 距离父布局末尾位置

比如我们之前经常会写 时间轴 类似的控件。就可以用这个guideline辅助完成。

![23.png][]

##### 2.6.2、Barrier #####

![24.png][]

假设有3个控件A、B、C，如果我们A，B的宽度不固定，同时又希望C在A,B的右边。如果用一个布局把A,B包裹起来，然后让C在A,B右边可以实现，如果不像嵌套就要通过Barrier了，如下图：

![25.png][]

实现代码如下：

<TextView
        android:id="@+id/txt_1"
        ...
        />
    
    <TextView
        android:id="@+id/txt_2"
        app:layout_constraintTop_toBottomOf="@+id/txt_1"
        ...
        />
    
    <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="txt_1,txt_2" />
    
    <TextView
        android:id="@+id/txt_3"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        ...
        />
    复制代码

Barrier属性有：

*  app:barrierDirection=“right” 为屏障时，哪个方向的屏障，图中是A和B的右边
 *  app:constraint\_referenced\_ids=“txt\_1,txt\_2” 为屏障引用的id，用逗号隔开

注意，这里是为减少布局嵌套。必要时我觉得可以灵活运用嵌套。

##### 2.6.3、Group #####

被布局Layout嵌套的控件A,B，我们要隐藏他只需要隐藏这个嵌套布局Layout即可。在ConstraintLayout里，没有了布局嵌套隐藏A，B就通过Group实现：

<androidx.constraintlayout.widget.Group
        android:visibility="gone"
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="txt_1,txt_2"
        />
    复制代码

##### 2.6.4、Placeholder：小重点。 #####

网上很多资料对这Placeholder都一比带过。看了我这里的介绍，你会更清楚怎么使用Placeholder。

Placeholder从名字看，就是占位的意思。你可以在一个页面设置多个不同位置的占位。然后通过代码setContentId直接可以改变某个view移动到我们的占位图里。什么意思呢。请看下图：

![GIF222.gif][]

我在界面上设置了2个Placeholder。通过2个按钮，控制蓝色TextView处于在哪个PlaceHolder里。

*  首先通过app:content=“@+id/txt\_blue”，让蓝色textView默认在placeholder\_1的位置。
 *  注意蓝色textView还是需要在xml里的。

<TextView
        android:id="@+id/txt_red"
        ...
         />
    
    
    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeholder_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txt_1"
        app:content="@+id/txt_blue"
        />
    
    <TextView
        android:id="@+id/txt_green"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/placeholder_1"
        ...
        />
    
    <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/placeholder_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    
    <TextView
        android:id="@+id/txt_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
         />
    复制代码

2个按钮我没写上去懂的都懂，那2个按钮上的代码呢？注意看了。这可能是google还没有解决这话bug。下面我来说下

*  当点击按钮“在位置2里”，把蓝色textView放进placeholde\_2，通过placeholde\_2.setContentId(R.id.txt\_2);
 *  注意此时placeholde\_1还是占据着蓝色textView的高度。
 *  当点击“在位置1里”，我们首先要把placeholde\_2里蓝色TextView的引用清空掉，用placeholde\_2.setContentId(-1);
 *  因为placeholde\_1有之前蓝色TextView的引用，虽然是同一个东西，但是设置会不生效。必须清楚掉之前的引用（看源码得出来的结果）。通过placeholde\_1.setContentId(-1);
 *  最后通过placeholde\_1.setContentId(R.id.txt\_2);就可以使蓝色textView又回到了placeholde\_1身上了

具体代码如下：

findViewById(R.id.buttonPanel).setOnClickListener(v ->{
        
        placeholde_2.setContentId(R.id.txt_2);
    });
    
    
    findViewById(R.id.buttonPane2).setOnClickListener(v ->{
        
        placeholde_2.setContentId(-1);
        placeholde_1.setContentId(-1);
        placeholde_1.setContentId(R.id.txt_2);
    });
    复制代码

--------------------

如果这个时候，我们想只要Placeholder移除了蓝色TextView。我们就让Placeholder也隐藏不可见。其实是有办法的。

*  步骤1：给Placeholder加上属性app:placeholder\_emptyVisibility=“gone”。
 *  步骤2：除了以上步骤，我们还要搭配setContentId(-1)，才可以实现效果。

看效果：

![3333.gif][]

代码实现如下：

findViewById(R.id.buttonPanel).setOnClickListener(v ->{
        
        placeholde_1.setContentId(-1);
        placeholde_2.setContentId(R.id.txt_2);
    });
    
    
    findViewById(R.id.buttonPane2).setOnClickListener(v ->{
        
        placeholde_2.setContentId(-1);
        placeholde_1.setContentId(R.id.txt_2);
    });
    复制代码

##### 2.6.5、Layer #####

Layer什么效果呢。比如A B C在如图排布，想在想要有一个黑色背景包裹A，B，C，达到如图效果：

![26.png][]

实现如下：

<androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer"
        android:background="#000"
        app:constraint_referenced_ids="txt_a,txt_b,txt_c"
        android:padding="15dp"
        ...
        />
    
    
    <TextView
        android:id="@+id/txt_a"
        ...
        />
    
    
    <TextView
        android:id="@+id/txt_b"
        ...
        />
    
    
    <TextView
        android:id="@+id/txt_c"
        ...
        />
    复制代码

经过我实际测试，其实Layer能完全代替的了2.6.3的Group，但是不能实现Barrier的功能。

##### 2.6.6、Flow #####

直接看图把，简单实现这种网格布局：

![27.png][]

代码如下：

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:flow_verticalGap="10dp"
        app:flow_wrapMode="aligned"
        app:flow_maxElementsWrap="4"
        app:constraint_referenced_ids="txt_1,txt_2,txt_3,txt_4,txt_5,txt_6" />
    
    <TextView
        android:id="@+id/txt_1"
        ...
        />
    
    <TextView
        android:id="@+id/txt_2"
        ...
        />
    
    <TextView
        android:id="@+id/txt_3"
        ...
        />
    
    <TextView
        android:id="@+id/txt_4"
        ...
        />
    
    <TextView
        android:id="@+id/txt_5"
        ...
        />
    
    <TextView
        android:id="@+id/txt_6"
        ...
        />
    
    
    <TextView
        android:id="@+id/txt_7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="7"
        app:layout_constraintLeft_toLeftOf="@+id/txt_3"
        app:layout_constraintRight_toRightOf="@+id/txt_4"
        app:layout_constraintBottom_toBottomOf="@+id/txt_6"
        app:layout_constraintTop_toTopOf="@+id/txt_6"
        ...
        />
    复制代码

没有约束就可以实现这种效果了。而且因为不是嵌套txt\_7可以根据Flow里的元素进行约束实现自己想要的样式，这里就不过多介绍了，感兴趣的朋友可以自己去试试，介绍下属性把：

*  app:flow\_wrapMode=“aligned” 有3个值。

<table> 
 <thead> 
  <tr> 
   <th>aligned</th> 
   <th>none</th> 
   <th>chain</th> 
   <th>chain2</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>绝对对齐（也就是网格对齐的方式）</td> 
   <td>默认方式，会排成一排，屏幕宽度不够放时，2边出去</td> 
   <td>和绝对对齐有点出入的是，比如6个元素，第一排4个，第二排是2个，这2个元素会平分横屏宽度</td> 
   <td>和none类似，区别是，不够放时，会换行其他</td> 
  </tr> 
 </tbody> 
</table>

*  app:flow\_maxElementsWrap=“4” 一行几个元素
 *  app:flow\_verticalGap=“10dp” 竖直间距
 *  app:flow\_horizontalGap=“10dp” 横向间距
 *  android:orientation=“horizontal” 水平方向的流式还是竖直方向的流式
 *  app:flow\_verticalAlign =“top” 值有top，bottom，center，baseline。每一行元素的对齐方式
 *  app:flow\_horizontalStyle = “ spread | spread\_inside | packed ” 当wrapMode为chain或ALIGNED时生效
 *  app:flow\_horizontalBias = “ float " low的bias偏移，只在style为packed时生效

##### 2.6.7、ImageFilterButton/ImageFilterView #####

功能很强大控件，包括圆角，图片滤镜等。 [ImageFilterButton/ImageFilterView][ImageFilterButton_ImageFilterView]

### 三、代码动态修改约束及动画的实现。 ###

比如把一个左上角的TextView，居中显示。代码如下：

ConstraintSet constraintSet = new ConstraintSet();
    //克隆一个父布局约束，constraint就是当前父布局
    constraintSet.clone(constraint);
    //R.id.txt_1相对于父布局横向居中
    constraintSet.centerHorizontally(R.id.txt_1,ConstraintSet.PARENT_ID);
    //R.id.txt_1相对于父布局竖直居中
    constraintSet.centerVertically(R.id.txt_1,ConstraintSet.PARENT_ID);
    constraintSet.applyTo(constraint);
    复制代码

再看下面的解释，可能更加清楚：

//意思R.id.view1的顶部和R.id.view2的顶部对齐
    set.connect(R.id.view1, ConstraintSet.TOP, R.id.view2, ConstraintSet.TOP)
    
    //上面就相当于XML布局里这句代码
    //app:layout_constraintTop_toTop="@+id/view2"
    复制代码

如果想要带动画效果去改变的话，我们只要在constraintSet.applyTo（）前，加上这句代码，就会有动画效果：

TransitionManager.beginDelayedTransition(constraint);
    复制代码

![4443.gif][]

--------------------

上面讲了一种可以代码改变，并且可以加动画效果的。接下来看，这种直接通过2个xml布局去添加约束，然后去改变。转变2个布局：

R.layout.constraint\_activity\_three 布局如下：

![28.png][]

R.layout.constraint\_activity\_four 布局如下：

![29.png][]

首先我们在activity里用的是R.layout.constraint\_activity\_three，点击按钮，让红色TextView A 和 蓝色按钮“点击改变”，通过动画变成R.layout.constraint\_activity\_four的样式。点击“恢复”后，又回到原来的样子。注意2个布局中，要改变约束的元素的id要保持一致，否则失效。我们看代码实现：

public class ConstraintLayoutSecondActivity extends AppCompatActivity {
        
        ConstraintLayout constraint;
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.constraint_activity_three);
            constraint= findViewById(R.id.constraint);
            //改变
            findViewById(R.id.button_change).setOnClickListener(v ->{
        
                ConstraintSet constraintSet = new ConstraintSet();
                constraintSet.clone(ConstraintLayoutSecondActivity.this,R.layout.constraint_activity_four);
                TransitionManager.beginDelayedTransition(constraint);
                constraintSet.applyTo(constraint);
            });
    
            //恢复
            findViewById(R.id.button_reset).setOnClickListener(v->{
        
                ConstraintSet constraintSet = new ConstraintSet();
                constraintSet.clone(ConstraintLayoutSecondActivity.this,R.layout.constraint_activity_three);
                TransitionManager.beginDelayedTransition(constraint);
                constraintSet.applyTo(constraint);
            });
        }
    }
    复制代码

最终运行起来实现的效果如下：

![4443.gif][4443.gif 1]

[1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b37f32ae7c14458bad1609d8c9febac3.png
[2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/99cac1afced7431185a2e27b94fc3f18.png
[3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/564d187523de49d3ba70e7dcd4d64de9.png
[4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d1f45d2afa434a429c3b6a95ee06af27.png
[5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1d42ccc1cf244d4d9fc477dd7ef526d1.png
[6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9d0b87c0062e4c048bc99f1539df6960.png
[7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/72fb70ed312b489bb376a7fe5fa0bf90.png
[8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/53b7d493f28e4b5cbedf4a84c86f9376.png
[9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ac9011024e8c42f48497cbecb619ae1b.png
[GIF.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/975b8f366a734d27aa9754eee8d59cb7.png
[10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/04e932cce23c42a695d541c79236c2ef.png
[11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f52eed4b23a64de8aedf083118b2f215.png
[12.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9baa77d3b05045d793fa6c4d1f0b7887.png
[13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fafa555886414e93934bbbfc9580ff8d.png
[14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9fd4f4f0e18d40cfb3ad4488607d0301.png
[15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/215f6778341d420a963d0b2b4eac8c54.png
[16.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/499a39df8b36449f913b45aa7c329aa8.png
[17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a524baf267544ef98fac4735c109cce9.png
[18.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/f73d508f8855474892e213324e45356c.png
[19.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e2ba91031feb45e59d03cf4305b5be52.png
[20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c00fe96c3d1f431db76e4cd75fce5b12.png
[21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/efce0e5de0924c7d8fe94d0e6150950f.png
[22.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/92488d06d72748a8ada8c40b059b38bf.png
[23.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9ffeb9a8ae574ed9b83804605b6eb982.png
[24.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1140250c43224910a1c42b3a94aa3afa.png
[25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/1df9bcb32ae044ae98e8fcf1cad38995.png
[GIF222.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/fd6f0fccc8c3493ebee6d2841e049355.png
[3333.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7ed8b85bcb87470cbc4f13e576fcdef4.png
[26.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cb1c0168d61f40f2b6c14ef6eba4296d.png
[27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a8c77c94b4344b59857b903ca64c94b9.png
[ImageFilterButton_ImageFilterView]: https://link.juejin.cn?target=https%3A%2F%2Fblog.csdn.net%2Fjavaniceyou%2Farticle%2Fdetails%2F116921501
[4443.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ab63ce2d11eb434ab51862377b6a8968.png
[28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c53f6b1449494f98bff5d900ee1ebc8c.png
[29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/91be5736ec39462487251408ed6c558a.png
[4443.gif 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e0e2df5f555e456cb26d2446bb2eb744.png