Masonry源码解析

简介: Masonry源码解析

Masonry的核心依然是使用原生的NSLayoutConstraint类来进行添加约束,通过统一的封装和链式函数式编程的方式让开发者添加约束布局更加方便。


一、核心的View+MASAdditions类别


   这个类别是Masonry中用来添加,更新和重置约束的核心类别。其中提供了我们最常用的布局函数。首先从类别命名上也可以看出,此类别扩展的类是通过宏来设置的:


@interface MAS_VIEW (MASAdditions)

MAS_VIEW宏做到了平台屏蔽的作用,在iOS上,其为UIView,在MacOS上其实NSView。


   MASAdditions类别中定义了许多布局属性,例如上,下,左,右边距,宽度高度等等。这些属性被抽象为MASViewAttribute对象,关于这个对象,后面会具体介绍。


//左

@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;

//上

@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;

//右

@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;

//下

@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;

//前

@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;

//后

@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;

//宽

@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;

//高

@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;

//水平中心

@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;

//垂直中心

@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;

//基线

@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;

//这个是一个链式编程的通用转换方法,使用这个属性将系统的NSLayoutAttribute转换成抽象的MASViewAttribute对象

@property (nonatomic, strong, readonly) MASViewAttribute *(^mas_attribute)(NSLayoutAttribute attr);


//基线相关

@property (nonatomic, strong, readonly) MASViewAttribute *mas_firstBaseline;

@property (nonatomic, strong, readonly) MASViewAttribute *mas_lastBaseline;


//安全区 相关

@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuide API_AVAILABLE(ios(11.0),tvos(11.0));

@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideTop API_AVAILABLE(ios(11.0),tvos(11.0));

@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideBottom API_AVAILABLE(ios(11.0),tvos(11.0));

@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideLeft API_AVAILABLE(ios(11.0),tvos(11.0));

@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideRight API_AVAILABLE(ios(11.0),tvos(11.0));


//关联的key值

@property (nonatomic, strong) id mas_key;

下面是3个最常使用的布局方法:


//创建约束

