【iOS】Masonry的基本使用

news2024/10/5 11:17:13

文章目录

  • 前言
  • 一、使用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.coloradmin.cn/o/952745.html

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

相关文章

Scrum敏捷开发工具：提高团队协作与交付效率

Scrum敏捷开发工具：提高团队协作与交付效率

随着软件开发行业的不断发展和进步，Scrum敏捷开发工具逐渐成为了备受关注的话题。 Scrum是一种灵活且高效的项目管理方法，旨在提高团队协作和交付效率，使团队能够更快地响应变化和需求。 本文将深入探讨Scrum敏捷开发工具的基本概念、使用方…
阅读更多...
YOLOv5、YOLOv7 注意力机制改进SEAM、MultiSEAM、TripletAttention

YOLOv5、YOLOv7 注意力机制改进SEAM、MultiSEAM、TripletAttention

用于学习记录 文章目录 前言一、SEAM、MultiSEAM1.1 models/common.py1.2 models/yolo.py1.3 models/SEAM.yaml1.4 models/MultiSEAM.yaml1.5 SEAM 训练结果图1.6 MultiSEAM 训练结果图二、TripletAttention2.1 models/common.py2.2 models/yolo.py2.3 yolov7/cfg/training/Tri…
阅读更多...
知识图谱(1)知识存储与检索

知识图谱(1)知识存储与检索

目录 Neo4j在win系统安装Neo4j基础语法知识图谱创建知识图谱查询知识图谱属性增减 python与neo4j Neo4j在win系统安装 图数据库（graph database）是一种特殊的数据库，用于存储丰富的关系数据，neo4j是目前最流行的图数据库&#xf…
阅读更多...
RedHat7 配置国内清华大学yum源

RedHat7 配置国内清华大学yum源

1.前置准备工作 #导入gpg key rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org #在/etc/yum.repos.d/下安装elrepo.repo 文件 yum install https://www.elrepo.org/elrepo-release-7.el7.elrepo.noarch.rpm2.vim未安装可以先安装一下 sudo yum install vim3.编辑…
阅读更多...
微信小程序scroll-view隐藏滚动条参数不生效问题

微信小程序scroll-view隐藏滚动条参数不生效问题

如题&#xff0c;先来看看问题是怎么出现的。 先看文档如何隐藏滚动条&#xff1a; 再根据文档实现wxml文件&#xff1a; <scroll-view show-scrollbar"{{false}}" enhanced><view wx:for"{{1000}}">11111</view> </scroll-view>…
阅读更多...
Nacos使用(下):SpringBoot和SpringCloud项目中使用Nacos

Nacos使用(下):SpringBoot和SpringCloud项目中使用Nacos

Nacos使用(上)&#xff1a;Nacos安装 Nacos使用(中)&#xff1a;Java项目和Spring项目使用Nacos Nacos使用(下):SpringBoot和SpringCloud项目中使用Nacos 3.3 SpringBoot SDK 父工程指定springboot版本&#xff1a; <dependencyManagement><dependencies><depe…
阅读更多...
AI:05 - 基于深度学习的道路交通信号灯的检测与识别

AI:05 - 基于深度学习的道路交通信号灯的检测与识别

随着人工智能的快速发展，基于深度学习的视觉算法在道路交通领域中起到了重要作用。本文将探讨如何利用深度学习技术实现道路交通信号灯的检测与识别，通过多处代码实例展示技术深度。 道路交通信号灯是指示交通参与者行驶和停止的重要信号。准确地检测和识别交通信号灯对于智…
阅读更多...
【MySQL】JDBC

【MySQL】JDBC

目录 1.JDBC 2.Java代码操作MySQL 2.1前置条件 2.2常用操作 2.2.1插入 2.2.2删除 2.2.3查询 1.JDBC 概念&#xff1a;JDBC&#xff0c;即Java Database Connectivity( java数据库连接 )。是一种用于执行SQL语句的Java API&#xff0c;它是Java中的数据库连接规范。这个A…
阅读更多...
2611B数字源表

2611B数字源表

Keithley 2611B源表使精密DC、脉冲和低频交流源测量测试比以前更快、更容易、更经济。吉时利2611B的I-V功能测试速度是竞争产品的2到4倍&#xff0c;它结合了: 吉时利的高速第三代源测量单元(SMU)设计嵌入式测试脚本处理器(TSP)TSP-Link&#xff0c;一种快速触发和单元间通信总…
阅读更多...
1775_树莓派3B键盘映射错误解决

1775_树莓派3B键盘映射错误解决

全部学习汇总&#xff1a; GitHub - GreyZhang/little_bits_of_raspberry_pi: my hacking trip about raspberry pi. 入手树莓派3B之后用了没有多长时间&#xff0c;最初的这段时间感觉想让它代替我的PC机是不肯能的。性能先不说&#xff0c;我完全没有找到当初在我的笔记本上使…
阅读更多...
java基础-----第三篇

