Android ConstrainLayout用法详解_constrainlayout库怎么添加-CSDN博客

本文链接：https://blog.csdn.net/XHRK1/article/details/147480298

1. 什么是 ConstraintLayout？

ConstraintLayout 是 Android Jetpack 提供的一种高级布局容器，它通过在视图之间建立“约束”来确定位置和大小，避免了嵌套多层布局的问题。

2. 为什么使用 ConstraintLayout？

扁平布局：减少 View 层级，提高渲染效率。
灵活强大：单个容器内即可实现相对布局、线性布局、帧布局等效果。
适配方便：配合百分比约束、链式分布，轻松应对不同屏幕。

3. 前置准备

Android Studio 4.0+

在 app/build.gradle 中确认已添加依赖：

plaintext

1	implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

熟悉基本的 XML 布局语法。

4. 基础概念

4.1 约束（Constraint）

表示“我这个 View 的哪条边要对齐到目标 View（或父容器）的哪条边”，属性格式：

plaintext

1	app:layout_constraint<我的边>_to<目标边>Of="<目标 id\|parent>"

例：app:layout_constraintStart_toStartOf="parent" 表示“左边对齐父容器左边”。

4.2 0dp 与拉伸填充

当你希望 View 在某个方向“填满”两端约束时，需要把对应方向的 layout_width 或 layout_height 设为 0dp。

plaintext

1
2
3

android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

解释：0dp 不是真 0 宽度，而是“用两端约束的距离决定宽度”。

4.3 宽高比例（DimensionRatio）

让 View 按一定宽高比显示：

plaintext

1	app:layout_constraintDimensionRatio="W,16:9"

含义：根据宽度算高度，比例 16:9。若写 H,4:3，则根据高度算宽度。

4.4 Bias（偏移）

当一个方向有两端约束，你想调整它在两端之间的位置，使用：

plaintext

1	app:layout_constraintHorizontal_bias="0.2"

取值 0.0～1.0，0.5 表示居中。

5. 在 XML 中创建最简单的 ConstraintLayout

plaintext

<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/hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello ConstraintLayout!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

该 TextView 顶部对齐父容器，上边距 16dp，水平居中。

6. 深入理解：常用约束属性详解

属性	作用	示例
layout_constraintStart_toStartOf	我的 Start 边 → 目标 Start 边	app:layout_constraintStart_toStartOf=”@id/foo”
layout_constraintStart_toEndOf	我的 Start 边 → 目标 End 边	app:layout_constraintStart_toEndOf=”@id/foo”
layout_constraintEnd_toStartOf	我的 End 边 → 目标 Start 边	app:layout_constraintEnd_toStartOf=”@id/foo”
layout_constraintEnd_toEndOf	我的 End 边 → 目标 End 边	app:layout_constraintEnd_toEndOf=”parent”
layout_constraintTop_toTopOf	我的 Top 边 → 目标 Top 边	app:layout_constraintTop_toTopOf=”parent”
layout_constraintTop_toBottomOf	我的 Top 边 → 目标 Bottom 边	app:layout_constraintTop_toBottomOf=”@id/foo”
layout_constraintBottom_toTopOf	我的 Bottom 边 → 目标 Top 边	app:layout_constraintBottom_toTopOf=”@id/foo”
layout_constraintBottom_toBottomOf	我的 Bottom 边 → 目标 Bottom 边	app:layout_constraintBottom_toBottomOf=”parent”
layout_constraintBaseline_toBaselineOf	基线对齐（文字/按钮）	app:layout_constraintBaseline_toBaselineOf=”@id/foo”
layout_constraintHorizontal_bias	水平偏移，0-1	app:layout_constraintHorizontal_bias=”0.3”
layout_constraintVertical_bias	垂直偏移，0-1	app:layout_constraintVertical_bias=”0.7”

Tip：一个方向至少要有两个约束（如 Start 和 End）或一个约束 + 固定大小，否则布局不完整会报错。

7. 实战示例：登录界面

界面效果：

居中显示一个 ImageView，半径 80dp
下方一个用户名输入框，下方密码输入框
底部一个登录按钮，水平填充并有左右间距

plaintext

<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"
    android:padding="16dp">

    <!-- 1. 头像 -->
    <ImageView
        android:id="@+id/avatar"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:src="@drawable/ic_avatar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="48dp"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="1:1"/>

    <!-- 2. 用户名 -->
    <EditText
        android:id="@+id/et_username"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="用户名"
        app:layout_constraintTop_toBottomOf="@id/avatar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"/>

    <!-- 3. 密码 -->
    <EditText
        android:id="@+id/et_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="密码"
        android:inputType="textPassword"
        app:layout_constraintTop_toBottomOf="@id/et_username"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

    <!-- 4. 登录按钮 -->
    <Button
        android:id="@+id/btn_login"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:text="登录"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_password"
        android:layout_marginTop="32dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

代码解析：

头像：固定宽高 160dp，并用 dimensionRatio="1:1" 保持正方形；水平居中，上边距 48dp。
输入框：宽度设 0dp，并约束两端到父容器，实现水平填充；垂直方向依次约束。
按钮：同样 0dp + 两端约束，实现宽度填满，中间有默认 16dp 间距（来自外层 padding）。

8. 常见辅助组件

8.1 Guideline（辅助线）

不可见的参考线，用于多个控件统一对齐。
属性：app:layout_constraintGuide_begin/end/percent + orientation。

8.2 Barrier（障碍）

动态对齐一组控件的最边缘位置。
属性：app:barrierDirection + app:constraint_referenced_ids。

8.3 Chain（链式分布）

在水平方向或垂直方向把一系列控件组成链。
在中间某个控件上设置 app:layout_constraintHorizontal_chainStyle 为 spread/packed/spread_inside。

8.4 Flow（流式布局，需要依赖 helper 库）

类似 Flexbox，自动换行、间距、对齐。
属性以 app:flow_* 开头。

9. Android Studio 设计器使用技巧

切换到 Design 视图，拖拽控件到画布并拖动箭头创建约束。
在 Attributes 面板中编辑约束属性，无需手写 XML。
使用 Blueprint 视图查看所有约束关系。

10. 运行时动态修改布局

plaintext

val root: ConstraintLayout = findViewById(R.id.root)
val set = ConstraintSet()
// 从当前布局克隆
set.clone(root)
// 修改某个视图的约束
set.connect(R.id.btn_login, ConstraintSet.TOP, R.id.et_password, ConstraintSet.BOTTOM, 48)
// 开启动画过渡
TransitionManager.beginDelayedTransition(root)
set.applyTo(root)