分享程序员开发的那些事...
更新时间：2022-08-17 19:15:45
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.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>
( 4 ) 生成的 链 代码分析
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" />