【约束布局】ConstraintLayout 之 Chains 链式约束 ( Chains 简介 | 代码及布局分析 | 链头设置 | 间距设置 | 风格设置

2022-01-17 1198

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

3. 链头及链的间距

( 1 ) 链头设置

链头 ( Chains Head ) 设置 :

1.链的行为控制 : 通过设置链的第一个控件的参数的属性 , 可以控制 Chains 约束的各种行为 ; 这个控件成为 Chains Head ( 链头 ) ;

2.链头元素选定 :

① 水平方向 : 水平方向上 , 链头是最左侧的控件 ;

② 垂直方向 : 垂直方向上 , 链头是最顶部的控件 ;

( 2 ) 链间距

链的间距 :

1.设置边距 : 链中的控件 , 如果设置了链的某个方向上的边距 , 边距效果会体现出来 ,

2.空间计算 : 在 CHAIN_SPREAD 样式下 , 如果设置了 Margin , 该距离会从剩余的空间中扣除 ;

4. 链的三种风格

( 1 ) 链风格设置

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

1.链风格设置 : 设置链头 ( 链的第一个控件 ) 的属性 , 即可为链设置不同的风格 ;

2.垂直方向链风格设置 : 设置链头控件的 layout_constraintHorizontal_chainStyle 属性 , 即添加垂直方向链的风格 ;

3.水平方向链风格设置 : 设置链头控件的 layout_constraintHorizontal_chainStyle 属性 , 即添加水平方向链的风格 ;

( 2 ) 链的三种风格

链 ( Chain ) 的风格 : 设置链头的属性即可 ;

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

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

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

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

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

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>