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

安卓开发--ConstraintLayout（约束布局）

news 2025/11/11 8:00:24

1. 核心约束属性

属性

说明

app:layout_constraintLeft_toLeftOf

将控件的左边与另一个控件的左边对齐

app:layout_constraintLeft_toRightOf

将控件的左边与另一个控件的右边对齐

app:layout_constraintRight_toLeftOf

将控件的右边与另一个控件的左边对齐

app:layout_constraintRight_toRightOf

将控件的右边与另一个控件的右边对齐

app:layout_constraintTop_toTopOf

将控件的顶部与另一个控件的顶部对齐

app:layout_constraintTop_toBottomOf

将控件的顶部与另一个控件的底部对齐

app:layout_constraintBottom_toTopOf

将控件的底部与另一个控件的顶部对齐

app:layout_constraintBottom_toBottomOf

将控件的底部与另一个控件的底部对齐

app:layout_constraintStart_toStartOf

将控件的开始边与另一个控件的开始边对齐

app:layout_constraintStart_toEndOf

将控件的开始边与另一个控件的结束边对齐

app:layout_constraintEnd_toStartOf

将控件的结束边与另一个控件的开始边对齐

app:layout_constraintEnd_toEndOf

将控件的结束边与另一个控件的结束边对齐

app:layout_constraintBaseline_toBaselineOf

将一个控件的基线（baseline）与另一个控件的基线对齐

实例：

<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintBottom_toBottomOf="parent"/><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 1"app:layout_constraintLeft_toLeftOf="@id/button"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 2"app:layout_constraintLeft_toRightOf="@id/button"/><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 3"app:layout_constraintRight_toLeftOf="@id/button"/><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 4"app:layout_constraintRight_toRightOf="@id/button"/><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 5"app:layout_constraintTop_toTopOf="@id/button"/><Buttonandroid:id="@+id/button6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 6"app:layout_constraintTop_toBottomOf="@id/button"/><Buttonandroid:id="@+id/button7"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 7"app:layout_constraintBottom_toTopOf="@id/button"/><Buttonandroid:id="@+id/button8"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 8"app:layout_constraintBottom_toBottomOf="@id/button"/><Buttonandroid:id="@+id/button9"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 9"app:layout_constraintBaseline_toBaselineOf="@id/button"/></androidx.constraintlayout.widget.ConstraintLayout>

图示

2.高级布局技术

Ratio比例尺寸：

实例

<!-- 16:9 比例的 ImageView --><ImageViewandroid:layout_width="0dp"android:layout_height="0dp"app:layout_constraintDimensionRatio="H,16:9"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"/>

Weight权重

实例

<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><Buttonandroid:id="@+id/button1"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintHorizontal_weight="1"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/button2"android:text="button1"/><Buttonandroid:id="@+id/button2"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintHorizontal_weight="2"app:layout_constraintLeft_toRightOf="@id/button1"app:layout_constraintRight_toRightOf="parent"android:text="button2"/></androidx.constraintlayout.widget.ConstraintLayout>

图示

Chains链

实例：三个按钮将水平排列，且间距由链式约束自动分配。

<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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:layout_marginTop="50dp"><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintHorizontal_chainStyle="spread"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toLeftOf="@id/button2"android:text="button1"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintLeft_toRightOf="@id/button1"app:layout_constraintRight_toLeftOf="@id/button3"android:text="button2"/><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintLeft_toRightOf="@id/button2"app:layout_constraintRight_toRightOf="parent"android:text="button3"/></androidx.constraintlayout.widget.ConstraintLayout>

图示

Barrier屏障

实例

<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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:layout_marginTop="50dp"><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="可能很长的文本1"/><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="可能更长的文本2"app:layout_constraintTop_toBottomOf="@id/text1"/><TextViewandroid:id="@+id/text3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="可能很长的文本3"app:layout_constraintTop_toBottomOf="@id/text2"/><TextViewandroid:id="@+id/text4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="可能更长的文本4"app:layout_constraintTop_toBottomOf="@id/text3"/><androidx.constraintlayout.widget.Barrierandroid:id="@+id/barrier"android:layout_width="wrap_content"android:layout_height="wrap_content"app:barrierDirection="end"app:constraint_referenced_ids="text1,text2"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮"app:layout_constraintLeft_toRightOf="@id/barrier"/></androidx.constraintlayout.widget.ConstraintLayout>

Guideline引导线

实例

