Android ConstraintLayout 使用入门

news2025/1/21 1:02:34

ConstraintLayout是Android中一个非常强大的布局管理器，它可以帮助我们快速创建复杂的布局，并且具有很好的性能和可扩展性。在本文中，我将从面试的角度，详细讲解ConstraintLayout的概念、特点、使用方法和示例。

在这里插入图片描述

概念

ConstraintLayout是Android中的一个布局管理器，它可以根据多个视图之间的约束关系来排列这些视图。ConstraintLayout支持相对定位、基线对齐、链式布局等特性，可以帮助我们快速创建复杂的布局。

特点

  • 相对定位：ConstraintLayout中的视图可以相对于其他视图或父布局进行定位，而不需要使用嵌套布局来实现。
  • 约束关系：ConstraintLayout中的视图之间可以通过约束关系来进行定位，包括水平方向和垂直方向的边距、对齐方式、宽度和高度等。
  • 链式布局：ConstraintLayout支持创建水平或垂直的链式布局，可以方便地创建复杂的布局结构。
  • 响应式布局：ConstraintLayout可以根据屏幕大小和方向自动调整视图的位置和大小，适应不同的设备和屏幕尺寸。

使用方法

引入依赖

在使用ConstraintLayout之前，需要在项目的build.gradle文件中添加以下依赖：

implementation 'androidx.constraintlayout:constraintlayout:2.x.x'

其中，2.x.x表示ConstraintLayout的版本号，目前最新版本为2.1.0。

创建布局

在布局文件中，我们可以使用ConstraintLayout标签来创建一个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">
    <!-- add views here -->
</androidx.constraintlayout.widget.ConstraintLayout>

在ConstraintLayout中，每个视图都需要添加约束关系，以确定它在布局中的位置和大小。约束关系通常包括以下几个方面：

  • 边距：视图与其他视图或父布局的边距关系。
  • 对齐方式：视图与其他视图或父布局的对齐方式。
  • 宽度和高度：视图的宽度和高度。

添加约束关系

在ConstraintLayout中，我们可以使用以下属性来添加约束关系：

  • app:layout_constraintLeft_toLeftOf：表示视图的左边与另一个视图或父布局的左边对齐。
  • app:layout_constraintTop_toTopOf：表示视图的顶部与另一个视图或父布局的顶部对齐。
  • app:layout_constraintRight_toRightOf：表示视图的右边与另一个视图或父布局的右边对齐。
  • app:layout_constraintBottom_toBottomOf：表示视图的底部与另一个视图或父布局的底部对齐。
  • app:layout_constraintStart_toStartOf：表示视图的开始位置与另一个视图或父布局的开始位置对齐（适用于从左到右的布局语言）。
  • app:layout_constraintEnd_toEndOf：表示视图的结束位置与另一个视图或父布局的结束位置对齐（适用于从左到右的布局语言）。
  • app:layout_constraintWidth_percent：表示视图的宽度占父布局宽度的百分比。
  • app:layout_constraintHeight_percent：表示视图的高度占父布局高度的百分比。
  • 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三种。

例如，以下代码演示了如何使用约束关系将一个TextView视图放置在另一个视图的右侧：

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintLeft_toRightOf="@+id/textView1"
    app:layout_constraintTop_toTopOf="parent" />
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

在这个例子中，我们使用app:layout_constraintLeft_toRightOf属性将textView2的左边界与textView1的右边界对齐，将textView2放置在textView1的右侧。

链式布局

在ConstraintLayout中，我们可以使用链式布局来创建水平或垂直的链式布局。链式布局可以将多个视图连接在一起，形成一个链条，并且可以控制链条中每个视图的位置和大小。

以下是一个水平链式布局的示例代码：

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 1"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 2"
    app:layout_constraintLeft_toRightOf="@+id/button1"
    app:layout_constraintTop_toTopOf="@+id/button1"
    app:layout_constraintBaseline_toBaselineOf="@+id/button1" />
<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button 3"
    app:layout_constraintLeft_toRightOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button2"
    app:layout_constraintBaseline_toBaselineOf="@+id/button2" />

