【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. 服务通常期望能快速返回,因此不应当用于处理长时…

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

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

代理伺服器分類詳解

代理伺服器的主要分類 代理伺服器可以根據不同的標準進行分類。以下是幾種常見的分類方式: 按協議分類按匿名性分類按使用場景分類 1. 按協議分類 根據支持的協議類型,代理伺服器可以分為以下幾類: HTTP代理:專門用於處理HTT…

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”。 点击场景界面右上角的绿色…

Spark SQL----GROUP BY子句

Spark SQL----GROUP BY子句 一、描述二、语法三、参数四、例子 一、描述 GROUP BY子句用于根据一组指定的分组表达式对行进行分组,并根据一个或多个指定的聚合函数计算行组上的聚合。Spark还支持高级聚合,通过GROUPING SETS、CUBE、ROLLUP子句对同一输入…

文字溢出隐藏及鼠标悬停显示效果

在本文中&#xff0c;我们将学习如何使用 CSS 和 JavaScript 实现一个简单的文字溢出隐藏效果&#xff0c;当鼠标悬停在文本上时显示完整内容。 创建 HTML 页面结构 首先&#xff0c;我们需要创建一个包含文本内容的 HTML 页面。 <!DOCTYPE html> <html lang"e…

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

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

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

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

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

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

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

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

掌控视界:WebKit与CSS视口单位的卓越支持

掌控视界&#xff1a;WebKit与CSS视口单位的卓越支持 在响应式网页设计中&#xff0c;CSS视口单位&#xff08;Viewport Units&#xff09;发挥着至关重要的作用。它们允许开发者根据视口&#xff08;Viewport&#xff09;的大小来设置元素的尺寸和位置&#xff0c;从而实现在…

激光打印机原理学习

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

《管理表格系统》开发心得

浅浅记录一下自己开发两个月的心得&#xff0c;毕竟初入职场 一、写一个自己的脚手架【仅后端】 1.springboot版 2.springcloud版 二、注意写WBS 1要件定义企划构想要求定义要件定义&#xff08;总结功能需求、前端样式需求、非功能性需求、开发环境、部署需求、可行性调查&…

云计算的三种服务模式

云计算的三种主要服务模式分别是基础设施即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;PaaS&#xff09;和软件即服务&#xff08;SaaS&#xff09;。每种服务模式都提供不同级别的抽象和管理&#xff0c;满足不同的需求和用例。以下是对这三种服务模式的详细介…

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

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

【Rust光年纪】Rust 中常用的数据库客户端库:核心功能与使用场景

探秘 Rust 语言下的多种数据库客户端库&#xff1a;从安装到实际应用 前言 在现代的软件开发中&#xff0c;数据库是不可或缺的一部分。为了与数据库进行交互&#xff0c;开发人员需要使用各种数据库客户端来执行操作、构建查询等。本文将介绍一些用于 Rust 语言的常见数据库…

【Android】 dp与sp,加冕为王

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