1. 链 简介

( 1 ) Chains ( 链 ) 简介

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.ConstraintLayoutxmlns: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"><Buttonandroid: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" /><Buttonandroid: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" /><Buttonandroid: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 ) 生成的 链 代码分析

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

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

    <Buttonandroid: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.中间按钮布局分析 : 其 左侧 约束于 左边按钮控件 , 右侧 约束于 右侧按钮控件 ;

    <Buttonandroid: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.右侧按钮布局分析 : 其 左侧 约束于 中间按钮控件 , 右侧 约束于 父控件 ;

    <Buttonandroid: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 ) 链 风格设置

链 ( 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.ConstraintLayoutxmlns: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 --><Buttonandroid: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"/><Buttonandroid: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" /><Buttonandroid: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.ConstraintLayoutxmlns: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 --><Buttonandroid: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"/><Buttonandroid: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" /><Buttonandroid: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.ConstraintLayoutxmlns: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--><Buttonandroid: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"/><Buttonandroid: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" /><Buttonandroid: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. 链的权重设置

( 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 ;
• 4.多个 控件 设置 Weight 属性 : 要设置权重的控件 , 对应方向的尺寸设置 0dip , 下面的示例 , 中间控件设置权重 2 , 两侧控件设置权重 1 ; 该行为与 LinearLayout 中设置 Weight 属性类似 ;

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

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

<?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 的 weight 权重设置 --><Buttonandroid:id="@+id/button1"android:layout_width="0dip"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"app:layout_constraintHorizontal_weight="1"/><Buttonandroid:id="@+id/button2"android:layout_width="0dip"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"app:layout_constraintHorizontal_weight="2"/><Buttonandroid:id="@+id/button3"android:layout_width="0dip"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"app:layout_constraintHorizontal_weight="1"/></android.support.constraint.ConstraintLayout>

【约束布局】ConstraintLayout 之 Chains 链式约束 ( Chains 简介 | 代码 及 布局分析 | 链头设置 | 间距设置 | 风格设置 | 权重设置 )相关推荐

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

   ConstraintLayout Chains 链式约束 1. 链 简介 ( 1 ) Chains ( 链 ) 简介 2. 创建 链 及 分析 生成的代码 ( 1 ) 创建水平链 ( 2 ) 链创建后 ...

2. Android 快速实现新手引导层的库，通过简洁链式调用，一行代码实现引导层的显示

   NewbieGuide 项目地址:huburt-Hu/NewbieGuide  简介:Android 快速实现新手引导层的库,通过简洁链式调用,一行代码实现引导层的显示 更多:作者   提 Bug 标 ...

3. 链表list(链式存储结构实现)_5 线性表的链式存储结构

   系列文章参考资料为<大话数据结构>,源码为个人私有,未经允许不得转载 线性表的链式存储结构的特点是用一组任意的存储单元存储线性表的数据元素,可以使连续的,也可以不连续,也就意味这些元素可以 ...

4. java链式结构_(Java)单链表Java语言链式结构实现(数据结构四)

   1.迭代器接口实现 package com.zhaochao; public interface Iterator { boolean hasNext(); E next(); boolean del ...

5. 严蔚敏数据结构C语言版——线性表的链式存储方式详细代码

   一.严蔚敏数据结构C语言版 由于书上的许多地方都是伪代码,所以下面的代码对课本上的做了一些改动,使代码能够正常运行 链表的定义即相关类型定义 typedef int ElementType; type ...

6. 数据结构-线性表的链式存储（包含代码实现）

   线性表的链式表示和实现 链式存储结构 结点在存储器中的位置是任意的,即逻辑上相邻的数据元素在物理上不一定相邻 线性表的链式存储结构又称为非顺序映像或链式映像. 用一组物理位置任意的存储单元来存放线性表 ...

7. 线性表的链式存储结构及代码实现（单链表，双链表，循环链表）

     在上一篇博文中介绍了线性表的顺序存储方式,它最大的缺点就是在插入和删除操作时会移动大量的元素,这显然会耗费很多时间.后来人们便想到了用链式存储方式来解决上面这一问题.链式存储线性表时,不需要使用地 ...

8. 约束布局ConstraintLayout

   文章目录 一,背景 二,控件优点 三,项目中引入 四,基本使用 4.1 相对位置 4.2 尺寸约束 4.3 宽高比 Ratio 4.4 百分比宽高 Percent 4.5 偏移量 bias 4.6 圆 ...

9. 大话PHP设计模式：类自动载入、PSR-0规范、链式操作、11种面向对象设计模式实现和使用、OOP的基本原则和自动加载配置...

   一.类自动载入 SPL函数 (standard php librarys) 类自动载入,尽管 __autoload() 函数也能自动加载类和接口,但更建议使用 spl_autoload_registe ...

最新文章

1. python 字符串格式化是打印不同类型更简单一些
2. SynchronousQueue原理解析
3. 破解无线路由免费上网
4. Tornado源码分析 --- 静态文件处理模块
5. stm8s编译器查看代码量大小的软件
6. anaconda和vscode配置python_vscode配置anaconda3的方法步骤
7. #软件配置管理#之坏味道搜集
8. 《鸟哥的linux私房菜-服务器篇 第三版》 RHCA亲授
9. 【CodeForces - 764A】Taymyr is calling you （找规律，水题）
10. 云计算市场多元并立，唯有合作才能共赢
11. 反演控制 matlab,基于matlab的反演程序
12. java实训报告_Java实验报告三
13. GNS3 使用错误 ( Dynamips error when running command 'nio create_udp )
14. 2022年第十二届MathorCup高校数学建模挑战赛
15. 网易公司首席执行官 丁磊
16. 快播（Qvod）也开始耍流氓了
17. 微信H5页面ios分享失效
18. 软件公司要咨询顾问干什么？
19. 一个吊打百度网盘的开源神器，还是99年妹子开发的
20. sherlock 例程_如何解决JavaScript中的Sherlock和Anagrams编码难题

热门文章

1. 阅读器关闭时Read的尝试无效
2. java web--servlet（2）
3. JAVA防盗链在报表中的应用实例
4. Source Insight 格式化
5. [Erlang-0011][OTP] External Term Format
6. 【数据结构(C语言版)系列一】 线性表
7. KVM的客户机可以使用的存储
8. window.event
9. Windows Server 2008 R2安装IIS
10. 最近用unity5弄的一些渲染