在这个例子中，我们使用app:layout_constraintLeft_toRightOf属性将button2的左边界与button1的右边界对齐，将button3的左边界与button2的右边界对齐，形成一个水平链式布局。

辅助工具

为了方便使用ConstraintLayout，Android Studio提供了一些辅助工具，可以帮助我们更加方便地创建和编辑ConstraintLayout布局。

  • 预览面板：在Android Studio的布局编辑器中，可以打开预览面板，实时预览布局的效果。
  • 自动约束：在布局编辑器中，可以通过自动约束功能来自动添加约束关系，减少手动添加约束的工作量。
  • 边距指南：在布局编辑器中，可以通过边距指南来快速添加边距约束关系，提高布局的可读性和可维护性。
  • 线性指南：在布局编辑器中，可以通过线性指南来快速添加线性约束关系，实现简单的链式布局。

示例

以下是一个使用ConstraintLayout实现的简单布局示例：

xml

Copy

<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/textViewTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Title"
    android:textSize="24sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/buttonStart" />

  <Button
      android:id="@+id/buttonStart"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Start"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
      app:layout_constraintRight_toLeftOf="@+id/buttonCancel"
      app:layout_constraintBottom_toTopOf="@+id/buttonCancel"
      android:layout_marginEnd="8dp"
      app:layout_constraintHorizontal_bias="0.5" />

  <Button
      android:id="@+id/buttonCancel"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Cancel"
      app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      android:layout_marginStart="8dp"
      app:layout_constraintHorizontal_bias="0.5" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

在这个示例中，我们使用ConstraintLayout创建了一个简单的布局，包括一个标题TextView和两个按钮Button。标题TextView居中显示，并在上方留出一定的空白间隔，两个按钮水平排列，位于标题TextView下方，且左右两侧对齐。

通过约束关系，我们可以使用相对定位和对齐方式来确定每个视图的位置和大小，使布局看起来更加清晰和易于理解。

总结

ConstraintLayout是Android中一个非常强大的布局管理器，可以帮助我们快速创建复杂的布局，并且具有很好的性能和可扩展性。在使用ConstraintLayout时，我们需要学习如何添加约束关系，使用链式布局和辅助工具来提高效率。通过合理的约束关系，我们可以轻松创建复杂的布局结构，并提高布局的可读性和可维护性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/522769.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

力扣19删除链表的倒数第 N 个结点：思路分析+图文全解+方法总结（快慢指针法递归法）+深入思考

力扣19删除链表的倒数第 N 个结点：思路分析+图文全解+方法总结（快慢指针法递归法）+深入思考

文章目录 第一部分&#xff1a;题目描述第二部分&#xff1a;代码实现2.1 快慢指针法2.2 递归 第一部分&#xff1a;题目描述 &#x1f3e0; 链接&#xff1a;19. 删除链表的倒数第 N 个结点 - 力扣&#xff08;LeetCode&#xff09; ⭐ 难度&#xff1a;中等 第二部分&#…
阅读更多...
Java【网络编程2】 详解基于 UDP 协议的 Socket API, 逐行代码解析如何网络编程

Java【网络编程2】 详解基于 UDP 协议的 Socket API, 逐行代码解析如何网络编程

文章目录 前言一、认识 Socket(套接字), TCP 协议和 UDP 协议1, 什么是 Socket(套接字)2, 浅谈 TCP 协议和 UDP 协议的区别和特点 二、基于 UDP 协议的 Socket API1, DatagramSocket 类2, DatagramPacket 类 三、逐行代码解析网络编程1, 逐行解析客户端1.1, 核心成员方法 start…
阅读更多...
(转载)从0开始学matlab(第2天)—MATLAB 变量的初始化

(转载)从0开始学matlab(第2天)—MATLAB 变量的初始化

当变量初始化时&#xff0c;MATLAB 将会自动建立变量。有三种方式初始化 MATLAB 中的变量&#xff1a; 1 &#xff0e;用赋值语句初始化变量 2 &#xff0e;用 input 函数从键盘输入初始化变量 3 &#xff0e;从文件读取一个数据 前两种方法我们在这里讨论&#xff0c…
阅读更多...
Linux -- 进阶 Web服务器 虚拟主机 -- 基于 域名