- (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;

这3个函数的具体实现基本一致,其核心流程都是:关闭视图Autoresizing特性->创建约束生成器->配置约束生成器->回调开发者约束设置->进行约束加载。这3个函数不同的地方只在配置约束生成器部分,配置了updateExisting参数为YES,表示要进行已有约束的更新,配置了removeExisting为YES表示要重新创建约束。约束生成器被抽象为MASConstraintMaker对象,下面来具体看这个类。


二、MASConstraintMaker约束生成器


   MASConstraint类主要用来构建约束对象。其中虽然和MASAdditions扩展类似,也是定义了约束属性对象,但是其所有的Get方法都被重新实现了,当我们通过Get方法调用约束属性时,会执行下面核心函数:


- (MASConstraint *)constraint:(MASConstraint *)constraint addConstraintWithLayoutAttribute:(NSLayoutAttribute)layoutAttribute {

   //创建属性

   MASViewAttribute *viewAttribute = [[MASViewAttribute alloc] initWithView:self.view layoutAttribute:layoutAttribute];

   //创建约束对象

   MASViewConstraint *newConstraint = [[MASViewConstraint alloc] initWithFirstViewAttribute:viewAttribute];

   if ([constraint isKindOfClass:MASViewConstraint.class]) {

       //进行复合

       //replace with composite constraint

       NSArray *children = @[constraint, newConstraint];

       MASCompositeConstraint *compositeConstraint = [[MASCompositeConstraint alloc] initWithChildren:children];

       compositeConstraint.delegate = self;

       [self constraint:constraint shouldBeReplacedWithConstraint:compositeConstraint];

       return compositeConstraint;

   }

   if (!constraint) {

       newConstraint.delegate = self;

       [self.constraints addObject:newConstraint];

   }

   //将约束对象返回

   return newConstraint;

}

上面函数的设计可以巧妙的实现复合约束,例如make.width.height.equalTo(@100)这样一条约束,实际上从width开始后面的属性都被复合进了MASCompositeConstraint对象。约束的属性创建出来后,需要对其进行值的设置,下面来看MASViewConstraint对象。


三、MASConstraint约束对象


   MASViewConstraint类继承自MASConstraint类,MASConstraint类还有一个子类为MASCompositeConstraint类。MASConstraint中定义了基础的约束值设置方法,都是采用block回调的方式,因此可以进行链式编程:


//位置

- (MASConstraint * (^)(MASEdgeInsets insets))insets;

//尺寸偏移

- (MASConstraint * (^)(CGSize offset))sizeOffset;

//中心位置偏移

- (MASConstraint * (^)(CGPoint offset))centerOffset;

//比例 *

- (MASConstraint * (^)(CGFloat multiplier))multipliedBy;

//比例 /

- (MASConstraint * (^)(CGFloat divider))dividedBy;

//优先级

- (MASConstraint * (^)(MASLayoutPriority priority))priority;

//直接设置为低优先级

- (MASConstraint * (^)(void))priorityLow;

//直接设置为中优先级

- (MASConstraint * (^)(void))priorityMedium;

//直接设置为高优先级

- (MASConstraint * (^)(void))priorityHigh;

//设置绝对等于

- (MASConstraint * (^)(id attr))equalTo;

//大于等于

- (MASConstraint * (^)(id attr))greaterThanOrEqualTo;

//小于等于

- (MASConstraint * (^)(id attr))lessThanOrEqualTo;

阅读这个属性的Get方法,你会发现他们最后都返回了当前对象本身,这也是为链式编程所准备,MASConstraint中还有两个属性比较有趣:


- (MASConstraint *)with;

- (MASConstraint *)and;

这两个属性没有实际的作用也没有任何影响,他们的实现是直接返回当前对象,增强代码可读性。


   MASConstraint类中的install和uninstall函数是核心的约束添加方法,其中会进行系统原生约束对象的转换添加或者删除操作。核心的install函数解析如下:


- (void)install {

   //如果已经被加载 直接返回

   if (self.hasBeenInstalled) {

       return;

   }

   //如果系统layout对象已经创建 直接添加之后 返回

   if ([self supportsActiveProperty] && self.layoutConstraint) {

       self.layoutConstraint.active = YES;

       [self.firstViewAttribute.view.mas_installedConstraints addObject:self];

       return;

   }

   //获取布局的视图与属性

   MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item;

   NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute;

   MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item;

   NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;

   //如果不是尺寸布局并且 相对视图不存在 默认对父视图进行相对布局

   if (!self.firstViewAttribute.isSizeAttribute && !self.secondViewAttribute) {

       secondLayoutItem = self.firstViewAttribute.view.superview;

       secondLayoutAttribute = firstLayoutAttribute;

   }

   //创建布局对象

   MASLayoutConstraint *layoutConstraint

       = [MASLayoutConstraint constraintWithItem:firstLayoutItem

                                       attribute:firstLayoutAttribute

                                       relatedBy:self.layoutRelation

                                          toItem:secondLayoutItem

                                       attribute:secondLayoutAttribute

                                      multiplier:self.layoutMultiplier

                                        constant:self.layoutConstant];

   //设置key和优先级

   layoutConstraint.priority = self.layoutPriority;

   layoutConstraint.mas_key = self.mas_key;

   //设置约束对象对用于的视图

   if (self.secondViewAttribute.view) {

       //获取共同的父视图

       MAS_VIEW *closestCommonSuperview = [self.firstViewAttribute.view mas_closestCommonSuperview:self.secondViewAttribute.view];

       NSAssert(closestCommonSuperview,

                @"couldn't find a common superview for %@ and %@",

                self.firstViewAttribute.view, self.secondViewAttribute.view);

       self.installedView = closestCommonSuperview;

   } else if (self.firstViewAttribute.isSizeAttribute) {

       self.installedView = self.firstViewAttribute.view;

   } else {

       self.installedView = self.firstViewAttribute.view.superview;

   }



   MASLayoutConstraint *existingConstraint = nil;

   //更新约束的操作

   if (self.updateExisting) {

       existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint];

   }

   if (existingConstraint) {

       // just update the constant

       existingConstraint.constant = layoutConstraint.constant;

       self.layoutConstraint = existingConstraint;

   } else {

       //添加约束

       [self.installedView addConstraint:layoutConstraint];

       self.layoutConstraint = layoutConstraint;

       [firstLayoutItem.mas_installedConstraints addObject:self];

   }

}


