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

文章目录

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

介绍

约束布局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-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)。

使用链控制线性组

在Android的ConstraintLayout中,链(Chains)是一个强大的特性,它允许你以灵活的方式组织视图,使其能够水平或垂直地相互关联。

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

在这里插入图片描述

在这里插入图片描述

  • 链的样式

    在这里插入图片描述

  1. Spread:均分剩余空间

在这里插入图片描述

  1. Spread inside:第一个和最后一个视图固定在链两端的约束条件上,其余视图均匀分布。

在这里插入图片描述

  1. packed:所有视图的边界内紧密排列视图

在这里插入图片描述

  1. Weighted:当链设置为 spreadspread inside 时,可以通过将一个或多个视图设置为match constraints (0dp) 来填充剩余空间。

    使用 layout_constraintHorizontal_weightlayout_constraintVertical_weight 属性为每个视图分配重要性权重。

app:layout_constraintHorizontal_weight="1"
  • 链的对齐

image-20240720100354369

注意:

  1. 视图可以同时属于水平链和垂直链
  2. 只有当链的每一端都被约束到同一轴上的另一个对象时,链才能正常工作
  3. 尽管链的方向是垂直或水平的,但使用其中一个方向不会沿该方向对齐视图。为链中的每个视图实现适当的位置,还添加其他约束条件,


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


参考:

  1. 使用 ConstraintLayout 构建自适应界面 | Views | Android Developers
  2. 【约束布局】ConstraintLayout 约束布局 ( 简介 | 引入依赖 | 基本操作 | 垂直定位约束 | 角度定位约束 | 基线约束 )-CSDN博客
  3. 基础布局之ConstraintLayout约束布局-CSDN博客

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

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

相关文章

抖音/腾讯/百度ocpm深度回传如何操作?广告投放双出价的投放技巧?

要实现抖音、腾讯和百度的OCPM(Optimized Cost Per Mille)深度回传,可以通过借助第三方平台,例如(转化宝)实现广告数据精准回传,如此之外,在广告投放过程中还需要注重这些方面。 转化…

ros笔记02--从零体验ros2中的服务通信方式

ros笔记02--从零体验ros2中的服务通信方式 介绍创建步骤注意事项说明 介绍 在ROS 2中,服务指的是远程过程调用,client调用server,server节点收到数据后计算出结果并返回给client. 服务通常期望能快速返回,因此不应当用于处理长时…

深度学习落地实战:大模型生成图片

前言 大家好,我是机长 本专栏将持续收集整理市场上深度学习的相关项目,旨在为准备从事深度学习工作或相关科研活动的伙伴,储备、提升更多的实际开发经验,每个项目实例都可作为实际开发项目写入简历,且都附带完整的代…

TypeScript 教程(十):项目配置、代码质量与前端框架集成

目录 前言回顾类型声明文件与异步编程1. tsconfig.json 高级配置a. 基本配置b. 高级配置选项 2. 使用 Webpack 构建 TypeScript 项目a. 安装依赖b. 配置 Webpack 3. 使用 Babel 编译 TypeScripta. 安装依赖b. 配置 Babelc. 配置 Webpack 使用 Babel 4. 使用 ESLint 和 TSLinta.…

复杂网络的任意子节点的网络最短距离

复杂网络的任意子节点的网络最短距离 题目要求介绍 本文算法测试用的数据集为空手道俱乐部,其中空手道俱乐部的数据集可通过这个链接进行下载•http://vlado.fmf.uni-lj.si/pub/networks/data/Ucinet/UciData.htm#zachary 摘要 本文旨在解决复杂网络中任意子节点…

Godot学习笔记2——GDScript变量与函数

目录 一、代码编写界面 二、变量 三、函数 四、变量的类型 Godot使用的编程语言是GDS,语法上与python有些类似。 一、代码编写界面 在新建的Godot项目中,点击“创建根节点”中的“其他节点”,选择“Node”。 点击场景界面右上角的绿色…

前端Vue组件化实践:自定义发送短信验证码弹框组件

在前端开发中,随着业务逻辑的日益复杂和交互需求的不断增长,传统的整体式开发方式逐渐暴露出效率低下、维护困难等问题。为了解决这些问题,组件化开发成为了一种流行的解决方案。通过组件化,我们可以将复杂的系统拆分成多个独立的…

