【iOS】Masonry的基本使用

文章目录

  • 前言
  • 一、使用Masonry的原因
  • 二、约束的常识
  • 三、Masonry的简单使用
  • 四、Masonry的用例
  • 总结

前言

暑假安装了cocoapods，简单使用其调用了SVGKit，但是没有学习Masonry，特此总结博客记录Masonry的学习

一、使用Masonry的原因

Masonry是一个轻量级的布局框架。通过链式调用的方式来描述布局，是排版代码更加简洁易读。masonry支持iOS和Mac OS X。

在iOS开发中，UI是我们必须设计的，在先前设计UI的过程中我们往往会通过计算来确定各个控件间的相对位置，也就是使用frame来对我们的控件进行位置确定，如果对于相对简单的UI，使用frame无疑会提高我们的性能，但是对于复杂的UI来说，使用frame来确定控件的位置就显得十分繁琐了。因此我们就需要用到我们的AutoLayout布局，但是使用传统的AutoLayout布局显得十分繁琐，我们可以来看一个例子：

  • 系统给的自动布局（AutoLayout）的API
+(instancetype)constraintWithItem:(id)view1attribute:(NSLayoutAttribute)attr1relatedBy:(NSLayoutRelation)relationtoItem:(nullable id)view2attribute:(NSLayoutAttribute)attr2multiplier:(CGFloat)multiplierconstant:(CGFloat)c;
  • 传统代码中使用系统API进行布局
- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view, typically from a nib.self.view.backgroundColor = [UIColor yellowColor];UIView *subView = [[UIView alloc] init];subView.backgroundColor = [UIColor redColor];// 在设置约束前，先将子视图添加进来[self.view addSubview:subView];// 使用autoLayout约束，禁止将AutoresizingMask转换为约束[subView setTranslatesAutoresizingMaskIntoConstraints:NO];// 设置subView相对于VIEW的上左下右各40像素NSLayoutConstraint *constraintTop = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:40];NSLayoutConstraint *constraintLeft = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:40];// 由于iOS坐标系的原点在左上角，所以设置下，右边距使用负值NSLayoutConstraint *constraintBottom = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-40];NSLayoutConstraint *constraintRight = [NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-40];// 将四条约束加进数组中NSArray *array = [NSArray arrayWithObjects:constraintTop, constraintLeft, constraintBottom, constraintRight, nil];// 把约束条件设置到父视图的Contraints中[self.view addConstraints:array];
}

可见使用传统的api进行约束十分繁琐，因此Mosonry应运而生，我们可以通过使用Mosonry简化我们的AutoLayout布局
在这里插入图片描述

二、约束的常识

在iOS中，约束是一种用于定义视图之间关系的规则，以便在各种屏幕尺寸和设备方向下，自动调整界面布局。iOS的自动布局系统基于一些核心原理来实现这些约束。

  • 自动布局引擎： iOS的自动布局引擎负责解析视图之间的约束，计算视图的位置和尺寸，以确保它们正确地适应屏幕。这个引擎在视图层次结构中自动运行，根据约束条件来计算视图的实际位置和大小。
  • 优先级： 约束可以分配优先级，用于处理可能发生冲突的约束。当不同约束之间存在冲突时，系统会根据约束的优先级来决定哪些约束应该被保留，哪些应该被抛弃。这使得开发者可以在特定情况下指定应该受到更高重视的约束。
  • 约束解决： 约束系统尝试解决视图层次结构中的所有约束，以找到一个满足所有条件的解决方案。它通过不断迭代来调整视图的位置和尺寸，直到满足所有的约束条件。有时候，可能会存在无法满足所有约束的情况，这时需要进行调整或放宽约束条件。
  • 内在内容尺寸： 自动布局系统还考虑视图的内在内容尺寸，例如文本标签的文本大小。当视图具有内在内容时，系统会根据内容的大小自动调整视图的尺寸。
  • 基于框架的约束： 在iOS中，约束通常基于视图的框架，包括左边距、右边距、顶边距、底边距、宽度和高度等。这些约束会在不同的设备和屏幕方向下进行自动调整，以适应不同的布局需求。
  • 可伸缩约束： 一些约束可以设置为可伸缩的，使得视图在不同尺寸下能够以比例方式进行调整。这对于创建响应式布局非常有用。

iOS中的约束原理基于自动布局引擎和约束系统，通过定义视图之间的关系，以自动适应不同的屏幕尺寸和方向。这种方法使得开发者能够更灵活、更简便地创建适应多种设备的用户界面。

三、Masonry的简单使用

Masonry的添加布局主要有三个，三个方法的作用分别是创建约束；更新某个约束，其他约束不变；移除先前所有约束，添加新到的约束。这三个方法根据场景需要合理使用，否则可能造成内存问题

