【Android】ConstrainLayout约束布局基本操作

news2024/9/19 19:48:16

文章目录

  • 介绍
  • 约束条件
    • 添加方式
    • 外边距设置
    • 删除方式
  • 添加约束条件
    • 父级位置
    • 对齐方式
    • 基线对齐
    • 引导线约束
    • 屏障约束
  • 约束偏差
  • 使用链控制线性组

介绍

约束布局ConstraintLayout是 Android Studio 2.3 起创建布局后的默认布局

主要是为了解决布局多层嵌套问题,以灵活的方式定位和调整小部件。

ConstraintLayout可以按照比例约束控件位置和尺寸,能够更好地适配屏幕大小不同的机型。

借助 ConstraintLayout,您可以创建具有扁平视图层次结构(没有嵌套视图组)的大型复杂布局。它与 RelativeLayout类似,所有视图都是根据同级视图与父布局之间的关系进行布局的,但它比 RelativeLayout 更灵活,并且更易于与 Android Studio 的布局编辑器一起使用。

布局编辑器的可视化工具中直接提供了 ConstraintLayout 的所有功能,因为布局 API 和布局编辑器是专为彼此构建的。可以完全使用 ConstraintLayout 通过拖动(而非修改 XML)来构建布局。

约束条件

定义视图的位置时需要为该视图添加至少一个水平约束条件和一个垂直约束条件。

每个约束条件都表示与其他视图、父布局或不可见引导线的连接或对齐方式。

每个约束条件均定义视图沿纵轴或横轴的位置。每个视图的每个轴都必须至少有一个约束条件

image-20240719152207087

从左上角按钮处拖动到页面后,此时未添加任何约束条件,会在位置 [0,0](左上角)处绘制该视图。

结果:
在这里插入图片描述

缺少横轴的约束条件,就会在左边界绘制;缺少纵轴的约束条件,就会在上边界绘制。

所以我们要确保都必须至少有一个约束条件。

添加方式

拖动每个边中间的圆形约束手柄到另一个视图的边缘、布局的边缘或引导线,即可建立约束

image-20240719160326643

外边距设置

方形框:设置边距

滑动部分:该控件在页面中的比例位置

image-20240719160932807

删除方式

  1. 按住 Ctrl 键的同时点击某个约束定位点。该约束条件将变为红色,表示可以点击将其删除

  2. Attributes 窗口的 Layout 部分中,点击一个约束定位点

    image-20240719161400246

  3. 鼠标悬浮在约束线上,右键菜单栏中删除

举例:

image-20240719153535993

对于这样的四个按钮,button1,3都设置了约束,但是button2没有垂直约束,因此显示在顶端

image-20240719153858022

添加约束条件

父级位置

将视图的一侧约束到布局的相应边缘

image-20240719170642461

对齐方式

将一个视图的边缘与另一视图的同一边对齐。

可以水平对齐,也可以偏移对齐

image-20240719165702768

基线对齐

将一个视图的文本基线与另一视图的文本基线对齐。

方式:

右键该控件,选择Baseline,点击文本基线并将其拖动到另一条基线上。

image-20240719163113293

引导线约束

添加垂直或水平引导线约束视图,并且对应用用户不可见。

可以根据 dp 单位或相对于布局边缘的百分比,在布局中放置引导线。

image-20240719163227054

利用引导线令两个按钮中心对称

image-20240719172558925

屏障约束

用于在动态布局中对齐视图。

屏障可以自动调整其大小以适应其所包含视图的尺寸,常用于当你需要对齐一组视图的边缘(如顶部、底部、开始或结束边缘)时。

  1. 点击工具栏中的 Guidelines,然后点击 Add Vertical BarrierAdd Horizontal Barrier
  2. 在 Component Tree 窗口中,选择要放入屏障内的视图,并将其拖动到屏障组件中。

举例:

使用了Horizontal Barrier,并且将这两个按钮加入该组。屏障始终保持两个控件位置最高的地方,实现将一组视图的顶边或底边对齐到最高或最低的视图边缘。

image-20240719174706532

image-20240719173952716

并且可以在这里进行修改对齐的方向

image-20240719175049886

约束偏差

约束偏差(Constraint Bias)是ConstraintLayout中的一个概念,用于在视图被约束在两个边界(如父布局的左右边界)之间时,决定其在这些边界之间的位置。通过设置约束偏差,可以控制视图在两个约束之间的位置偏向。

更改高度和宽度的计算方式。这些符号代表尺码模式,如下所示。点击该符号即可在这些设置之间切换:

  1. Fixed(固定大小)
  • 通过在文本框中指定特定尺寸,或者在编辑器中直接调整视图大小来设置固定的宽度和高度。
  • 这种模式下,视图的大小是硬编码的,不会根据内容或屏幕尺寸变化。