LeetCode 860柠檬水找零(贪心算法)/406根据身高重建队列(贪心算法)

1. 柠檬水找零 思路分析 只需要维护三种金额的数量,5,10和20。 有如下三种情况: 情况一:账单是5,直接收下。情况二:账单是10,消耗一个5,增加一个10情况三:账单是20&am…

使用Java -jar运行就jar包时报异常:org.yaml.snakeyaml.error.YAMLException异常

Java运行就 .jar包时出现的 YAMLException 异常 我在本地环境测试时,使用 java -jar 命令运行 Java 可执行 .jar 包时,遇到了 org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length 1 异常;这…

关于集成网络变压器的RJ45网口

集成网络变压器的RJ45网口是一种将网络变压器与RJ45接口集成在一起的网络连接解决方案。这种集成设计具有多项优势,使其在现代网络设备中得到广泛应用。 优势与特点 1. **空间节省**:集成设计减少了组件数量和连接线缆长度,有助于节省设备内…

激光打印机原理学习

文章目录 参考资料印刷四分色模式激光打印机的工作原理 参考资料 全网最清晰的打印机工作原理 印刷四分色模式 四分色(Quadtone)印刷是一种特殊的印刷技术,它使用四种不同的颜色通道来再现彩色图像。这四种标准颜色是:C青色&am…

Linux云计算 |【第一阶段】ENGINEER-DAY5

主要内容: SELinux、系统故障修复、HTTPD/FTP服务搭建、防火墙策略管理、服务管理 一、SELinux安全制度 SELinux(Security-Enhanced Linux),美国NSA国家安全局主导开发,一套增强Linux系统安全的强制访问控制体系&…

【Android】 dp与sp,加冕为王

目录 重要概念 屏幕尺寸 屏幕分辨率 屏幕像素密度 基础知识: ppi pt DPI 的定义和重要性 Android 中的 DPI 级别 px dp(Density Independent Pixels) sp(Scale-independent Pixels) 安卓的dp/dip、sp 虚拟…

在 PostgreSQL 中怎样进行数据库的容量规划?

🍅关注博主🎗️ 带你畅游技术世界,不错过每一次成长机会!📚领书:PostgreSQL 入门到精通.pdf 文章目录 在 PostgreSQL 中怎样进行数据库的容量规划?一、为什么容量规划如此重要?二、影…

JDBC技术

JDBC提供了在Java程序中直接访问数据库的功能 JDBC连接数据库之前必须先装载特定厂商提供的数据库驱动程序(Driver),通过JDBC的API访问数据库。有了JDBC技术,就不必为访问Mysql数据库专门写一个程序,为访问Oracle又专门…

Vue项目实现单点登录(SSO)的逻辑和基本流程

项目集群如果一个一个登录会非常麻烦,尤其是一些大企业或者多项目使用一套体系数据的环境中,这时候登录中心也就应用而生, 今天简单说一下vue sso的实现思路,vue项目实现单点登录(SSO)通常涉及以下几个步骤…

LabVIEW和Alicat Scientific质量流量计实现精确流量控制

在现代工业自动化和科研实验中,精确的气体流量控制至关重要。这里将介绍一个使用LabVIEW与Alicat Scientific公司的质量流量计实现流量控制的项目。项目采用Alicat Scientific的质量流量计(型号:M-200SCCM-D),通过LabV…

R绘制Venn图及其变换

我自己在用R做各种分析时有不少需要反复用到的基础功能,比如一些简单的统计呀,画一些简单的图等等,虽说具体实现的代码也不麻烦,但还是不太想每次用的时候去找之前的代码。 索性将常用的各种函数整成了一个包:pcutils…

[CP_AUTOSAR]_分层软件架构_接口之通信模块交互介绍

目录 1、协议数据单元(PDU)传输2、通信模块的案例2.1、SDU、 PCI & PDU2.2、通信模块构成2.3、从数据传输的角度看Communication2.4、Communication中的接口 在前面 《关于接口的一些说明》 以及  《Memory软件模块接口说明》 中,简要介绍了CP_AUTOSAR分层…

ByteBuf释放注意的问题

Bytebuf需要释放,否则可能导致OOM。 如果bytebbuf传递到了head或tail,不需要我们关心。 在head和tail里(head实现了outhandler、inhander。tail实现了inhander),底层自动调用了bytebuf.release。 其他情况需要我们手动…