Android详解——ConstraintLayout束缚布局

目次
一、ConstraintLayout概述
二、ConstraintLayout属性先容
1. 相对位置
2. 边距
3. 中心和偏移位置
中心位置
偏移位置
4. 圆形位置
5. 可见性
6. 尺寸束缚
最小尺寸
WRAP_CONTENT :强制束缚
MATCH_CONSTRAINT
Min和Max
百分比尺寸
比率
7. 链式布局
创建链条
链条头
链条边距
链条风格
权重链
边距
8. 虚拟辅助控件
9. 优化器

---

一、ConstraintLayout概述

ConstraintLayout继承自ViewGroup，允许用户以更加灵活的方式在布局中设置控件的位置和尺寸（ConstraintLayout在API>9可用）。ConstraintLayout采用方向束缚的方式对控件进行定位,至少要保证水平和垂直方向都至少有一个束缚才能确定控件的位置。
二、ConstraintLayout属性先容

ConstraintLayout功能有如下几种：

• 相对位置
  
• 边距
  
• 中心位置
  
• 圆形位置
  
• 可见性
  
• 尺寸束缚
  
• 链式布局
  
• 虚拟辅助控件
  
• 优化器
  

记住，依靠关系中不能有循环依靠关系。
1. 相对位置

类似于RelativeLayout功能。
相对位置功能是束缚布局中构建控件位置的最根本的功能之一。相对位置束缚条件可以定位一个控件相对于另一个控件的位置。可以限定一个控件在水平和垂直坐标轴上的位置：

• Horizontal 轴: left, right, start and end sides
  
• Vertical 轴: top, bottom sides and text baseline
  

通常是指一个控件限定在另一个控件边缘的位置。
比方：

1.         <Button android:id="@+id/buttonA" ... />
2.         <Button android:id="@+id/buttonB" ...
3.                 app:layout_constraintLeft_toRightOf="@+id/buttonA" />
4.         

复制代码

上述代码限定按钮B在按钮A的右边。按钮B的左边和按钮A的右边在雷同的位置。
相对位置束缚属性有如下几个：

• layout_constraintLeft_toLeftOf
  
• layout_constraintLeft_toRightOf
  
• layout_constraintRight_toLeftOf
  
• layout_constraintRight_toRightOf
  
• layout_constraintTop_toTopOf
  
• layout_constraintTop_toBottomOf
  
• layout_constraintBottom_toTopOf
  
• layout_constraintBottom_toBottomOf
  
• layout_constraintBaseline_toBaselineOf
  
• layout_constraintStart_toEndOf
  
• layout_constraintStart_toStartOf
  
• layout_constraintEnd_toStartOf
  
• layout_constraintEnd_toEndOf
  

束缚对象可以通过另一个控件的属性id设置，也可以设置父布局parent
比方：

1.         <Button android:id="@+id/buttonB" ...
2.                 app:layout_constraintLeft_toLeftOf="parent" />
3.         

复制代码

2. 边距

如果控件的边距可以设置，那么边距可用于束缚布局。束缚两个控件之间的边距巨细。通用的边距属性有如下几种:

• android:layout_marginStart
  
• android:layout_marginEnd
  
• android:layout_marginLeft
  
• android:layout_marginTop
  
• android:layout_marginRight
  
• android:layout_marginBottom
  
• layout_marginBaseline
  

记住，边距只能>=0,采用维度设置。
3. 中心和偏移位置

中心位置

水平中心位置如下：

1.         <androidx.constraintlayout.widget.ConstraintLayout ...>
2.             <Button android:id="@+id/button" ...
3.                 app:layout_constraintLeft_toLeftOf="parent"
4.                 app:layout_constraintRight_toRightOf="parent"/>
5.         </>
6.         

复制代码

垂直中心位置类似top和bottom设置。
偏移位置

相对于左右水平偏移量，或者相对于上下位置的垂直偏移量。
比方：相对于水平偏移0.3

1.         <androidx.constraintlayout.widget.ConstraintLayout ...>
2.             <Button android:id="@+id/button" ...
3.                 app:layout_constraintHorizontal_bias="0.3"
4.                 app:layout_constraintLeft_toLeftOf="parent"
5.                 app:layout_constraintRight_toRightOf="parent"/>
6.         </>
7.         

复制代码

4. 圆形位置

可以限定一个控件中心相对于另一个控件中心的角度和距离。可以在一个圆上设置控件。可用属性如下：

• layout_constraintCircle : 设置参考的控件id
  
• layout_constraintCircleRadius : 设置控件中心相对于另一个控件中心的距离
  
• layout_constraintCircleAngle : 设置相对于另一个控件的角度(角度范围：0~360)
  

比方：

1. <Button android:id="@+id/buttonA" ... />
2. <Button android:id="@+id/buttonB" ...
3.      app:layout_constraintCircle="@+id/buttonA"
4.      app:layout_constraintCircleRadius="100dp"
5.      app:layout_constraintCircleAngle="45" />
6.         