image-20240719191955594
  1. Wrap Content(内容包裹)
  • 视图会根据其内容的大小来确定自身的宽度和高度。
  • 如果视图的内容变化,视图的尺寸也会相应变化。
  • 默认情况下,设置为WRAP_CONTENT的widget不受约束条件的限制。
image-20240719192019252
  1. Match Constraints(匹配约束)
  • 视图会尽可能扩展以满足每侧的约束条件,同时考虑外边距。
  • 在这种模式下,可以使用一些额外的属性来调整视图的最小和最大尺寸。
  • 注意:在ConstraintLayout中不能使用match_parent,应改用match constraints(0dp)。
image-20240719192008186

使用链控制线性组

在Android的ConstraintLayout中,链(Chains)是一个强大的特性,它允许你以灵活的方式组织视图,使其能够水平或垂直地相互关联。你提到的链的样式(Spread、Spread Inside、Weighted、Packed)以及链的创建和管理方式非常关键,对于实现复杂而响应式的布局至关重要。

  • 创建链的步骤
  1. 选择视图:首先,你需要选择想要包含在链中的所有视图。这些视图可以是你布局中的任何控件,如按钮、文本框等。
  2. 设置约束:确保每个视图都至少与链中的另一个视图有水平或垂直的约束。对于水平链,这通常意味着视图的左侧或右侧与链中的另一个视图的右侧或左侧相连。对于垂直链,则是上方或下方。
  3. 定义链的样式:链的样式可以通过XML属性或直接在布局编辑器中设置。例如,在XML中,你可以通过为链的第一个视图设置app:layout_constraintHorizontal_chainStyle(水平链)或app:layout_constraintVertical_chainStyle(垂直链)来定义链的样式。在布局编辑器中,你可以通过选择链中的任何视图并使用工具栏上的链按钮来更改链的样式。
  4. 调整权重(可选):如果你想要链中的某些视图比其他视图占据更多空间,你可以使用layout_constraintHorizontal_weightlayout_constraintVertical_weight属性为它们分配权重。这与LinearLayout中的layout_weight属性类似。
  5. 验证链:确保链的两端都被正确地约束到父布局的边界或其他视图上。如果链的一端没有约束,那么链可能无法按预期工作。

注意:

  • 同时属于多个链:视图可以同时是水平链和垂直链的一部分,这允许你创建复杂的网格布局。
  • 完整的约束:为了链能正常工作,链的每一端都需要有约束。这确保了链能够正确地定位在布局中。
  • 额外的约束:虽然链定义了视图之间的相对位置,但你可能还需要添加其他约束(如对齐约束)来确保视图在链中的精确位置。
  • 自动创建约束:在某些情况下,布局编辑器可能会自动为你创建约束,但最好手动检查并调整这些约束以确保它们符合你的布局需求。


感谢您的阅读
如有错误烦请指正


参考:

  1. 使用 ConstraintLayout 构建自适应界面 | Views | Android Developers
  2. 基础布局之ConstraintLayout约束布局-CSDN博客

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

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

相关文章

【你也能从零基础学会网站开发】 SQL Server 2000企业管理器基本介绍

🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 SQL Server 20…

idea 配置jdk21 后 控制台中文乱码问题

1、 选择 add VM 填写:-Dfile.encodingGBK -Dfile.encodingGBK

Node对接支付宝沙箱完成支付完整流程

沙箱支付完整流程 一、进入支付宝沙箱网站二、进入沙箱环境三、下载【支付宝开放平台开发助手】四、打开【支付宝开放平台开发助手】工具,进行设置五、点击生成密钥点击打开文件位置 六、密钥格式转换七、回到沙箱配置密钥八、粘入应用工具九、需要应用的信息十、进…

算法:队列+宽搜