java基础-----第三篇

系列文章目录 文章目录 系列文章目录前言一、final二、String、StringBuffer、StringBuilder前言 一、final 最终的 修饰类：表示类不可被继承 修饰方法：表示方法不可被子类覆盖，但是可以重载 修饰变量：表示变量一旦被赋值就不可以更改它的值。 （1）修饰成员变量 如果fina…
阅读更多...
【Go 基础篇】Go语言结构体实例的创建详解

【Go 基础篇】Go语言结构体实例的创建详解

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;允许我们定义自己的复杂数据结构。通过结构体&#xff0c;我们可以将不同类型的数据字段组合成一个单一的实例&#xff0c;从而更好地组织和管理数据。然而&#xff0c;在创建结构体实例时&#xff0c;有一些注意…
阅读更多...
用深度强化学习来玩Flappy Bird

用深度强化学习来玩Flappy Bird

目录 演示视频 核心代码 演示视频 用深度强化学习来玩Flappy Bird 核心代码 import torch.nn as nnclass DeepQNetwork(nn.Module):def __init__(self):super(DeepQNetwork, self).__init__()self.conv1 nn.Sequential(nn.Conv2d(4, 32, kernel_size8, stride4), nn.ReLU(inp…
阅读更多...
java八股文面试[数据库]——MySql聚簇索引和非聚簇索引区别

java八股文面试[数据库]——MySql聚簇索引和非聚簇索引区别

聚集索引和非聚集索引 聚集索引和非聚集索引的根本区别是表记录的排列顺序和与索引的排列顺序是否一致。 1、聚集索引 聚集索引表记录的排列顺序和索引的排列顺序一致&#xff08;以InnoDB聚集索引的主键索引来说&#xff0c;叶子节点中存储的就是行数据&#xff0c;行数据在…
阅读更多...
【Go 基础篇】Go语言结构体之间的转换与映射

【Go 基础篇】Go语言结构体之间的转换与映射

在Go语言中&#xff0c;结构体是一种强大的数据类型&#xff0c;用于定义和组织不同类型的数据字段。当我们处理复杂的数据逻辑时&#xff0c;常常需要在不同的结构体之间进行转换和映射&#xff0c;以便实现数据的转移和处理。本文将深入探讨Go语言中结构体之间的转换和映射技…
阅读更多...
Folx 5适用Mac的BT客户端下载器

Folx 5适用Mac的BT客户端下载器

Mac 上免费的网络下载管理器Folx Mac 下载器有一个支持 Retina 显示的现代界面。提供独特的系统排序、存储下载内容与预览下载文件。Folx 是具有真正 Mac 风格界面的 macOS 免费下载管理器。它提供了方便的下载管理,灵活的设置等。Folx 专业版是 Mac 上一个出色的种子下载器&am…
阅读更多...
Solidity 小白教程：4. 函数输出 return

Solidity 小白教程：4. 函数输出 return

Solidity 小白教程&#xff1a;4. 函数输出 return 这一讲&#xff0c;我们将介绍Solidity函数输出&#xff0c;包括&#xff1a;返回多种变量&#xff0c;命名式返回&#xff0c;以及利用解构式赋值读取全部和部分返回值。 返回值 return 和 returns Solidity有两个关键字与…
阅读更多...
1773_把vim的tab键设置为4个空格显示

1773_把vim的tab键设置为4个空格显示

全部学习汇总&#xff1a; GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 有时候自己觉得自己很奇怪&#xff0c;看着Linux的命令窗口就觉得很顺眼。那些花花绿绿的字符以及繁多的方便命令工具&#xff0c;确实是比Windows强不少。不过&a…
阅读更多...
电脑前置耳机没声音怎么办

电脑前置耳机没声音怎么办

有很多小伙伴反映在将自己的耳机连接到主机前面时没有声音&#xff0c;这是怎么回事呢&#xff0c;遇到这种情况应该怎么解决呢&#xff0c;下面小编就给大家详细介绍一下电脑前置耳机没声音的解决方法&#xff0c;有需要的小伙伴可以来看一看电脑前面耳机没声音。 解决方法&a…
阅读更多...
SpringCloud（十）——ElasticSearch简单了解（三）数据聚合和自动补全

SpringCloud（十）——ElasticSearch简单了解（三）数据聚合和自动补全

文章目录 1. 数据聚合1.1 聚合介绍1.2 Bucket 聚合1.3 Metrics 聚合1.4 使用 RestClient 进行聚合 2. 自动补全2.1 安装补全包2.2 自定义分词器2.3 自动补全查询2.4 拼音自动补全查询2.5 RestClient 实现自动补全2.5.1 建立索引2.5.2 修改数据定义2.5.3 补全查询2.5.4 解析结果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023