Android ：约束布局ConstraintLayout 之 Chains 链式约束

ConstraintLayout Chains 链式约束1. 链简介( 1 ) Chains ( 链 ) 简介2. 创建链及分析生成的代码( 1 ) 创建水平链( 2 ) 链创建后的代码及样式( 3 ) 链创建后生成的代码3. 链头及链的间距( 1 ) 链头设置( 2 ) 链间距4. 链的三种风格( 1 ) 链风格设置( 2 ) 链的三种风格( 3 ) CHAIN_S

JMW1407

9271人浏览 · 2021-08-25 11:51:54

JMW1407 · 2021-08-25 11:51:54 发布

Chains 链式约束

1. 链简介

( 1 ) Chains ( 链 ) 简介

1.实现的约束功能 : Chains 约束提供了一种机制 , 通过该机制可以在单个方向 ( 垂直或水平 ) 上控制一组组件的排列分布 ; 与此同时 , 另外一个方向上的约束行为不受 Chains 影响 , 两个方向的约束是独立的 ;
2.分组共享空间 : Chains 提供了一个类似于分组的功能 , 其包含了多个组件 , 这些组件共享水平或垂直方向的空间 ;
3.类似于 LinearLayout 的 weight 功能 : Chains 的功能与线性布局的 weight 属性设置类似 , 但其功能要比线性布局强大很多 ;
4.Chains 约束方向 : 使用前需要限定一个方向 , 水平方向 , 或者垂直方向 , 一组组件共享该方向上的空间。

2. 创建链及分析生成的代码

( 1 ) 创建水平链

创建水平 Chains :

1.创建多个组件 : 先在界面中创建多个组件 , 其方向呈水平放置 , 或垂直放置 , 此处创建水平方向的 Chains ( 链 ) ;
2.具体创建方法 : 选中一组组件 , 然后右键选择 Chains -> Create Horizontal Chain , 即创建了一个水平方向的 Chains ( 链式约束 ) ;

( 2 ) 链创建后的代码及样式

Chains 创建后代码及样式 : 下图是官方配图 , 表示一个最小的链 , 只有两个控件 , 控件两端约束于父控件 , 控件之间互相约束 ;

在这里插入图片描述
1.创建完毕后的样式 : Chains 创建完毕后 , 在 Blueprint ( 蓝图 ) 和 Design ( 设计 ) 界面的样式 ; 最左侧和最右侧是普通的约束 , 中间和两侧的元素是使用链连接起来的 ;

在这里插入图片描述

( 3 ) 链创建后生成的代码

<?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=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="114dp" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        tools:layout_editor_absoluteY="114dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        tools:layout_editor_absoluteY="114dp" />

</android.support.constraint.ConstraintLayout>

注意：

bias属性，表示子控件相对父控件的位置倾向，可以使用属性：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

假设设置控件A相对父控件横向偏差是30%：

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

在这里插入图片描述

app:layout_constraintHorizontal_bias详解

布局代码分析如下：

1、Chains 约束下的控件代码分析 : 两侧组件约束与父控件 , 中间的组件互相约束 ;

1.左侧按钮布局分析 : 其左侧约束于父组件 , 右侧约束于中间按钮控件 ;

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="114dp" />

在这里插入图片描述

2.中间按钮布局分析 : 其左侧约束于左边按钮控件 , 右侧约束于右侧按钮控件 ;

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        tools:layout_editor_absoluteY="114dp" />

在这里插入图片描述

3.右侧按钮布局分析 : 其左侧约束于中间按钮控件 , 右侧约束于父控件 ;

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        tools:layout_editor_absoluteY="114dp" />

在这里插入图片描述

3. 链头及链的间距

( 1 ) 链头设置

链头 ( Chains Head ) 设置 :

1.链的行为控制 : 通过设置链的第一个控件的参数的属性 , 可以控制 Chains 约束的各种行为 ; 这个控件成为 Chains Head ( 链头 ) ;
2.链头元素选定 :
- ① 水平方向 : 水平方向上 , 链头是最左侧的控件 ;
- ② 垂直方向 : 垂直方向上 , 链头是最顶部的控件 ;

( 2 ) 链间距

链的间距 :

1.设置边距 : 链中的控件 , 如果设置了链的某个方向上的边距 , 边距效果会体现出来 ,
2.空间计算 : 在 CHAIN_SPREAD 样式下 , 如果设置了 Margin , 该距离会从剩余的空间中扣除 ;