目录
相关文章
|
10月前
|
算法 测试技术 C语言
深入理解HTTP/2:nghttp2库源码解析及客户端实现示例
通过解析nghttp2库的源码和实现一个简单的HTTP/2客户端示例,本文详细介绍了HTTP/2的关键特性和nghttp2的核心实现。了解这些内容可以帮助开发者更好地理解HTTP/2协议,提高Web应用的性能和用户体验。对于实际开发中的应用,可以根据需要进一步优化和扩展代码,以满足具体需求。
951 29
|
10月前
|
前端开发 数据安全/隐私保护 CDN
二次元聚合短视频解析去水印系统源码
二次元聚合短视频解析去水印系统源码
421 4
|
10月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
移动开发 前端开发 JavaScript
从入门到精通:H5游戏源码开发技术全解析与未来趋势洞察
H5游戏凭借其跨平台、易传播和开发成本低的优势,近年来发展迅猛。接下来,让我们深入了解 H5 游戏源码开发的技术教程以及未来的发展趋势。
|
10月前
|
存储 前端开发 JavaScript
在线教育网课系统源码开发指南:功能设计与技术实现深度解析
在线教育网课系统是近年来发展迅猛的教育形式的核心载体,具备用户管理、课程管理、教学互动、学习评估等功能。本文从功能和技术两方面解析其源码开发,涵盖前端(HTML5、CSS3、JavaScript等)、后端(Java、Python等)、流媒体及云计算技术,并强调安全性、稳定性和用户体验的重要性。
|
11月前
|
机器学习/深度学习 自然语言处理 算法
生成式 AI 大语言模型(LLMs)核心算法及源码解析:预训练篇
生成式 AI 大语言模型(LLMs)核心算法及源码解析:预训练篇
2872 1
|
10月前
|
负载均衡 JavaScript 前端开发
分片上传技术全解析:原理、优势与应用(含简单实现源码)
分片上传通过将大文件分割成多个小的片段或块,然后并行或顺序地上传这些片段,从而提高上传效率和可靠性,特别适用于大文件的上传场景,尤其是在网络环境不佳时,分片上传能有效提高上传体验。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
390 2
|
设计模式 存储 安全
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
创建型模式的主要关注点是“怎样创建对象?”,它的主要特点是"将对象的创建与使用分离”。这样可以降低系统的耦合度,使用者不需要关注对象的创建细节。创建型模式分为5种:单例模式、工厂方法模式抽象工厂式、原型模式、建造者模式。
【23种设计模式·全精解析 | 创建型模式篇】5种创建型模式的结构概述、实现、优缺点、扩展、使用场景、源码解析
|
存储 设计模式 算法
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析
行为型模式用于描述程序在运行时复杂的流程控制,即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务,它涉及算法与对象间职责的分配。行为型模式分为类行为模式和对象行为模式,前者采用继承机制来在类间分派行为,后者采用组合或聚合在对象间分配行为。由于组合关系或聚合关系比继承关系耦合度低,满足“合成复用原则”,所以对象行为模式比类行为模式具有更大的灵活性。 行为型模式分为: • 模板方法模式 • 策略模式 • 命令模式 • 职责链模式 • 状态模式 • 观察者模式 • 中介者模式 • 迭代器模式 • 访问者模式 • 备忘录模式 • 解释器模式
1023 1
【23种设计模式·全精解析 | 行为型模式篇】11种行为型模式的结构概述、案例实现、优缺点、扩展对比、使用场景、源码解析

推荐镜像

更多
  • DNS