Android中的ConstraintLayout

简介

ConstraintLayout是Android平台上的一种布局，它比传统的相对布局和线性布局更加灵活且易于使用。ConstraintLayout基于约束来定义视图的位置和大小，这些约束可以是视图之间的相对关系或视图到父容器边界的关系。ConstraintLayout可以在平台版本14及以上使用。

优势

• 灵活性：ConstraintLayout可以在多种设备上呈现不同的布局，适用于各种尺寸和分辨率。
• 减少布局层级：通过使用约束，开发人员可以减少布局层级，提高性能。
• 可视化编辑：在Android Studio中可以使用布局编辑器可视化地创建和编辑约束布局。
• 自动调整：当屏幕大小发生变化时，ConstraintLayout可以自动调整视图的大小和位置。

使用

添加依赖

在项目的build.gradle文件中添加以下依赖：

implementation 'androidx.constraintlayout:constraintlayout:2.1.0'

创建约束布局

使用ConstraintLayout创建一个简单的布局示例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/title"
        android:text="Hello World!"
        android:textSize="24sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <Button
        android:id="@+id/button"
        android:text="Click me"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在上述示例中，我们使用了 ConstraintLayout 和两个视图： TextView 和 Button。 TextView 放在最上面，Button 放在 TextView 下面。我们使用 app:layout_constraintTop_toTopOf 和 app:layout_constraintTop_toBottomOf 确定它们相对于父元素和彼此的位置。

约束

约束是 ConstraintLayout的核心，它使我们可以通过相对位置来定位视图。以下是一些示例：

设置视图的左边约束：

app:layout_constraintStart_toStartOf="parent"

设置视图的右边约束：

app:layout_constraintEnd_toEndOf="parent"

设置视图的顶部约束：

app:layout_constraintTop_toTopOf="parent"

设置视图的底部约束：

app:layout_constraintBottom_toBottomOf="parent"

设置视图上下左右的间距：

app:layout_constraintMarginStart="16dp"
app:layout_constraintMarginTop="16dp"
app:layout_constraintMarginEnd="16dp"
app:layout_constraintMarginBottom="16dp"

设置视图相对于其他视图的位置：

app:layout_constraintStart_toEndOf="@+id/otherView"
app:layout_constraintEnd_toStartOf="@+id/otherView"
app:layout_constraintTop_toBottomOf="@+id/otherView"
app:layout_constraintBottom_toTopOf="@+id/otherView"

当然，还有更多的约束可用。

使用链

链是一组视图，它们根据同一约束分组，形成一个单元。可以将子视图分组到水平或垂直链中。我们可以通过 app:layout_constraintHorizontal_chainStyle 和 app:layout_constraintVertical_chainStyle 属性来确定链的样式。

以下是一个示例：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/left_button"
        android:text="Left button"
        app:layout_constraintStart_toStartOf="parent"/>

    <Button
        android:id="@+id/middle_button"
        android:text="Middle button"
        app:layout_constraintStart_toEndOf="@+id/left_button"
        app:layout_constraintEnd_toStartOf="@+id/right_button"/>

    <Button
        android:id="@+id/right_button"
        android:text="Right button"
        app:layout_constraintEnd_toEndOf="parent"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp"/>

    <Button
        android:id="@+id/above_button"
        android:text="Above guideline"
        app:layout_constraintRight_toLeftOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/below_button"
        android:text="Below guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/above_button"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        app:constraint_referenced_ids="left_button,middle_button,right_button"/>

</androidx.constraintlayout.widget.ConstraintLayout>

在上述示例中，我们使用了三个 Button 和一个 Guideline。左侧和右侧的按钮左右对齐，中间的按钮相对于两侧的按钮垂直居中，并使用水平链接将按钮分组。另外，上下的按钮使用垂直链接，并且顶部的按钮位于一个指南线上，下面的按钮位于其下方。

可见性

可以像其他视图一样将 ConstraintLayout 上的视图设置为不可见或可见。我们可以使用 app:layout_constraintHorizontal_bias 和 app:layout_constraintVertical_bias 属性来定义组件在其区域内的位置。

以下是一个示例：

<Button
    android:id="@+id/button"
    android:text="Click me"
    android:visibility="invisible"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintVertical_bias="0.5"/>

在上述示例中，我们使用了 app:layout_constraintHorizontal_bias 和 app:layout_constraintVertical_bias 属性，使按钮始终位于其区域的中央。我将可见性设置为不可见，因此按钮将不会显示在屏幕上。

结论

通过使用 ConstraintLayout，我们可以创建具有自适应性和可访问性的高度优化的布局。它提供了多种约束来定位视图，使您可以创建复杂的布局，而无需增加布局层次结构。ConstraintLayout是一种非常灵活的布局，目前已被广泛应用于许多Android应用程序中。