【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.rhkb.cn/news/114555.html

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

相关文章

持续集成与持续交付（CI/CD）：探讨在云计算中实现快速软件交付的最佳实践

持续集成与持续交付（CI/CD）：探讨在云计算中实现快速软件交付的最佳实践

文章目录 持续集成（CI）的最佳实践持续交付（CD）的最佳实践云计算环境下的特别注意事项 🎈个人主页：程序员 小侯 🎐CSDN新晋作者 🎉欢迎 👍点赞✍评论⭐收藏 ✨收录专栏&am…
阅读更多...
docker启动paddlespeech服务，并使用接口调用

docker启动paddlespeech服务，并使用接口调用

一、检查docker容器是否启动 1.输入命令 systemctl status docker 启动 systemctl start docker 守护进程重启 sudo systemctl daemon-reload 重启docker服务 systemctl restart docker 重启docker服务 sudo service docker restart 关闭docker service docker…
阅读更多...
Django实现音乐网站 ⒂

Django实现音乐网站 ⒂

使用Python Django框架制作一个音乐网站， 本篇主要是歌手详情页-基本信息、单曲列表功能开发实现内容。 目录 歌手基本信息 增加路由 显示视图 模板显示 推荐歌手跳转详情 歌手增加基本信息 表模型增加字段 数据表更新 基本信息增加内容渲染 歌手单曲列表…
阅读更多...
TL6478（TI TMS320C6748 DPS）EVM开发板技术讲座 第二讲:USB转串口驱动安装

TL6478（TI TMS320C6748 DPS）EVM开发板技术讲座 第二讲:USB转串口驱动安装

在开展我们的TL 6748 DSP开发版开发之前，需要先安装usb转串口驱动，才能使得我们的电脑上查询到该设备，使用该设备。底板上存在UART1、UART2，将评估板的 UART2 RS232 调试串口通过 RS232 交叉串口母母线、USB 转 RS232 公头串口线连接至 PC 机的 USB 接口。1. 驱动下载 USB…
阅读更多...
TCP协议基础

TCP协议基础

一： TCP协议是什么？ TCP协议是基于面向连接，可靠传输，基于字节流的传输层通信协议 1. 面向连接 TCP协议是一种面向连接的协议，意味着在双方在建立数据传输之前，需要进行一个逻辑上的连接，且是…
阅读更多...
分布式搜索引擎

分布式搜索引擎

1 DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL（Domain Specific Language）来定义查询。常见的查询类型包括： 查询所有：查询出所有数据，一…
阅读更多...
【ES6】—类与继承

【ES6】—类与继承

一、 定义类 class People {constructor (name, age) {this.name namethis.age age}showName () {console.log(this.name)} } let p1 new People(xiaoxiao, 30) console.log(p1) // People {name: xiaoxiao, age: 30}小节： 使用class关键字声明类使用construc…
阅读更多...
瓜分双十一10亿红包设计：在线分享教程？

瓜分双十一10亿红包设计：在线分享教程？

在如今激烈的市场竞争中，瓜分红包营销活动成为了各大企业争相使用的一种营销手段。这种活动不仅能够吸引用户的关注和参与，还能够提高用户的粘性和忠诚度。那么，如何自建瓜分红包营销活动呢？下面将为大家详细解析。 首先&#xff…
阅读更多...
Mysql高阶语句 （一）

Mysql高阶语句 （一）

一、常用查询 （增、删、改、查） 对 MySQL 数据库的查询，除了基本的查询外，有时候需要对查询的结果集进行处理。 例如只取 10 条数据、对查询结果进行排序或分组等等 1、按关键字排序 PS:类比于windows 任务管理器 使用 SELECT 语句…
阅读更多...
Ansible自动化运维工具

Ansible自动化运维工具

Ansible自动化运维工具 一、Ansible介绍1.Ansible工具：2.Ansible特点及优势3.Ansible核心程序4.Ansible的工作原理及流程 二、部署ansible自动化1.管理端安装ansible2.ansible 目录结构3.配置主机清单4.配置密钥对验证 三、ansible 命令行模块1.command 模块2.shell…
阅读更多...
java八股文面试[多线程]——AQS 详细介绍