复制代码

5. 可见性

6. 尺寸束缚

最小尺寸

可以界说束缚布局的最小和最大尺寸:

• android:minWidth 设置布局的最小宽度
  
• android:minHeight 设置布局的最小高度
  
• android:maxWidth 设置布局的最大宽度
  
• android:maxHeight 设置布局的最大高度
  

当布局被设置成WRAP_CONTENT时，这些最小和最大的维度可以被用于布局中。
控件维度巨细可以通过android:layout_width and android:layout_height 来设置，有3种不同的设置方式：

• 用具体的维度值(比方用数值123dp或者维度参考值)
  
• 用WRAP_CONTENT，是请求计算应用控件自己的尺寸
  
• 用0dp, 等于"MATCH_CONSTRAINT"
  

前两种布局的工作方式与其他布局相似。末了一个将调整小部件的巨细，使其与设置的束缚相匹配。如果设置了边距，它们将在计算中被考虑在内。
重点: MATCH_PARENT 不被保举在ConstraintLayout布局中使用. 类似的设置可以用 MATCH_CONSTRAINT，相对于left/right或者top/bottom的束缚是基于父布局“parent”.
WRAP_CONTENT :强制束缚

尺寸设置为WRAP_CONTENT, 在1.1版本之前，这是笔墨尺寸。这意味着不会限制结果尺寸。当某些情况下可用 WRAP_CONTENT限制结果尺寸，此时可以添加相应的属性设置：

• app:layout_constrainedWidth="true|false"
  
• app:layout_constrainedHeight="true|false"
  

layout_constrainedWidth是 Android 中 ConstraintLayout 布局管理器的一个属性，用于控制当控件的尺寸设置为 wrap_content 时，是否应受束缚限制其宽度。以下是关于 layout_constrainedWidth的详细解释：

• layout_constrainedWidth在 Android 布局中的含义
  

layout_constrainedWidth属性用于指定当控件的宽度设置为 wrap_content 时，是否应该受到其在 ConstraintLayout 中的水平束缚限制。在 Android ConstraintLayout 的 1.1 版本之前，如果控件的宽度设置为 wrap_content，则束缚对其宽度没有影响。而 layout_constrainedWidth属性的引入，使得即使在 wrap_content 模式下，控件的宽度也会受到束缚限制。

• layout_constrainedWidth属性的使用场景
  

当你在 ConstraintLayout 中使用 wrap_content 来设置控件的宽度，而且希望这个宽度受到其他控件或父布局的束缚时，可以使用 layout_constrainedWidth属性。特别是在处理文本控件（如 TextView）时，如果文本内容可能非常长，使用 layout_constrainedWidth可以确保文本不会溢出其束缚范围。

• layout_constrainedWidth属性可以担当的值及其结果
  

true：控件的宽度将受到其水平束缚的限制，即使控件的宽度设置为 wrap_content。
false（默认值）：控件的宽度将不会受到其水平束缚的限制，即使设置了束缚。

• 如安在 XML 布局文件中设置 layout_constrainedWidth属性的示例
  

1. <TextView
2.     android:id="@+id/myTextView"
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content"
5.     android:text="这是一个很长的文本，用于测试 layout_constrainedwidth 属性"
6.     app:layout_constrainedWidth="true"
7.     app:layout_constraintStart_toStartOf="parent"
8.     app:layout_constraintEnd_toEndOf="parent"
9.     app:layout_constraintTop_toTopOf="parent"
10.     app:layout_constraintBottom_toBottomOf="parent"
11.     android:ellipsize="end"
12.     android:maxLines="1"/>

复制代码

在这个例子中，TextView 的宽度被设置为 wrap_content，但由于 app:layout_constrainedWidth="true"，其宽度将受到 ConstraintLayout 的水平束缚限制。如果文本内容过长，它将被截断并显示省略号。

• 使用 layout_constrainedWidth时可能必要注意的事项或常见题目
  

当使用 layout_constrainedWidth时，应确保控件的其他相干束缚（如开始、结束、顶部和底部的束缚）已正确设置，否则可能无法达到预期的结果。如果控件的内容可能非常长，而且你希望它能够在截断时显示省略号，那么还必要设置 android:ellipsize="end" 和 android:maxLines="1"（或其他适当的行数）。
在某些情况下，如果控件的高度也受到束缚，而且你希望保持宽高比，可能必要同时使用 layout_constrainedHeight 属性。
layout_constrainedHeight使用情况类似layout_constrainedWidth。
MATCH_CONSTRAINT

当尺寸被设置成MATCH_CONSTRAINT时,结果尺寸默认会得到全部的尺寸巨细。有几个其他修饰属性可以设置：

• layout_constraintWidth_min 和layout_constraintHeight_min : 设置最小尺寸
  
• layout_constraintWidth_max 和layout_constraintHeight_max : 设置最大尺寸
  
• layout_constraintWidth_percent 和layout_constraintHeight_percent : 设置相对于父布局尺寸的的百分比
  

