【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)view1
                       attribute:(NSLayoutAttribute)attr1
                       relatedBy:(NSLayoutRelation)relation
                          toItem:(nullable id)view2
                       attribute:(NSLayoutAttribute)attr2
                      multiplier:(CGFloat)multiplier
                        constant:(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.mfbz.cn/a/101889.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深入解析即时通讯App开发中的关键技术

深入解析即时通讯App开发中的关键技术

即时通讯App开发在现代社交和通信领域中扮演着重要的角色。随着移动设备的普及和网络的高速发展，人们对即时通讯工具的需求不断增加。本篇文章将深入探讨即时通讯App开发中的关键技术，帮助读者了解该领域的最新动态和技术趋势。 基础架构和通信协议 现…
阅读更多...
RabbitMQ工作模式-发布订阅模式

RabbitMQ工作模式-发布订阅模式

Publish/Subscribe（发布订阅模式） 官方文档： https://www.rabbitmq.com/tutorials/tutorial-three-python.html 使用fanout类型类型的交换器，routingKey忽略。每个消费者定义生成一个队列关绑定到同一个Exchange，每个…
阅读更多...
某人事系统架构搭建设计记录

某人事系统架构搭建设计记录

首发博客地址 https://blog.zysicyj.top/ 先大致列一下基础情况 架构必须是微服务 场景上涉及大量查询操作，分析操作 存在临时大量写入的场景 并发并不高 对高可用要求较高，不能挂掉 对安全要求高 要能过等保测试等三方测试 使用人数并不多，十…
阅读更多...
SpringBoot-学习笔记（基础）

SpringBoot-学习笔记（基础）

文章目录 1. 概念1.1 SpringBoot快速入门1.2 SpringBoot和Spring对比1.3 pom文件坐标介绍1.4 引导类1.5 修改配置1.6 读取配置1.6.1 读取配置信息1.6.2 读取配置信息并创建类进行封装 1.7 整合第三方技术1.7.1 整合JUnit1.7.1 整合Mybatis1.7.1 整合Mybatis-Plus1.7.1 整合Drui…
阅读更多...
SpringCloudAlibaba Gateway(三)-整合Sentinel功能路由维度、API维度进行流控

SpringCloudAlibaba Gateway(三)-整合Sentinel功能路由维度、API维度进行流控

Gateway整合Sentinel ​ 前面使用过Sentinel组件对服务提供者、服务消费者进行流控、限流等操作。除此之外，Sentinel还支持对Gateway、Zuul等主流网关进行限流。 ​ 自sentinel1.6.0版开始，Sentinel提供了Gateway的适配模块，能针对路由(rou…
阅读更多...
ARM编程模型-寄存器组

ARM编程模型-寄存器组

Cortex A系列ARM处理器共有40个32位寄存器,其中33个为通用寄存器,7个为状态寄存器。usr模式和sys模式共用同一组寄存器。 通用寄存器包括R0~R15,可以分为3类: 未分组寄存器R0~R7分组寄存器R8~R14、R13(SP) 、R14(LR)程序计数器PC(R15)、R8_fiq-R12_fir为快中断独有 在不同模…
阅读更多...
Go的数据结构-hashmap

Go的数据结构-hashmap

开放寻址法和拉链法 runtime.hamp bucket的数据结构 bucket的指针指向这里 map初始化：make 和字面量 make初始化 新建一个hamp结尾体，计算大B，创建一个桶数组 字面量初始化 map的并发解决 sync.map
阅读更多...
leetcode622-设计循环队列

leetcode622-设计循环队列

本题重点： 1. 选择合适的数据结构 2. 针对选择的数据结构判断“空”和“满” 这两点是不分先后次序的，在思考时应该被综合起来。事实上，无论我们选择链表还是数组，最终都能实现题中描述的“循环队列”的功能，只不过…
阅读更多...
HTTP协议概述

HTTP协议概述

HTTP 协议定义 HTTP协议，直译为超文本传输协议，是一种用于分布式、协作、超媒体的信息系统的应用协议。HTTP协议是万维网数据通信的基础。HTTP协议在客户端-服务器计算模型中充当请求-响应协议。客户端向服务器提交HTTP请求消息。服务器提供HTML文件和其…
阅读更多...
在springboot项目中显示Services面板的方法

在springboot项目中显示Services面板的方法

文章目录 前言方法一：Alt8快捷键方法二：使用Component标签总结 前言 在一个springboot项目中，通过开启Services面板，可以快速的启动、配置、管理多个子项目。 方法一：Alt8快捷键 1、在idea界面输入Alt8，在…
阅读更多...
IP网络广播系统有哪些优点

IP网络广播系统有哪些优点

IP网络广播系统有哪些优点 IP网络广播系统有哪些优点？ IP网络广播系统是基于 TCP/IP 协议的公共广播系统，采用 IP 局域网或 广域网作为数据传输平台，扩展了公共广播系统的应用范围。随着局域网络和 网络的发展 , 使网络广播的普及变为可能 …
阅读更多...
从零开始探索C语言（四）----循环

从零开始探索C语言（四）----循环

文章目录 1. C 循环1.1 while 循环1.2 for 循环1.3 do...1.4 嵌套循环 2. 循环控制语句2.1 break 语句2.2 continue 语句2.3 goto 语句 1. C 循环 有的时候，我们可能需要多次执行同一块代码。一般情况下，语句是按顺序执行的：函数中的第一个语…
阅读更多...
ELK安装、部署、调试（五）filebeat的安装与配置

ELK安装、部署、调试（五）filebeat的安装与配置

1.介绍 logstash 也可以收集日志，但是数据量大时太消耗系统新能。而filebeat是轻量级的，占用系统资源极少。 Filebeat 由两个主要组件组成：harvester 和 prospector。 采集器 harvester 的主要职责是读取单个文件的内容。读取每个文件&…
阅读更多...
软件测试Day5|软件测试理论03

软件测试Day5|软件测试理论03

白盒测试方法 针对程序的代码进行测试，代码覆盖率高；缺点：覆盖所有代码路径大、业务功能可能覆盖不全、测试开销大 静态方法：1）桌面检查（一个人检查）；2）代码审查&#…
阅读更多...
链表OJ练习（2）

链表OJ练习（2）

一、分割链表 题目介绍： 思路：创建两个链表，ghead尾插大于x的节点，lhead尾插小于x的节点。先遍历链表。最后将ghead尾插到lhead后面，将大小链表链接。 我们需要在创建两个链表指针，指向两个链表的头节点&…
阅读更多...
WebAssembly 在云原生中的实践指南

WebAssembly 在云原生中的实践指南

1 WebAssembly 介绍 WebAssembly（Wasm）是一种通用字节码技术，它可以将其他编程语言（如 Go、Rust、C/C 等）的程序代码编译为可在浏览器环境直接执行的字节码程序。 WebAssembly 的初衷之一是解决 JavaScript 的性能问…
阅读更多...
Nginx基础+高级（2022版）：待更新

Nginx基础+高级（2022版）：待更新

1. 文章说明 说明：目前讲的是第一部分nginx核心技术篇，后需篇章会以第一部分为核心技术篇为基础来展开深度讲解，详情关注后续课程的发布。 2. 介绍和准备环境 2.1 介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器&#xf…
阅读更多...
【QT】使用qml的QtWebEngine遇到的一些问题总结

【QT】使用qml的QtWebEngine遇到的一些问题总结

在使用qt官方的一些QML的QtWebEngine相关的例程的时候，有时在运行会报如下错误： WebEngineContext used before QtWebEngine::initialize() or OpenGL context creation failed 这个问题在main函数里面最前面加上： QCoreApplication::setAttr…
阅读更多...
元素居中的方法总结

元素居中的方法总结

目录 垂直居中 行内元素垂直居中 单行文本垂直居中 1.line-height: 200px; 多行文本垂直居中 1.tablevertical-align:middle 块级元素垂直居中 1.display: flex;align-items: center; 2.使用position top margin-top 水平居中 行内元素水平居中 1.text-align:cente…
阅读更多...
CUDA小白 - NPP(3) 图像处理 Color and Sampling Conversion

CUDA小白 - NPP(3) 图像处理 Color and Sampling Conversion

cuda小白 原始API链接 NPP GPU架构近些年也有不少的变化，具体的可以参考别的博主的介绍，都比较详细。还有一些cuda中的专有名词的含义，可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》 常见的NppStatus&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站