<androidx.constraintlayout.widget.Guidelineandroid:id="@+id/guideline"android:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"app:layout_constraintGuide_percent="0.3"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按钮"app:layout_constraintLeft_toLeftOf="@id/guideline"/>

    图示：

    3.特殊组件

    Group：主要用于批量控制多个视图的属性，常见的操作包括设置透明度、可见性

    实例

    <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><!-- Group 用于容纳多个视图 --><androidx.constraintlayout.widget.Groupandroid:id="@+id/group"app:constraint_referenced_ids="view1, view2, view3"android:visibility="gone" android:layout_width="wrap_content"android:layout_height="wrap_content"/><TextViewandroid:id="@+id/view1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView 1"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"/><TextViewandroid:id="@+id/view2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView 2"app:layout_constraintTop_toBottomOf="@id/view1"app:layout_constraintStart_toStartOf="parent"/><TextViewandroid:id="@+id/view3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView 3"app:layout_constraintTop_toBottomOf="@id/view2"app:layout_constraintStart_toStartOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout>

    Layer

    是一个虚拟的视图容器，它可以将多个子视图合成一个图层，然后对这个图层进行统一的变换，比如旋转（rotation）、缩放（scale）、平移（translation）、透明度（alpha）等。它适合做动画或对多视图整体做视觉效果处理。Group 只能控制视图的可见性、透明度等属性，但不能对视图做旋转、缩放等变换。Layer 则能像对单个视图那样，对包含的多个视图整体进行变换。

    主要属性和方法：

    setRotation(float rotation)：旋转图层

    setScaleX(float scaleX) / setScaleY(float scaleY)：缩放

    setTranslationX(float translationX) / setTranslationY(float translationY)：平移

    setAlpha(float alpha)：透明度

    setVisibility(int visibility)：可见性

    实例

    Activity_main.xml

    <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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"><!-- 定义Layer --><androidx.constraintlayout.helper.widget.Layerandroid:id="@+id/layer"app:constraint_referenced_ids="view1,view2,view3"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent" /><TextViewandroid:id="@+id/view1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="View 1"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent" /><TextViewandroid:id="@+id/view2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="View 2"app:layout_constraintTop_toBottomOf="@id/view1"app:layout_constraintStart_toStartOf="parent" /><TextViewandroid:id="@+id/view3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="View 3"app:layout_constraintTop_toBottomOf="@id/view2"app:layout_constraintStart_toStartOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>

    MainActivity.java

    public class MainActivity extends AppCompatActivity {private final static String TAG = "MainActivity";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Layer layer = findViewById(R.id.layer);// 旋转整个Layer 45度layer.setRotation(45f);// 缩放到 0.8 倍大小layer.setScaleX(0.8f);layer.setScaleY(0.8f);// 设置透明度为 50%layer.setAlpha(0.5f);// 平移图层layer.setTranslationX(100f);layer.setTranslationY(50f);}
}

    Flow

    主要用于实现动态的、多列或多行排列视图。Flow 可以自动调整其子视图的排列方式，支持水平或垂直方向的流式布局，特别适合处理元素数量不固定且布局复杂的场景。

    Flow 视图会根据子视图的数量和指定的方向（水平或垂直）自动排列其子视图，支持多行或多列布局。它的核心特性包括：

    方向：你可以设置流式布局的方向，是水平流（HORIZONTAL）还是垂直流（VERTICAL）。

    子视图的间距：可以设置子视图之间的间距，包括水平间距和垂直间距。

    最大子视图数量：可以设置每行或每列显示的最大子视图数量，一旦达到最大数目，剩余的视图会自动换行或换列。

    流式布局的自适应：Flow 自动计算布局空间，因此不需要手动调整每个视图的位置。

    Flow 的属性

    属性

    说明

    app:constraint_referenced_ids

    指定要管理的视图ID列表（逗号分隔）

    app:flow_wrapMode

    换行模式（none/chain/aligned）

    app:flow_horizontalStyle

    水平排列样式（spread/spread_inside/packed）

    app:flow_verticalStyle

    垂直排列样式（spread/spread_inside/packed）

    app:flow_horizontalGap

    水平间距

    app:flow_verticalGap

    垂直间距

    app:flow_horizontalBias

    水平偏移（0-1）

    app:flow_verticalBias

    垂直偏移（0-1）

    app:flow_maxElementsWrap

    每行/列最大元素数

    换行模式（wrapMode）

    模式

    说明

    none

    不换行，所有视图排成一行/列

    chain

    换行时保持链式约束

    aligned

    换行时对齐到网格

    Flow 的常见使用场景

    用于动态生成的内容，特别适合处理标签、按钮、图像等多个视图元素。

    支持不同尺寸和不规则数量的元素，且不需要使用复杂的代码来计算布局。

    可以使界面在屏幕尺寸不同的设备上更加灵活和自适应。

    实例：简单水平流式布局

    <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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.helper.widget.Flowandroid:id="@+id/flow"android:layout_width="0dp"android:layout_height="wrap_content"app:constraint_referenced_ids="btn1,btn2,btn3,btn4,btn5"app:flow_wrapMode="chain"app:flow_horizontalGap="8dp"app:flow_verticalGap="8dp"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toEndOf="parent"/><Buttonandroid:id="@+id/btn1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 1"/><Buttonandroid:id="@+id/btn2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 2"/><Buttonandroid:id="@+id/btn3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 3"/><Buttonandroid:id="@+id/btn4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 4"/><Buttonandroid:id="@+id/btn5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 5"/></androidx.constraintlayout.widget.ConstraintLayout>

    图示

    实例：垂直流式布局（按钮水平平行）

    <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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.helper.widget.Flowandroid:layout_width="wrap_content"android:layout_height="0dp"app:constraint_referenced_ids="btn1,btn2,btn3"app:flow_wrapMode="aligned"app:flow_verticalStyle="packed"app:flow_verticalGap="16dp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"/><Buttonandroid:id="@+id/btn1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 1"/><Buttonandroid:id="@+id/btn2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 2"/><Buttonandroid:id="@+id/btn3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button 3"/></androidx.constraintlayout.widget.ConstraintLayout>

    图示

    实例：标签云实现

    <androidx.constraintlayout.widget.ConstraintLayoutxmlns: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.helper.widget.Flowandroid:layout_width="0dp"android:layout_height="wrap_content"app:constraint_referenced_ids="tag1,tag2,tag3,tag4,tag5"app:flow_wrapMode="aligned"app:flow_horizontalGap="8dp"app:flow_verticalGap="8dp"app:flow_horizontalStyle="spread_inside"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toEndOf="parent" /><TextViewandroid:id="@+id/tag1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="#Android"/><TextViewandroid:id="@+id/tag2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="#Android"/><TextViewandroid:id="@+id/tag3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="#Android"/><TextViewandroid:id="@+id/tag4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="#Android"/><TextViewandroid:id="@+id/tag5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="#Android"/></androidx.constraintlayout.widget.ConstraintLayout>

    图示

    应用实例

    <androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="120dp"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><!-- 头像 --><ImageViewandroid:id="@+id/avatar"android:layout_width="80dp"android:layout_height="80dp"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"android:layout_margin="16dp"android:src="@drawable/ic_launcher_background"/><!-- 用户名 --><TextViewandroid:id="@+id/username"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintTop_toTopOf="@id/avatar"app:layout_constraintLeft_toRightOf="@id/avatar"app:layout_constraintRight_toLeftOf="@id/follow_button"android:layout_marginLeft="16dp"android:textSize="18sp"android:text="xixi"/><!-- 用户描述 --><TextViewandroid:id="@+id/description"android:layout_width="0dp"android:layout_height="wrap_content"app:layout_constraintTop_toBottomOf="@id/username"app:layout_constraintLeft_toLeftOf="@id/username"app:layout_constraintRight_toRightOf="@id/username"android:layout_marginTop="8dp"android:maxLines="2"android:text="我喜欢英语"/><!-- 关注按钮 --><Buttonandroid:id="@+id/follow_button"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"android:layout_margin="16dp"android:text="按钮"/></androidx.constraintlayout.widget.ConstraintLayout>

    图示

    http://www.dtcms.com/a/314907.html

    相关文章：

  1. 5天挑战网络编程 -DAY1（linux版）
  2. 二十年代深度立体匹配的进化与前沿综述
  3. 咖啡参考基因组
  4. 机器学习 入门——决策树分类
  5. FreeRTOS源码分析四：时钟中断处理响应流程
  6. 倒排索引：Elasticsearch 搜索背后的底层原理
  7. 【C#】Blazor基本应用
  8. ICCV2025 Tracking相关paper汇总和解读（19篇）
  9. Matlab(2)
  10. Maven配置，Idea集成Maven_依赖引入,Idea生成单元测试
  11. 《AI Agent工程师（初级）》
  12. ubuntu24.01安装odoo18
  13. gdb print设置技巧，离线查看复杂结构体和数组变量内容，展开多层嵌套的结构体的方法
  14. 【Docker安装】Ubuntu 24.04.2 LTS系统下安装Docker环境——指定APT源安装方式
  15. C + +
  16. 宝塔运维实战：CentOs7启动PHP7.4失败
  17. 华为OD机考2025C卷 - 最小矩阵宽度（Java Python JS C++ C ）
  18. Linux下PXE服务器搭建
  19. 嵌入式数据结构笔记（二）：内存工具与链表操作
  20. QT 如何实现enum与字符串的互转
  21. Java基础学习（一）：类名规范、返回值、注释、数据类型
  22. 【QT】安装与配置
  23. 应急响应复现
  24. Java 课程，每天解读一个简单Java之正整数分解质因数
  25. 字符集选择utf8mb4
  26. android内存作假通杀补丁（4GB作假8GB）
  27. 自动寻迹小车介绍、原理及应用场景
  28. GoLand 项目从 0 到 1：第四天 —— 技术选型落地与方案设计
  29. onnxruntime配置开启ACL加速Arm上的模型推理
  30. 《Python 实用项目与工具制作指南》· 3.2 实战·开发密码管理器