Min和Max

这些值可以用dp设置，也可以用"wrap", 与WRAP_CONTENT设置雷同。
百分比尺寸

若要使用百分比,必要有如下设置：

• 尺寸必要设置成MATCH_CONSTRAINT (0dp)
  
• 默认应该设置百分比 app:layout_constraintWidth_default="percent" 或者app:layout_constraintHeight_default="percent"
  
• 属性设置layout_constraintWidth_percent 或layout_constraintHeight_percent 数值范围为0 到1
  

比率

可以界说一个尺寸相对于另一个尺寸的比率，应用比率必要设置至少一个尺寸的值为0dp (或MATCH_CONSTRAINT), 同时必要设置属性layout_constraintDimensionRatio的比率数值。比方：

1.           <Button android:layout_width="wrap_content"
2.                   android:layout_height="0dp"
3.                   app:layout_constraintDimensionRatio="1:1" />
4.         

复制代码

上述代码意思是，宽高比率为1：1。
比率值可以表达的意思有两种

• float数值, 代表宽 / 高比率数值
  
• 比例数值，代表"宽 : 高"
  

如果两个尺寸都设置为MATCH_CONSTRAINT (0dp). 在这种情况下，体系会设置最大的尺寸来满足全部束缚和指定的比率。若要在一个尺寸的基础上指定另一个尺寸，必要用“ W," 或 “ H”,分别限定宽和高。比方，若一个尺寸被两个束缚（宽为0dp且居中）设定，那么要束缚另一个尺寸必要在比率前面添加字母W (束缚宽度)或 H (束缚高度)，比方：

1.           <Button android:layout_width="0dp"
2.                   android:layout_height="0dp"
3.                   app:layout_constraintDimensionRatio="H,16:9"
4.                   app:layout_constraintBottom_toBottomOf="parent"
5.                   app:layout_constraintTop_toTopOf="parent"/>
6.         

复制代码

上述代码的意思是，按钮的宽高比为16：9，宽度为父布局宽度。
7. 链式布局

1. 链条是一组控件在单个轴（水平或垂直）上的布局。另一个轴的约束是独立的。

复制代码

创建链条

一组控件被当作链条是由于控件之间通过双向链接在一起。
链条头

链条布局被第一个元素的属性控制。
链条头是水平链条的最左边控件，或垂直链条的最上边控件。
链条边距

链条连接中边距如果被指定了，它们将被考虑在内。在分散链条时，边距将在分配空间时被计算在内。
链条风格

当在链条的第一个元素上设置属性layout_constraintHorizontal_chainStyle 或layout_constraintVertical_chainStyle时,链条将会按照指定的风格（默认风格CHAIN_SPREAD）改变.

• CHAIN_SPREAD -- 元素将要被分散 (默认风格)
  
• 权重链 -- 在 CHAIN_SPREAD 模式中,如果一些控件被指定为MATCH_CONSTRAINT, 它们将分割可得到的空间。
  
• CHAIN_SPREAD_INSIDE -- 类似, 链条的结点不会被分散
  
• CHAIN_PACKED -- 链条的元素被打包到一起。子控件的水平或垂直属性将会影响被打包元素的位置
  

权重链

链条默认分给元素雷同的空间。如果一个或者更多控件用MATCH_CONSTRAINT, 它们将得到空的空间 (在它们中被雷同的分割). 在元素用MATCH_CONSTRAINT后，属性layout_constraintHorizontal_weight 和layout_constraintVertical_weight 可以控制将怎样分配空间。比方，如果一个链条包罗两个元素用MATCH_CONSTRAINT, 第一个元素用权重数值为2 ，另一个为1，那么第一个元素占用空间是第二个的两倍。
边距

当在链条中用边距时，边距是累加的。比方，水平链条上，一个元素距离右边10dp，下一个元素距离左边5dp，那么结果边距是两个元素的和是15dp。
在计算剩余空间定位全部元素时，每个元素和它的全部边距都应该被考虑在内。剩余空间不包罗边距。
8. 虚拟辅助控件

除了上述功能以外，也可以用辅助控件来帮助布局。当前有Guideline控件允许创建水平和垂直引导线去定位相对于ConstraintLayout 布局的位置.。控件通过引导线的束缚来定位位置。Barrier 和Group也可以。
9. 优化器

通过app:layout_optimizationLevel使用优化器：

• none : 不消优化器
  
• standard : 默认. 只优化direct 和barrier 束缚
  
• direct : 优化direct 束缚
  
• barrier : 优化barrier 束缚
  
• chain : 优化chain 束缚(实验性)
  
• dimensions : 优化dimensions 测量(实验性),淘汰匹配束缚元素的测量的数目
  

属性值是一个掩码mask值，可以设置多个优化项目，比方：app:layout_optimizationLevel="direct|barrier|chain"










保举文章
ConstraintLayout  |  Android Developers
https://zhuanlan.zhihu.com/p/44666184

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。