4. 链的三种风格

( 1 ) 链风格设置

通过为链设置不同的风格 , 可以控制链的行为 ;

1.链风格设置 : 设置链头 ( 链的第一个控件 ) 的属性 , 即可为链设置不同的风格 ;
2.垂直方向链 风格设置 : 设置链头控件的 layout_constraintVertical_chainStyle 属性 , 即添加垂直方向链的风格 ;
3.水平方向链 风格设置 : 设置链头控件的 layout_constraintHorizontal_chainStyle 属性 , 即添加水平方向链的风格 ;

( 2 ) 链的三种风格

1、CHAIN_SPREAD 风格 : 链中的控件 , 均匀分布在垂直或水平的空间中 , 设置链头属性值 " spread " ; 设置链头如下属性 :

app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintVertical_chainStyle="spread"

在这里插入图片描述
2.CHAIN_SPREAD_INSIDE 风格 : 与 CHAIN_SPREAD 类似 , 但是链两端的控件紧贴被约束的控件位置 , 三个控件还是平均占用指定方向的空间 ; 设置链头如下属性spread_inside :

app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintVertical_chainStyle="spread_inside"

在这里插入图片描述
3.CHAIN_PACKED 风格 : 链上的控件被打包在一起 , 三个控件的位置可以通过控制 app:layout_constraintHorizontal_bias 或 app:layout_constraintVertical_bias 属性值改变来修改 ; 设置链头如下属性packed :

app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.5"

在这里插入图片描述

( 3 ) CHAIN_SPREAD 样式代码示例及效果

在这里插入图片描述

<?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=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!-- 链头 控件 中设置 Chain 风格 spread -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="114dp"
        
        app:layout_constraintHorizontal_chainStyle="spread"
        
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        tools:layout_editor_absoluteY="114dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        tools:layout_editor_absoluteY="114dp" />

</android.support.constraint.ConstraintLayout>

( 4 ) CHAIN_SPREAD_INSIDE 样式代码示例及效果

在这里插入图片描述

<?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=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!-- 链头 控件 中设置 Chain 风格 spread_inside -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="114dp"

        app:layout_constraintHorizontal_chainStyle="spread_inside"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        tools:layout_editor_absoluteY="114dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        tools:layout_editor_absoluteY="114dp" />
        
</android.support.constraint.ConstraintLayout>

( 5 ) CHAIN_PACKED 样式代码示例及效果

在这里插入图片描述

<?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=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <!-- 链头 控件 中设置 Chain 风格 packed-->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="114dp"

        app:layout_constraintHorizontal_chainStyle="packed"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        tools:layout_editor_absoluteY="114dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button2"
        tools:layout_editor_absoluteY="114dp" />

</android.support.constraint.ConstraintLayout>

5. 链的权重设置

//设置水平方向的权重
app:layout_constraintHorizontal_weight="1"
//设置垂直方向的权重
app:layout_constraintVertical_weight="1"

( 1 ) 链的权重设置

Chain ( 链 ) 的 Weight ( 权重 ) 设置 :

1.前提 ( CHAIN_SPREAD 风格 ) : Weight 权重设置是在 CHAIN_SPREAD 风格下设置的 ;
2.单个控件设置 MATCH_CONSTRAINT 尺寸 : 将链上控件的尺寸设置为 MATCH_CONSTRAINT 属性值 , 该控件会将链上的水平或垂直方向的剩余空间全部占满 ;
3.多个控件设置 MATCH_CONSTRAINT 尺寸 : 如果为链上的多个控件的尺寸设置 MATCH_CONSTRAINT 属性 , 那么这些控件将平均占用链上的剩余空间 ;
4.MATCH_CONSTRAINT 尺寸说明 : MATCH_CONSTRAINT 尺寸等价于 0dip ;
5、.多个控件设置 Weight 属性 : 要设置权重的控件 , 对应方向的尺寸设置 0dip , 下面的示例 , 中间控件设置权重 2 , 两侧控件设置权重 1 ; 该行为与 LinearLayout 中设置 Weight 属性类似 ;

( 2 ) 链的权重设置代码示例

