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

最新推荐文章于 2026-04-08 09:45:09 发布

原创

最新推荐文章于 2026-04-08 09:45:09 发布 · 1.2w 阅读

本文详细介绍了Android开发中ConstraintLayout的Chains特性，包括链的创建、样式设置、链头及链间距的调整、三种链风格（CHAIN_SPREAD, CHAIN_SPREAD_INSIDE, CHAIN_PACKED）的应用以及权重设置。通过实例代码展示了如何通过Chains实现组件的灵活布局，并解决了宽度过大的控件在链式约束中可能出现的问题。对于理解和提升ConstraintLayout的使用技巧具有指导意义。

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