- (NSArray *)mas_makeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;- (NSArray *)mas_updateConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;- (NSArray *)mas_remakeConstraints:(void(NS_NOESCAPE ^)(MASConstraintMaker *make))block;

假如我们现在有一个子视图，我们需要对其添加约束，我们可以使用如下代码：

    [_firstview mas_makeConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(50);//等价于 make.left.mas_equalTo(demoView.superview.mas_left).mas_offset(50);make.right.mas_equalTo(-50);//等价于 make.right.mas_equalTo(demoView.superview.mas_right).mas_offset(-50);make.top.mas_equalTo(100);//等价于 make.top.mas_equalTo(demoView.superview.mas_top).mas_offset(100);make.bottom.mas_equalTo(-100);//等价于 make.bottom.mas_equalTo(demoView.superview.mas_bottom).mas_offset(-100);}];

然后将我们的子视图添加到我们的self.view中，就能得到如下视图：
在这里插入图片描述

除了上述这种写法之外，我们对还有另外几种Masonry的写法：

  • 第一种。mas_equalTo()只需要传入相对的约束的视图，不需要指定约束边，默认取前面第一个需要添加约束的边
    UIView *demoView = [[UIView alloc] init];demoView.backgroundColor = UIColor.greenColor;[self.view addSubview:demoView];[demoView mas_makeConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(self.view).mas_offset(50);//等价于 make.left.mas_equalTo(self.view.mas_left).mas_offset(50);make.right.mas_equalTo(self.view).mas_offset(-50);//等价于 make.right.mas_equalTo(self.view.mas_right).mas_offset(-50);make.top.mas_equalTo(self.view).mas_offset(100);//等价于 make.top.mas_equalTo(self.view.mas_top).mas_offset(100);make.bottom.mas_equalTo(self.view).mas_offset(-100);//等价于 make.bottom.mas_equalTo(self.view.mas_bottom).mas_offset(-100);}];

与之类似的写法还有这一种：

        make.top.equalTo(self.view).with.offset(10);make.left.equalTo(self.view).with.offset(10);make.bottom.equalTo(self.view).with.offset(-10);make.right.equalTo(self.view).with.offset(-10);

这两种写法都是自行确认约束边来对我们的控件进行布局

  • 第二种。mas_equalTo() 传入一个值，这个值就是相对于依赖父视图对应相同约束的偏移量
    UIView *demoView = [[UIView alloc] init];demoView.backgroundColor = UIColor.greenColor;[self.view addSubview:demoView];[demoView mas_makeConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(50);//等价于 make.left.mas_equalTo(demoView.superview.mas_left).mas_offset(50);make.right.mas_equalTo(-50);//等价于 make.right.mas_equalTo(demoView.superview.mas_right).mas_offset(-50);make.top.mas_equalTo(100);//等价于 make.top.mas_equalTo(demoView.superview.mas_top).mas_offset(100);make.bottom.mas_equalTo(-100);//等价于 make.bottom.mas_equalTo(demoView.superview.mas_bottom).mas_offset(-100);}];

如果只是简单的父视图中嵌套子视图，这种简单的写法可以做到，但是对于相对复杂的UI，例如计算器，就需要使用第一种写法了

四、Masonry的用例

我们接下来简单给出一个使用Masonry实现布局的例子：

我们在上文中简单给出了一个使用Masonry约束的视图，我们现在将另一个视图作为子视图添加到其中

    [_firstview addSubview:_secondview];

然后利用添加约束

    [_secondview mas_makeConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(0);make.top.mas_equalTo(0);make.height.mas_equalTo(100);make.width.mas_equalTo(100);}];

再上文中已经简单介绍了这种Masonry的约束写法，这里不再赘述，最后的效果如图：
，

另外我们还可以在其居中位置添加控件：

    [_thirdview mas_makeConstraints:^(MASConstraintMaker *make) {make.center.mas_equalTo(0);make.height.mas_equalTo(100);make.width.mas_equalTo(100);}];

在这里插入图片描述

还可以通过改变父视图的约束从而使其子视图位置发生改变：
（上方移动是一个UIButtom，press则是事件函数）

- (void)press {[_firstview mas_updateConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(100);//等价于 make.left.mas_equalTo(demoView.superview.mas_left).mas_offset(50);make.right.mas_equalTo(-100);//等价于 make.right.mas_equalTo(demoView.superview.mas_right).mas_offset(-50);make.top.mas_equalTo(150);//等价于 make.top.mas_equalTo(demoView.superview.mas_top).mas_offset(100);make.bottom.mas_equalTo(-150);//等价于 make.bottom.mas_equalTo(demoView.superview.mas_bottom).mas_offset(-100);}];[_secondview mas_updateConstraints:^(MASConstraintMaker *make) {make.height.mas_equalTo(50);make.width.mas_equalTo(50);}];[_thirdview mas_updateConstraints:^(MASConstraintMaker *make) {
//        make.center.mas_equalTo(0);make.height.mas_equalTo(50);make.width.mas_equalTo(50);}];
}

在这里插入图片描述

总结

于此基础的Masonry的使用已经基本讲解完了，后续在写计算器的时候会更多的使用到Masonry，一些更深层次的用法会在后面的博客中讲解
另外需要记住的一点是使用Masonry会影响我们的性能，frame往往是最简单高效的，在实际的设计中我们可以将这两种布局方式进行混合使用

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

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

相关文章

最新ChatGPT程序源码+AI系统+详细图文部署教程/支持GPT4.0/支持Midjourney绘画/Prompt知识库

最新ChatGPT程序源码+AI系统+详细图文部署教程/支持GPT4.0/支持Midjourney绘画/Prompt知识库

一、AI系统 如何搭建部署人工智能源码、AI创作系统、ChatGPT系统呢？小编这里写一个详细图文教程吧！SparkAi使用Nestjs和Vue3框架技术，持续集成AI能力到AIGC系统！ 1.1 程序核心功能 程序已支持ChatGPT3.5/GPT-4提问、AI绘画、Mi…
阅读更多...
详解 SpringMVC 的 @RequestMapping 注解

详解 SpringMVC 的 @RequestMapping 注解

文章目录 1、RequestMapping注解的功能2、RequestMapping注解的位置3、RequestMapping注解的value属性4、RequestMapping注解的method属性5、RequestMapping注解的params属性（了解）6、RequestMapping注解的headers属性（了解）7、Sp…
阅读更多...
6. vue-element-admin 二次开发避坑指南

6. vue-element-admin 二次开发避坑指南

vue-element-admin 二次开发避坑指南 1.1 前言1.1.1 切换标签时未保存页面的操作内容1.1.2 markdown 样式乱码1.1.3 修改默认尺寸1.1.4 当后端服务器宕机情况下页面加载层一直转圈无法停止，只能关闭页面1.1.5 隐藏齿轮 1.1 前言 上一篇博文，我们分享了vu…
阅读更多...
从零构建深度学习推理框架-11 Resnet

从零构建深度学习推理框架-11 Resnet

op和layer结构 在runtime_ir.cpp中，我们上一节只构建了input和output，对于中间layer的具体实现一直没有完成： for (const auto& kOperator : this->operators_) {if (kOperator->type "pnnx.Input") {this->input_o…
阅读更多...
ssm+vue“魅力”繁峙宣传网站源码和论文

ssm+vue“魅力”繁峙宣传网站源码和论文

ssmvue“魅力”繁峙宣传网站源码和论文102 开发工具：idea 数据库mysql5.7 数据库链接工具：navcat,小海豚等 技术：ssm 摘 要 随着科学技术的飞速发展，各行各业都在努力与现代先进技术接轨，通过科技手段提高自身…
阅读更多...
C语言：截断+整型提升+算数转换练习

C语言：截断+整型提升+算数转换练习

详情关于整型提升、算数转换与截断见文章： 《C语言：整型提升》 《C语言：算数转换》 一、代码一 int main() { char a -1; signed char b -1; unsigned char c -1; printf("%d %d %d", a, b, c); return 0; } 求…
阅读更多...
使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

使用安全复制命令scp在Windows系统和Linux系统之间相互传输文件

现在已经有很多远程控制服务器的第三方软件平台，比如FinalShell，MobaXterm等，半可视化界面，使用起来非常方便和友好，两个系统之间传输文件直接拖就行，当然也可以使用命令方式在两个系统之间相互传递。 目录…
阅读更多...
C++面试题（丝）-计算机网络部分（1）

C++面试题（丝）-计算机网络部分（1）

目录 1计算机网络 53 简述epoll和select的区别，epoll为什么高效？ 54 说说多路IO复用技术有哪些，区别是什么？ 55 简述socket中select，epoll的使用场景和区别，epoll水平触发与边缘触发的区别？…
阅读更多...
使用 ElasticSearch 作为知识库，存储向量及相似性搜索

使用 ElasticSearch 作为知识库，存储向量及相似性搜索

一、ElasticSearch 向量存储及相似性搜索 在当今大数据时代，快速有效地搜索和分析海量数据成为了许多企业和组织的重要需求。Elasticsearch 作为一款功能强大的分布式搜索和分析引擎，为我们提供了一种优秀的解决方案。除了传统的文本搜索，El…
阅读更多...
【两周学会FPGA】从0到1学习紫光同创FPGA开发|盘古PGL22G开发板学习之数码管动态显示（五）

【两周学会FPGA】从0到1学习紫光同创FPGA开发|盘古PGL22G开发板学习之数码管动态显示（五）

本原创教程由深圳市小眼睛科技有限公司创作，版权归本公司所有，如需转载，需授权并注明出处 适用于板卡型号： 紫光同创PGL22G开发平台（盘古22K） 一：盘古22K开发板（紫光同创PGL22G开发…
阅读更多...
http和https的区别？

http和https的区别？

什么是 HTTP？ HTTP是一种互联网数据传输协议，用于在网络服务器和客户端之间进行数据传输。作为万维网的基础，HTTP协议允许网络浏览器向网络服务器发送请求，服务器则会返回响应。HTTP协议基于文本，因此传输的数据是人类…
阅读更多...
41.岛屿数量（第四期模拟笔试）（BFS练习题）

41.岛屿数量（第四期模拟笔试）（BFS练习题）

题目： 给定一个 m 行 n 列的二维地图，初始化每个单元格都是海洋，二维地图外也全是海洋。 操作 addLand 会将单元格（col, row）变为陆地。 定义一系列相连的被海洋包围的陆地为岛屿， 横向相邻或者纵向相连的…
阅读更多...
微信小程序请求接口返回的二维码(图片)，本地工具和真机测试都能显示，上线之后不显示问题

微信小程序请求接口返回的二维码(图片)，本地工具和真机测试都能显示，上线之后不显示问题

请求后端接口返回的图片&#xff1a; 页面展示&#xff1a; 代码实现&#xff1a; :show-menu-by-longpress"true" 是长按保存图片 base64Code 是转为base64的地址 <image class"code" :src"base64Code" alt"" :show-menu-by-long…
阅读更多...
Three.js实现模型，模型材质可拖拽效果 DragControls

Three.js实现模型，模型材质可拖拽效果 DragControls

Three.js提供了一个拖拽的API DragControls 用于实现模型材质拖拽效果 DragControls&#xff1a;是一个用于在Three.js中实现拖拽控制的辅助类。它简化了在Three.js中实现拖拽物体的过程。 DragControls的构造函数接受三个参数&#xff1a; objects&#xff1a;一个包含需要…
阅读更多...
C# textBox 右键菜单 contextMenuStrip

C# textBox 右键菜单 contextMenuStrip

需求&#xff1a; 想在上图空白处可以右键弹出菜单&#xff0c;该怎么做呢&#xff1f; 1.首先&#xff0c;拖出一个 ContextMenuStrip。 随便放哪里都行&#xff0c;如下: 2.在textBox里关联这个“右键控件”即可&#xff0c;如下&#xff1a; 最终效果如下&#xff1a; 以上…
阅读更多...
自定义类型：结构体、枚举、联合

自定义类型：结构体、枚举、联合

目录 结构体 结构体的基础知识 结构的声明 特殊的声明 结构体的自引用 结构体变量的定义和初始化 结构体内存对齐 修改默认对齐数 结构体传参 位段 什么是位段 位段的内存分配 位段的跨平台问题 位段的应用 枚举 枚举类型的定义 枚举的优点 联合体&#xff08;共…
阅读更多...
编写中间件以用于 Express 应用程序

编写中间件以用于 Express 应用程序

概述 中间件函数能够访问请求对象 (req)、响应对象 (res) 以及应用程序的请求/响应循环中的下一个中间件函数。下一个中间件函数通常由名为 next 的变量来表示。 中间件函数可以执行以下任务&#xff1a; 执行任何代码。对请求和响应对象进行更改。结束请求/响应循环。调用堆…
阅读更多...
Java“牵手”1688图片识别商品接口数据，图片地址识别商品接口，图片识别相似商品接口，1688API申请指南

Java“牵手”1688图片识别商品接口数据，图片地址识别商品接口，图片识别相似商品接口，1688API申请指南

1688商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要通过图片地址识别获取1688商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问1688商城的网页来获取商品详情信息。以下是两种常…
阅读更多...
iperf 测试网络性能

iperf 测试网络性能

Iperf 是一个网络性能测试工具。Iperf可以测试最大TCP和UDP带宽性能&#xff0c;具有多种参数和UDP特性&#xff0c;可以根据需要调整&#xff0c;可以报告带宽、延迟抖动和数据包丢失。 官网&#xff1a;iperf.fr https://iperf.fr 支持参数 参数说明-p, --port #Server 端监…
阅读更多...
超图嵌入论文阅读1：对偶机制非均匀超网络嵌入

超图嵌入论文阅读1：对偶机制非均匀超网络嵌入

超图嵌入论文阅读1&#xff1a;对偶机制非均匀超网络嵌入 原文&#xff1a;Nonuniform Hyper-Network Embedding with Dual Mechanism ——TOIS&#xff08;一区 CCF-A&#xff09; 背景 超边&#xff1a;每条边可以连接不确定数量的顶点 我们关注超网络的两个属性&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023