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功能有如下几种：

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

记住，依赖关系中不能有循环依赖关系。

1. 相对位置

类似于RelativeLayout功能。

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

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

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

例如：

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

上述代码限定按钮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

例如：

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

2. 边距

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

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

记住，边距只能>=0,采用维度设置。

3. 中心和偏移位置

中心位置

水平中心位置如下：

        <androidx.constraintlayout.widget.ConstraintLayout ...>
            <Button android:id="@+id/button" ...
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"/>
        </>

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

偏移位置

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

例如：相对于水平偏移0.3

        <androidx.constraintlayout.widget.ConstraintLayout ...>
            <Button android:id="@+id/button" ...
                app:layout_constraintHorizontal_bias="0.3"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"/>
        </>

4. 圆形位置

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

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

例如：

 <Button android:id="@+id/buttonA" ... />
 <Button android:id="@+id/buttonB" ...
     app:layout_constraintCircle="@+id/buttonA"
     app:layout_constraintCircleRadius="100dp"
     app:layout_constraintCircleAngle="45" />

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属性的示例

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="这是一个很长的文本，用于测试 layout_constrainedwidth 属性"
    app:layout_constrainedWidth="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:ellipsize="end"
    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的比率数值。例如：

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

上述代码意思是，宽高比率为1：1。

比率值可以表达的意思有两种

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

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

          <Button android:layout_width="0dp"
                  android:layout_height="0dp"
                  app:layout_constraintDimensionRatio="H,16:9"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintTop_toTopOf="parent"/>

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

7. 链式布局

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

创建链条

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

链条头

链条布局被第一个元素的属性控制。

链条头是水平链条的最左边控件，或垂直链条的最上边控件。

链条边距

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

链条风格

当在链条的第一个元素上设置属性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"

秒客网

Android详解——ConstraintLayout约束布局

一、ConstraintLayout概述

二、ConstraintLayout属性介绍

1. 相对位置

2. 边距

3. 中心和偏移位置

中心位置

偏移位置

4. 圆形位置

5. 可见性

6. 尺寸约束

最小尺寸

WRAP_CONTENT :强制约束

MATCH_CONSTRAINT

Min和Max

百分比尺寸

比率

7. 链式布局

创建链条

链条头

链条边距

链条风格

权重链

边距

8. 虚拟辅助控件

9. 优化器

相关文章