java八股文面试[多线程]——AQS 详细介绍

线程同步除了Synchronized Volatile ReentranLock 之外，还有其他一些用来进行同步的机制。 AQS 简单介绍 AQS 的全称为（AbstractQueuedSynchronizer），这个类在 java.util.concurrent.locks 包下面。 AQS 是一个用来构建锁和同步器…
阅读更多...
开启智能时代：深度解析智能文档分析技术的前沿与应用

开启智能时代：深度解析智能文档分析技术的前沿与应用

开启智能时代：深度解析智能文档分析技术的前沿与应用 本章主要介绍文档分析技术的理论知识，包括背景介绍、算法分类和对应思路。通过本文学习，你可以掌握：1. 版面分析的分类和典型思想 2. 表格识别的分类和典型思想 3. 信息提取的…
阅读更多...
SpringMVC概述与简单使用

SpringMVC概述与简单使用

1.SpringMVC简介 SpringMVC也叫做Spring web mvc,是 Spring 框架的一部分，是在 Spring3.0 后发布的。 2.SpringMVC优点 1.基于 MVC 架构 基于 MVC 架构，功能分工明确。解耦合， 2.容易理解，上手快；使用简单。 就可以…
阅读更多...
1.9 动态解密ShellCode反弹

1.9 动态解密ShellCode反弹

动态解密执行技术可以对抗杀软的磁盘特征查杀。其原理是将程序代码段中的代码进行加密，然后将加密后的代码回写到原始位置。当程序运行时，将动态解密加密代码，并将解密后的代码回写到原始位置，从而实现内存加载。这种技术可以有效…
阅读更多...
WMS中Binder案例

WMS中Binder案例

WMS中Binder案例 1、FWK层中AIDL形式1.1 服务端实现Stub1.2 客户端获取proxy 2、紧密相关SurfaceFlinger android12-release 1、FWK层中AIDL形式 Android 接口定义语言 (AIDL)、Android 应用层 到 HAL 层 AIDL形式是Android中binder机制的具体实现。按照规范aidl/hidl文件自动生…
阅读更多...
keras深度学习框架通过卷积神经网络cnn实现手写数字识别

keras深度学习框架通过卷积神经网络cnn实现手写数字识别

昨天通过keras构建简单神经网络实现手写数字识别，结果在最后进行我们自己的手写数字识别的时候，准确率堪忧，只有60%。今天通过卷积神经网络来实现手写数字识别。 构建卷积神经网络和简单神经网络思路类似，只不过这里加入了卷积、池…
阅读更多...
JavaWeb 速通Ajax

JavaWeb 速通Ajax

目录 一、Ajax快速入门 1.基本介绍 : 2.使用原理 : 二、Ajax经典入门案例 1.需求 : 2.前端页面实现 : 3. 处理HTTP请求的servlet实现 4.引入jar包及druid配置文件、工具类 : 5.Domain层实现 : 6.DAO层实现 : 7.Service层实现 : 8.运行测试 : 三、JQuery操作Ajax 1 …
阅读更多...
Android studio实现圆形进度条

Android studio实现圆形进度条

参考博客 效果图 MainActivity import androidx.appcompat.app.AppCompatActivity; import android.graphics.Color; import android.os.Bundle; import android.widget.TextView;import java.util.Timer; import java.util.TimerTask;public class MainActivity extends App…
阅读更多...
OpenCV之filter2D函数

OpenCV之filter2D函数

函数原型： CV_EXPORTS_W void filter2D(InputArray src,OutputArray dst,int ddepth,InputArray kernel,Point anchorPoint(-1,-1),double delta0,int borderTypeBORDER_DEFAULT); src: 原图像； dst：输出图像 ，和输入的图像具有…
阅读更多...
Android RecyclerView 之 吸顶效果

Android RecyclerView 之 吸顶效果

前言 上一篇文章已经实现了列表跟宫格布局的动态切换，这篇文章主要来说通过 CoordinatorLayout 和 AppbarLayout 的配合，以及 NestedScrollView 来实现吸顶效果 。效果如下。 一、CoordinatorLayout 是什么？ CoordinatorLayout 是 Androi…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023