ConstraintLayout 基础教程，深入浅出，从零开始！

2023-12-05 22:40:16

前言

ConstraintLayout 是 Android 开发中一款强大而灵活的布局管理器，它可以让开发者轻松创建复杂且动态的 UI 布局。本教程将为你提供 ConstraintLayout 的基础知识，并通过循序渐进的例子，帮助你掌握其用法和技巧。

ConstraintLayout 的基本概念

ConstraintLayout 的核心思想在于使用约束（Constraints）来定义控件之间的关系。约束可以规定控件相对于其他控件、父容器或屏幕边缘的位置、尺寸或对齐方式。通过灵活运用这些约束，你可以创建出适应不同屏幕尺寸和方向变化的布局。

ConstraintLayout 的优势

灵活性强： ConstraintLayout 允许你轻松创建复杂的布局，而无需使用嵌套布局或复杂的代码。
动态性好： 约束可以动态更新，这意味着你可以轻松实现动画或响应屏幕大小变化的布局。
性能优化： ConstraintLayout 通过有效地管理控件的布局，提高了布局性能和应用程序的整体响应速度。

GONE 控件的特殊处理

ConstraintLayout 对标记为 View.GONE 的控件（称为 GONE 控件）有特殊的处理方式。一般情况下，GONE 控件是不可见的，并且不会占用任何空间。然而，在某些情况下，GONE 控件仍然会影响其他控件的布局行为。例如：

占用空间： GONE 控件可能会在计算其他控件的布局时占用空间，从而影响控件的最终位置和尺寸。
边界约束： GONE 控件可以被用来定义其他控件的边界约束，即使它们不可见。
链式约束： GONE 控件可以作为链式约束的一部分，即使它们不可见。

ConstraintLayout 基础示例

布局文件（XML）：

<?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/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本2"
        app:layout_constraintStart_toEndOf="@+id/text1"
        app:layout_constraintTop_toTopOf="@+id/text1" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java 代码：

TextView text1 = findViewById(R.id.text1);
TextView text2 = findViewById(R.id.text2);

// 将 text2 设置为 GONE
text2.setVisibility(View.GONE);

// 获取 text1 的约束集
ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) text1.getLayoutParams();

// 更新 text1 的约束，使其相对于父布局居中对齐
params.startToStart = ConstraintLayout.LayoutParams.PARENT_ID;
params.endToEnd = ConstraintLayout.LayoutParams.PARENT_ID;
text1.setLayoutParams(params);