<?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"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <Button
    android:id="@+id/btn1"
    android:layout_width="@dimen/dimen_0dp"
    android:layout_height="@dimen/dimen_40dp"
    android:text="button1"
    app:layout_constraintRight_toLeftOf="@id/btn2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintHorizontal_weight="1"/>

  <Button
    android:id="@+id/btn2"
    android:layout_width="@dimen/dimen_0dp"
    android:layout_height="@dimen/dimen_40dp"
    android:text="button2"
    app:layout_constraintLeft_toRightOf="@id/btn1"
    app:layout_constraintRight_toLeftOf="@id/btn3"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintHorizontal_weight="2"/>

  <Button
    android:id="@+id/btn3"
    android:layout_width="@dimen/dimen_0dp"
    android:layout_height="@dimen/dimen_40dp"
    android:text="button3"
    app:layout_constraintLeft_toRightOf="@id/btn2"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintHorizontal_weight="1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

6. 常见问题

不过如果某个控件的宽度设置的不是wrap_content，而是一个具体的宽度dp。还比较大。这个时候布局就会有问题。

   <?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent">

    <Button
        android:id="@+id/sbBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="sb"
        app:layout_constraintEnd_toStartOf="@+id/sbBtn01"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/sbBtn01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="sb01"
        app:layout_constraintEnd_toStartOf="@+id/sbBtn02"
        app:layout_constraintStart_toEndOf="@+id/sbBtn"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/sbBtn02"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="sb02"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/sbBtn01"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

解决：我们需要把控件的宽度都设置为0dp，这样能保证控件依然均分,某个控件的内容如果超出宽度也不会影响均分效果。

<?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="wrap_content"
  android:background="@color/colorAccent">

  <Button
    android:id="@+id/sbBtn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="sb"
    app:layout_constraintEnd_toStartOf="@+id/sbBtn01"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <Button
    android:id="@+id/sbBtn01"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="sb01"
    app:layout_constraintEnd_toStartOf="@+id/sbBtn02"
    app:layout_constraintStart_toEndOf="@+id/sbBtn"
    app:layout_constraintTop_toTopOf="parent" />

  <Button
    android:id="@+id/sbBtn02"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="小星星小星星小星星小星星小星星吃吃吃吃吃吃吃吃吃"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/sbBtn01"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
当然你也可以一些控件自适应wrap_content，剩下的控件0dp，这样就能保证自适应的控件内容显示正常（不换行），但是设置为0dp的控件就会被强制各种压迫:

<?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="wrap_content"
  android:background="@color/colorAccent">

  <Button
    android:id="@+id/sbBtn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="sb"
    app:layout_constraintEnd_toStartOf="@+id/sbBtn01"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

  <Button
    android:id="@+id/sbBtn01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="thwrethneyneyjneyjnmtymndrtmndthmetyjkmketuykjmruk"
    app:layout_constraintEnd_toStartOf="@+id/sbBtn02"
    app:layout_constraintStart_toEndOf="@+id/sbBtn"
    app:layout_constraintTop_toTopOf="parent" />

  <Button
    android:id="@+id/sbBtn02"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="小星星小星星小星星小星星小星星吃吃吃吃吃吃吃吃吃"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/sbBtn01"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述

参考

1、Chains 链式约束
2、约束布局ConstraintLayout看这一篇就够了

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

Android发送和接收自定义广播（动态注册广播）

本文简单的记录一下动态注册广播的方法：三个步骤：1.【创建广播接收器】（就是你的这类广播接收到之后想要干什么）；2.【做一个意图的过滤器】（就是要监听是不是你的广播），创建完之后要【注册】；3.【取消注册】一般在onDestroy（）里面取消。如果不取消可能会出现内存泄漏（小菜鸟的我不太懂为啥一定要取消注册，于是了解了一下，大...

开放原子开发者工作坊

Mxgraph 使用教程（11）：mxgraph手动添加节点和边（节点和边点击事件）,并按照要求格式导出数据

上文我们介绍了，mxgraph如何在页面不刷新的情况下，通过请求不同文件生成不同的mxgraph图，本文我们将讲述mxgraph手动添加节点和边，并且按照原本数据格式导出数据。1.准备工作准备工作代码<template><div><div class="Oinput"><input type="text" placeholder="请输入对应的城市名称..

开放原子开发者工作坊

图像风格转换之 CUT 论文解读与感想

Contrastive Learning for Unpaired Image-to-Image Translation（CUT）是发布于2020年ECCV的一篇关于图像风格转换的文章。本文最大的特点就是将目前大热的对比学习应用到了图像风格转换问题上来，实现了一种轻量级的图像风格转换模型，并且本文可以进一步实现单张图片之间的风格转换。文章切入点无配对图像风格转换领域近些年来最成功和最经典的模型无疑