当前位置： 首页 > article >正文

android ConstraintLayout布局 实战：打造复杂界面的最佳实践

article 2025/3/17 13:07:02

ConstraintLayout 的核心思想是通过 约束（Constraints） 来定义视图之间的关系。每个视图都需要在水平和垂直方向上至少有一个约束，否则视图会默认放置在左上角（0,0）位置。

约束的类型
相对于父布局的约束：将视图的边与父布局的边对齐。

加粗样式相对于其他视图的约束：将视图的边与其他视图的边对齐。

引导线（Guideline）：一种不可见的辅助线，用于创建动态约束。

屏障（Barrier）：根据一组视图的动态位置自动调整约束。

链（Chain）：将多个视图在水平或垂直方向上连接起来，形成一种特殊的关系。

在 build.gradle 中添加 ConstraintLayout 的依赖：

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.0'
}

下面我会通过 详细的示例 来讲解 ConstraintLayout 的使用，涵盖基本布局、引导线、链、屏障、组以及动态修改约束等内容。每个示例都会附带代码和说明。

1. 基本布局示例
目标：实现一个简单的界面，包含两个按钮和一个文本框。
按钮1位于左上角。

按钮2位于右上角。

文本框位于按钮1和按钮2的下方，水平居中。

代码：

<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">

    <!-- 按钮1：左上角 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"/>

    <!-- 按钮2：右上角 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"/>

    <!-- 文本框：水平居中，位于按钮1和按钮2的下方 -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello, ConstraintLayout!"
        android:gravity="center"
        android:padding="16dp"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

说明：
按钮1和按钮2分别通过 app:layout_constraintTop_toTopOf 和 app:layout_constraintStart_toStartOf（或 **app:layout_constraintEnd_toEndOf）**约束到父布局的顶部和左右边缘。

文本框通过 app:layout_constraintTop_toBottomOf 约束到按钮1的下方，并通过 app:layout_constraintStart_toStartOf 和 app:layout_constraintEnd_toEndOf 实现水平居中。

2. 引导线（Guideline）示例
目标：使用垂直引导线将界面分为左右两部分，左侧放置一个按钮，右侧放置一个文本框。
代码：

<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">

    <!-- 垂直引导线，位于父布局的50%位置 -->
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

    <!-- 按钮：位于引导线左侧 -->
    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/guideline"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"/>

    <!-- 文本框：位于引导线右侧 -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is the right side."
        android:gravity="center"
        android:padding="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

说明：
引导线通过 app:layout_constraintGuide_percent=“0.5” 将界面分为左右两部分。

按钮的 app:layout_constraintEnd_toStartOf 约束到引导线，文本框的 app:layout_constraintStart_toEndOf 约束到引导线。

3. 链（Chain）示例
目标：创建水平链，包含三个按钮，均匀分布。
代码：

<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">

    <!-- 按钮1：链的起始 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="8dp"/>

    <!-- 按钮2：链的中间 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"/>

    <!-- 按钮3：链的结束 -->
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

说明：
通过 app:layout_constraintHorizontal_chainStyle=“spread” 设置链的类型为均匀分布。

每个按钮通过 app:layout_constraintStart_toEndOf 和 app:layout_constraintEnd_toStartOf 连接到下一个按钮。

4. 屏障（Barrier）示例
目标：根据两个按钮的动态宽度，创建一个屏障，使文本框始终位于较长的按钮下方。
代码：

<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">

    <!-- 按钮1 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Short Button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"/>

    <!-- 按钮2 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Longer Button Text"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/button1"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"/>

    <!-- 屏障：位于按钮1和按钮2的结束边 -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="button1,button2"/>

    <!-- 文本框：位于屏障下方 -->
    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="This is below the longer button."
        android:gravity="center"
        android:padding="16dp"
        app:layout_constraintTop_toBottomOf="@id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

说明：
屏障通过 app:barrierDirection=“end” 动态调整位置，始终位于按钮1和按钮2的结束边。

文本框通过 app:layout_constraintTop_toBottomOf 约束到屏障的下方。

5. 动态修改约束
目标：在代码中动态修改按钮的位置。
代码：

ConstraintLayout constraintLayout = findViewById(R.id.constraintLayout);
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(constraintLayout);

// 将按钮1移动到父布局的右下角
constraintSet.connect(R.id.button1, ConstraintSet.END, ConstraintSet.PARENT_ID, ConstraintSet.END, 16);
constraintSet.connect(R.id.button1, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 16);
constraintSet.applyTo(constraintLayout);

说明：
使用 ConstraintSet 动态修改按钮的约束，将其移动到右下角。

通过这些示例，你可以掌握 ConstraintLayout 的核心用法和高级功能。


http://www.kler.cn/a/588380.html

相关文章：

  • 网络规划设计师软考个人学习资料分享
  • stl之string的详解
  • thefuck是如何帮助你提高命令行效率
  • C#开发笔记：INI文件操作
  • 分别用树型和UML结构展示java集合框架常见接口和类
  • 从Instagram到画廊：社交平台如何改变艺术家的展示方式
  • 掌握Windows命令提示符中的万能符：*号的全方位使用指南
  • Java基础编程练习第32题-定义接口（Biology、Animal）、类（Person）、子类（Pupil）（PTA选题）
  • 使用c#进行串口通信
  • 商品详情页
  • 第7章 站在对象模型的尖端3: RTTI
  • 考研系列-408真题计算机网络篇(10-17)
  • Centos 7 升级 GCC
  • 找第一个只出现一次的字符（信息学奥塞一本通-1130）
  • 基于大模型的智能客服搭建
  • doris：安全概览
  • R语言：初始环境配置
  • 【实战解析】smallredbook.item_get_video API：小红书视频数据获取与电商应用指南
  • 大语言模型基础--task2：大模型技术基础
  • 【Java】高频面试题