目录 题目一:N 叉树的层序遍历 题目二:二叉树的锯齿形层序遍历 题目三:二叉树最大宽度 题目四:在每个树行中找最大值 题目一:N 叉树的层序遍历 给定一个 N 叉树,返回其节点值的层序遍历。(…

智能图片识别表格

文章目录 在线体验快速开始一、项目介绍篇1.1 PP-Structure概述1.2 PP-Structure核心功能:表格识别1.3 PP-Structure特点1.4 模块介绍1.4.1 TableDec.py1.4.2 app.py 二、核心代码介绍篇2.1 app.py2.2 TableDec.py2.3 扩展-模型选择3.4.1 版面分析模型3.4.2 表格识别…

Linux-mysql数据备份恢复

MySQL数据备份与恢复 一、备份介绍 1、为什么要备份 备份:能够防止由于机械故障以及人为误操作带来的数据丢失,例如将数据库文件保存在了其它地方。 冗余: 数据有多份冗余,但不等备份,只能防止机械故障带来的数据丢…

netty如何结合Zookeeper如何高并发的代码实现步骤 —— 慧哥充电桩开源平台

Netty是一个高性能、异步事件驱动的NIO(非阻塞IO)网络通信框架,而Zookeeper是一个分布式、开放源码的分布式应用程序协调服务,常用于维护配置信息、命名空间和提供分布式同步。 在高并发环境下,Netty与Zookeeper的结合…

昇思25天学习打卡营第13天 | mindspore 实现 ShuffleNet 图像分类

1. 背景: 使用 mindspore 学习神经网络,打卡第 13 天;主要内容也依据 mindspore 的学习记录。 2. 迁移学习介绍: mindspore 实现 ShuffleNet 图像分类; ShuffleNet 基本介绍: ShuffleNetV1 是旷视科技提…

RabbitMQ学习实践一:MQ的安装

文章是本人在学习springboot实现消息队列功能时所经历的过程的记录,仅供参考,如有侵权请随时指出。 参考文章地址: RabbitMQ安装与入门_rabbitmq win11配置-CSDN博客 RabbitMQ入门到实战一篇文章就够了-CSDN博客 RabbitMQ系列&#xff08…

进程通信(5):POSIX消息队列

随进程持续:IPC对象一直存在直到最后一个进程关闭该对象为止(管道和FIFO)。 随内核持续:IPC对象存在一直到内核自举(系统重新启动)或者显示删除该对象。 如System V消息队列,System V信号量,S…

固态继电器的实际使用和有效应用

固态继电器(SSR)已成为现代电气和电子系统中不可或缺的组件,与传统的机电继电器相比具有众多优势。在本文中,我们将深入探讨SSR的实际方面、其应用以及有效部署的关键考虑因素。 什么是固态继电器? 固态继电器是使用半导体器件(如…

ORB_SLAM2 ORBSLAM2 Ubuntu20.04 ROS Noetic虚拟机镜像下载

下图是build.sh 和 build_ros.sh 编译完成截图: slam测试视频: orbslam2 ubuntu20.04 test 下载地址(付费使用,不能接受请勿下载): 链接:https://pan.baidu.com/s/16R7Pb6LjgR5SeoeBSZfgaQ?pwdu05r 提取…

前端小知识点——按钮之间出现很小的空隙如何规避

前端小知识点——按钮之间出现很小的空隙如何规避 文章介绍问题再现总结 文章介绍 本文主要介绍页面中两个按钮相邻时会出现一点空隙,导致在后续自定义填充的时候出现换行或其它问题,特此记录。 问题再现 这个图片能看到我们给外面的div设置的是300的宽…

stack模拟实现【C++】

文章目录 全部的实现代码放在了文章末尾什么是适配器模式?stack准备工作包含头文件定义命名空间类的成员变量 默认成员函数emptysizetoppushpop全部代码 全部的实现代码放在了文章末尾 stack的模拟实现我采用了C适配器模式 stack的适配器一般是deque,也…

SpringBoot系列—2.SpringBoot拦截器篇

SpringBoot系列—1.IDEA搭建SpringBoot框架 SpringBoot系列—2.SpringBoot拦截器篇 SpringBoot系列—3.SpringBoot Redis篇 SpringBoot系列—4.SpringBoot 整合Mybatis、MP(MyBatis-Plus) SpringBoot系列—5.SpringBoot 整合Mybatis-Plus分页 1.新建拦截…

C# 之工控机数据类型 高低位(大小端)、BitConverter、IsLittleEndian、字节数组转换(高低位)

八种基本数据类型:byte、short、int、long、float、double、boolean、char byte 8位、有符号的以二进制补码表示的整数 min : -128(-2^7) max: 127(2^7-1) default: 0 对应包装类:Byte short 16位、有符号的以二进制补码表示…

将微信聊天记录导出成html等格式

通过github上的开源项目WechatMsg,可以将微信中的聊天记录(包括文字、图片、语音、表情包甚至拍一拍)导出,方便我们随时分享和查看,此外还有聊天记录分析等有趣的功能,感兴趣的小伙伴可以研究一下。我个人认…

静态网站怎么更新数据

今天看到个问题 我不是行业从业者,但目前遇到一个问题 我公司网站为纯静态,除了直接从html里修改文字外能不能这样 建立一个xml或者txt文档,其中有很多信息,例如网站名称,电话,备案号等,一行一行…

AI赋能项目集成:我的实战经验与洞见

背景 在传统的教学模式中,教师往往难以兼顾每位学生的个性化需求,学习信息的收集与分析也受限于时间和精力的限制,难以做到全面而深入。然而,每位学生都是独一无二的个体,他们拥有不同的学习风格、兴趣偏好以及理解能…

【IC前端虚拟项目】sanity_case的编写与通包测试

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 在花了大力气完成reference model之后,整个验证环境的搭建就完成了,再多看一下这个结构然后就可以进行sanity_case和通包测试: 关于sanity_case和通包测试我在很多篇文章中说过好多次了在这里就不赘述…