【Android从零单排系列三十四】《Android布局介绍——ConstraintLayout》

前言

小伙伴们，在上文中我们介绍了Android帧布局FrameLayout，本文我们继续盘点介绍Android开发中另一个常见的布局，约束布局ConstraintLayout。

一 ConstraintLayout基本介绍

ConstraintLayout是 Android 中的一种灵活且强大的布局容器。它可以帮助开发者在用户界面上创建复杂的布局，并提供了精确控制视图之间关系和位置的能力。

相较于其他布局容器，ConstraintLayout具有以下特点：

1. 灵活性：ConstraintLayout支持通过设置约束条件来定义视图之间的相对位置和尺寸。这意味着你可以根据需要自由调整视图的位置，并确保在不同屏幕尺寸或设备方向下的正确布局。
2. 性能优化：ConstraintLayout针对性能进行了优化，可以减少布局层次以及视图的嵌套。这有助于提高应用程序的响应性能和渲染速度。
3. 嵌套布局的替代：传统的布局容器（如LinearLayout和RelativeLayout）经常需要嵌套多个布局来实现复杂的布局结构。而ConstraintLayout允许将多个视图放置在单个容器内，减少了嵌套和层次深度，提高了布局效率和可读性。
4. 可视化编辑器支持：Android Studio提供了可视化的布局编辑器，使得使用ConstraintLayout更加简便和直观。你可以通过拖拽和调整视图的边界、连接线和约束条件来轻松创建和修改布局。

ConstraintLayout的工作原理是通过设置视图之间的宽度、高度和相对位置的约束条件来实现。开发者可以使用约束条件（如layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等）来定义视图与其他视图或边界的关系，从而精确控制视图在布局中的位置和大小。

二 ConstraintLayout使用方法

添加依赖：首先，在项目的build.gradle文件中，确保已经添加了ConstraintLayout库的依赖。要使用最新版本的ConstraintLayout，请在dependencies块内添加以下行：

implementation 'androidx.constraintlayout:constraintlayout:<version>'

布局文件定义：在布局文件（通常是XML文件）中，以ConstraintLayout作为根容器来定义布局。例如：

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

    <!-- 添加视图元素 -->

</androidx.constraintlayout.widget.ConstraintLayout>

添加视图元素：在 ConstraintLayout 内部添加需要布局的视图元素，例如按钮、文本框等。通过设置视图的 ID 来唯一标识它们。例如：

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me!" />

设置约束条件：使用约束条件来定义视图之间的位置关系。可以将视图与其他视图或父容器的边界进行连接，并指定视图之间的水平和垂直关系等。例如：

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click me!"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

预览和调整布局：在XML文件中，你可以通过预览功能（如Android Studio中的布局编辑器）来查看布局效果，并根据需要进行微调和修改。

完善布局：根据设计需求，继续设置其他视图的约束条件，以达到期望的布局效果。可以使用app:layout_constraint...属性来设置各种约束条件，如边界对齐、居中对齐、权重比例等。

运行应用程序：完成布局后，运行应用程序，并在实际设备或模拟器上查看布局效果。根据需要，可以在运行时动态更改约束条件或视图属性。

三 ConstraintLayout常见属性及方法

1. ConstraintLayout的属性：
   • layout_width：设置视图的宽度。可以使用match_parent（填充父容器）或具体数值。
   • layout_height：设置视图的高度。可以使用match_parent（填充父容器）或具体数值。
2. 约束属性：
   • app:layout_constraintStart_toStartOf：将视图的起始边与给定视图的起始边对齐。
   • app:layout_constraintEnd_toEndOf：将视图的结束边与给定视图的结束边对齐。
   • app:layout_constraintTop_toTopOf：将视图的顶部边与给定视图的顶部边对齐。
   • app:layout_constraintBottom_toBottomOf：将视图的底部边与给定视图的底部边对齐。
   • app:layout_constraintBaseline_toBaselineOf：将视图的基线与给定视图的基线对齐。
   • app:layout_constraintHorizontal_bias：设置视图在水平方向上的偏移比例，范围为0-1。
   • app:layout_constraintVertical_bias：设置视图在垂直方向上的偏移比例，范围为0-1。
   • app:layout_constraintHorizontal_chainStyle：设置水平链条的排列方式，可以是spread（平均分布）、spread_inside（平均分布，不计算边界视图）或packed（紧凑排列）。
   • app:layout_constraintVertical_chainStyle：设置垂直链条的排列方式，可以是spread（平均分布）、spread_inside（平均分布，不计算边界视图）或packed（紧凑排列）。
3. 辅助属性：
   • app:layout_constraintGuide_percent：在容器内创建一个辅助线，并指定其相对位置的百分比。用于对齐其他视图，而不需要真实存在的视图。
4. 辅助方法（在代码中使用）：
   • setHorizontalBias(float bias)：设置视图在水平方向上的偏移比例。
   • setVerticalBias(float bias)：设置视图在垂直方向上的偏移比例。
   • setWidth(int width)：设置视图的宽度。
   • setHeight(int height)：设置视图的高度。
   • setVisibility(int visibility)：设置视图的可见性。
   • 其他常用的视图相关方法，如setOnClickListener()、setText()等。

四 ConstraintLayout简单案例

以下是一个简单的ConstraintLayout案例，展示了如何使用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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/textView2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 2"
        app:layout_constraintTop_toBottomOf="@id/textView1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toBottomOf="@id/textView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在上面的示例中，有三个视图（一个TextView和一个Button），它们使用ConstraintLayout进行布局。

• TextView 1被设置为位于父容器的顶部，并与父容器的左右边缘对齐。同时，它的底部边缘与TextView 2的顶部边缘对齐。
• TextView 2位于TextView 1的底部，并与父容器的左右边缘对齐。同时，它的底部边缘与Button的顶部边缘对齐。
• Button位于TextView 2的底部，并与父容器的左右边缘对齐。同时，它的底部边缘与父容器的底部边缘对齐。

通过这样的约束条件，我们可以实现一种垂直排列的布局，其中TextView 1位于顶部，TextView 2位于其下方，Button位于最底部。你可以根据需要修改和扩展这个简单的案例，以满足实际的界面需求。

五 总结

ConstraintLayout的工作原理是通过设置视图之间的宽度、高度和相对位置的约束条件来实现。开发者可以使用约束条件（如layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等）来定义视图与其他视图或边界的关系，从而精确控制视图在布局中的位置和大小。

总的来说，ConstraintLayout提供了一种灵活且高效的方法来管理和控制 Android 界面元素的布局和交互。