Linux -- 进阶 Web服务器 虚拟主机 -- 基于 域名

基于域名的虚拟主机 &#xff1a; 原理 &#xff1a; # 当服务器无法给每个网站都分配一个独立的 IP 地址时&#xff0c;可以通过用户请求的域 名实现不同域名传输不同的网页数据。 域名解析 &#xff1a; 功能 &#xff1a; 域名<>IP &#xff08; 就是 …
阅读更多...
E4A影视APP源码电视盒子酷点TV版4.5 后端对接苹果cms

E4A影视APP源码电视盒子酷点TV版4.5 后端对接苹果cms

E4A影视APP源码电视盒子酷点TV版4.5 后端对接苹果cms 内带演示apk是为了方便大家调试&#xff0c;必应搜索醉里技术博客http://202271.xyz/?tv 此版带会员功能,对接的是 如意验证1.71版苹果cms后端APP 电视TV4.5版, 会员功能带注册邀请,绑定邮箱,邮箱找回密码,修改新密码,卡…
阅读更多...
docker-compose 集成Jenkins部署，打包，发布

docker-compose 集成Jenkins部署，打包，发布

前言 需要提前准备的条件 1.git 2.Maven环境 3.Docker环境 4.JDK环境(Centos7.4自带JDK环境去除&#xff0c;重装的JDK) 5.Nodejs #前端发布使用一、 jenkins部署 下载镜像 #查询镜像 docker search jenkins#下载镜像 docker pull jenkins/jenkins编写docker-compose.yml …
阅读更多...
【音视频开发】基础知识：视频封装格式和编码格式

【音视频开发】基础知识：视频封装格式和编码格式

文章目录 一、封装格式与编码格式的关系视频编码格式视频封装格式MP43GPRM、RMVBAVI、WMVVOBFLVMKVWebMMOVTS 封装格式与编码格式对应 一、封装格式与编码格式的关系 视频编码格式和视频封装格式的关系及区别 这两者的关系好比酒与酒瓶的关系&#xff0c;编码格式好比酒瓶里的…
阅读更多...
Scala 从入门到精通

Scala 从入门到精通

Scala 从入门到精通 scala风格与java风格 public class JavaDemo01 {public static void main(String[] args) {System.out.println("我爱你中国");} }object ScalaDemo01 {def main(args: Array[String]): Unit {println("我爱你中国")} }javac JavaDe…
阅读更多...
24.JT-VUE课堂DEMO

24.JT-VUE课堂DEMO

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>hello 入门案例</title></head><body><div id"app"><h1>双向数据绑定测试</h1><h3>{{ hello }}</h3></div&…
阅读更多...
YOLO环境配置中一些常见的问题

YOLO环境配置中一些常见的问题

在入门YOLO时&#xff0c;环境配置是绕不过的坎&#xff0c;本文希望通过列举一些常见的问题&#xff0c;帮大家解决一些疑难杂症。然而不同的电脑&#xff0c;环境配置是有差异的&#xff0c;本文不可能面面俱到&#xff0c;大家还是要掌握自己上网查问题、解决问题的能力。 …
阅读更多...
easy X（C语言图形化界面）学习

easy X（C语言图形化界面）学习

easy X&#xff08;C语言图形化界面&#xff09;学习 易错&#xff1a;头文件创建窗口 图形填充文字创建输出图片鼠标消息函数(老版)鼠标操作&#xff08;新版&#xff09;键盘消息函数getch() 音乐播放修改窗口标题&#xff0c;弹出框框 易错&#xff1a; 1.文件为&#xff0…
阅读更多...
DDP学习/PyTorch多GPU训练/查看模型在哪个GPU上

DDP学习/PyTorch多GPU训练/查看模型在哪个GPU上

参考&#xff1a; pytorch如何查看tensor和model在哪个GPU上 https://blog.csdn.net/weixin_37889356/article/details/121792888Part 3: Multi-GPU training with DDP (code walkthrough) [pytorch官方教程&#xff0c;有股咖喱味的Inglish, 推荐] https://www.youtube.com/w…
阅读更多...
5月14日第壹简报，星期日，农历三月廿五

5月14日第壹简报，星期日，农历三月廿五

5月14日第壹简报&#xff0c;星期日&#xff0c;农历三月廿五坚持阅读&#xff0c;静待花开1. 福布斯中国锂电产业链TOP100发布&#xff0c;宁德时代、赣锋锂业、比亚迪等入选。2. 平均降价84%&#xff01;山东、湖南、江西等多地骨科脊柱类耗材集采中选结果落地。3. 世界旅游组…
阅读更多...
【CSS系列】第八章 · CSS浮动

【CSS系列】第八章 · CSS浮动

写在前面 Hello大家好&#xff0c; 我是【麟-小白】&#xff0c;一位软件工程专业的学生&#xff0c;喜好计算机知识。希望大家能够一起学习进步呀&#xff01;本人是一名在读大学生&#xff0c;专业水平有限&#xff0c;如发现错误或不足之处&#xff0c;请多多指正&#xff0…
阅读更多...
anylabeling 自动标注 使用记录 （跑不起来你打我）

anylabeling 自动标注 使用记录 （跑不起来你打我）

目录 一、anylabeling 二、Segment Anything模型ONNX导出 1、下载这个项目 2、环境配置 3、下载SAM预训练权重 4、导出ONNX格式 三、yaml文件编写 四、视频讲解 五、使用记录 六、其他 一、anylabeling anylabeling项目地址 我直接用的之前yolov5的conda虚拟环境 p…
阅读更多...
vim编辑器常用命令 （Centos）

vim编辑器常用命令 （Centos）

1 安装vim编辑器 sudo yum update sudo yum install vim2 设置vim 显示行号 (:set nu) 步骤1&#xff1a;按 ESC 键 退出本机内容模式 步骤2&#xff1a;输入 :set number 或者 :set nu 步骤3&#xff1a;按回车 3 查找 / 步骤1&#xff1a;按 ESC 键 退出本机内容模式 步…
阅读更多...
设计模式 - 工厂

设计模式 - 工厂

文章参考来源 一、概念 创建简单的对象直接 new 一个就完事&#xff0c;但对于创建时需要各种配置的复杂对象例如手机&#xff0c;没有工厂的情况下&#xff0c;用户需要自己处理屏幕、摄像头、处理器等配置&#xff0c;这样用户和手机就耦合在一起了。 可以使代码结构清晰&a…
阅读更多...
Python进阶知识（2）—— 什么是GUI编程？一起来学习用Python，Tkinter“做画”吧

Python进阶知识（2）—— 什么是GUI编程？一起来学习用Python，Tkinter“做画”吧

文章目录 01 | &#x1f4d5; 什么是 G U I &#xff1f; \color{red}{什么是GUI&#xff1f;} 什么是GUI&#xff1f;&#x1f4d5;02 | &#x1f4d9; 什么是 T k i n t e r &#xff1f;为什么是 T k i n t e r &#xff1f; \color{orange}{什么是Tkinter&#xff1f;为什么…
阅读更多...
ESP32在linux下烧录，提示权限有问题，解决方法

ESP32在linux下烧录，提示权限有问题，解决方法

执行idf.py -p /dev/ttyACM0 flash下载时&#xff0c;提示这个错误 serial.serialutil.SerialException: [Errno 13] could not open port /dev/ttyACM0: [Errno 13] Permission denied: /dev/ttyACM0 解决方法&#xff1a; 1检查串行端口 /dev/ttyUSB0 是否已被其他程序占用…
阅读更多...
神经网络的梯度检查

神经网络的梯度检查

当编写完一个深层的网络时&#xff0c;可能求导方式过于复杂稍微不小心就会出错&#xff0c;在开始训练使用这个网络模型之前我们可以先进行梯度检查。 梯度检查的步骤如下&#xff1a; 然后反向传播计算loss的导数grad&#xff0c;用以下公式计算误差&#xff1a; 通常来说&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023