PureLayout和Masonry比较
一年前那时我做iOS开发,为了自动布局适配多种屏幕,我一般使用Masonry,后来偶然地在一个视频教程中发现老师使用了UIView+Autolayout(现在作者改名为PureLayout)自动布局,发现PureLayout的自动布局方式更符合OC开发者的习惯,使用起来更简单直观。此后我做项目或者带团队做项目一般都优先使用PureLayout。最新加入一个团队,他们依然在使用Masonry,不可否认,在苹果推出NSAutoLayoutContrant初期,Masonry给开发者带来了极大的便利,但是PureLayout的出现,又进一步的让自动布局应用更简单,可读性也更强。下文我就对这两种自动布局框架做个对比,希望越来越多的开发者开始使用PureLayout。
Masonry:github地址:https://github.com/SnapKit/Masonry
PureLayout:github地址:https://github.com/smileyborg/PureLayout
PureLayout和Masonry比较
下面我通过一个例子,例子分别使用PureLayout和Masonry实现自动布局,对比一下他们的使用。

创建一个单视图空白项目,并在viewDidload内部添加4个view 。
UIView *redView = [[UIView alloc]init]; redView.backgroundColor = [UIColor redColor]; [self.view addSubview:redView]; UIView *blueView = [[UIView alloc]init]; blueView.backgroundColor = [UIColor blueColor]; [self.view addSubview:blueView]; UIView *yellow = [[UIView alloc]init]; yellow.backgroundColor = [UIColor yellowColor]; [self.view addSubview:yellow]; UIView *green = [[UIView alloc]init]; green.backgroundColor = [UIColor greenColor]; [self.view addSubview:green];
1.使用Masonry实现自动布局,达到如图效果需要的代码。
- (void)useMasonry
{
[self.redView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.view.mas_left).offset();//使左边等于self.view的左边,间距为0
make.top.equalTo(self.view.mas_top).offset();//使顶部与self.view的间距为0
make.width.equalTo(self.view.mas_width).multipliedBy(0.5);//设置宽度为self.view的一半,multipliedBy是倍数的意思,也就是,使宽度等于self.view宽度的0.5倍
make.height.equalTo(self.view.mas_height).multipliedBy(0.5);//设置高度为self.view高度的一半
}];
[self.blueView mas_makeConstraints:^(MASConstraintMaker *make) {
make.width.and.height.equalTo(self.redView);//使宽高等于redView
make.top.equalTo(self.redView.mas_top);//与redView顶部对齐
make.left.equalTo(self.redView.mas_right);//与redView的间距为0
}];
[self.yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.equalTo(self.redView);//与redView左对齐
make.top.equalTo(self.redView.mas_bottom);//与redView底部间距为0
make.width.and.height.equalTo(self.redView);//与redView宽高相等
}];
[self.greenView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.yellowView.mas_right);//与yellow右边间距为0
make.top.equalTo(self.blueView.mas_bottom);//与blueView底部间距为0
make.width.and.height.equalTo(self.redView);//与redView等宽高
}];
}
2.使用PureLayout实现自动布局
- (void)usePureLayout
{
[self.redView autoConstrainAttribute:ALAttributeLeft toAttribute:ALAttributeLeft ofView:self.view];
[self.redView autoConstrainAttribute:ALAttributeTop toAttribute:ALAttributeTop ofView:self.view];
[self.redView autoConstrainAttribute:ALAttributeWidth toAttribute:ALAttributeWidth ofView:self.view withMultiplier:0.5];
[self.redView autoConstrainAttribute:ALAttributeHeight toAttribute:ALAttributeHeight ofView:self.view withMultiplier:0.5];
[self.blueView autoConstrainAttribute:ALAttributeLeft toAttribute:ALAttributeRight ofView:self.redView];
[self.blueView autoConstrainAttribute:ALAttributeTop toAttribute:ALAttributeTop ofView:self.view];
[self.blueView autoConstrainAttribute:ALAttributeWidth toAttribute:ALAttributeWidth ofView:self.redView withMultiplier:];
[self.blueView autoConstrainAttribute:ALAttributeHeight toAttribute:ALAttributeHeight ofView:self.redView withMultiplier:];
[self.yellowView autoConstrainAttribute:ALAttributeTop toAttribute:ALAttributeBottom ofView:self.redView];
[self.yellowView autoConstrainAttribute:ALAttributeLeft toAttribute:ALAttributeLeft ofView:self.view];
[self.yellowView autoConstrainAttribute:ALAttributeWidth toAttribute:ALAttributeWidth ofView:self.redView withMultiplier:];
[self.yellowView autoConstrainAttribute:ALAttributeHeight toAttribute:ALAttributeHeight ofView:self.redView withMultiplier:];
[self.greenView autoConstrainAttribute:ALAttributeLeft toAttribute:ALAttributeRight ofView:self.yellowView];
[self.greenView autoConstrainAttribute:ALAttributeTop toAttribute:ALAttributeBottom ofView:self.blueView];
[self.greenView autoConstrainAttribute:ALAttributeWidth toAttribute:ALAttributeWidth ofView:self.redView withMultiplier:];
[self.greenView autoConstrainAttribute:ALAttributeHeight toAttribute:ALAttributeHeight ofView:self.redView withMultiplier:];
}
通过这个例子就有一个直观的对比,PureLayout使用更符合OC的面向对象语法,而Masonry则借鉴了CSS的思想,所以更像是链条式的表达。
下面一张表对比他们的优缺点:
|
Masonry |
PureLayout |
|
|
重量级,需学习成本 |
轻量级,语法更偏向Objective-C |
|
|
添加约束 |
mas_makeConstraints使用了block模块 |
没有block |
|
更新约束 |
mas_updateConstraints保证不会导致出现两个相同约束的情况 |
开发者控制 |
|
删除约束 |
mas_remakeConstraints,没有针对IOS 8使用Active属性 |
针对IOS 8使用Active属性 |
呼应一下首段,重要的事情再说一遍希望越来越多的开发者开始使用PureLayout。本文示例代码下载地址:http://pan.baidu.com/s/1geh8XJP
PureLayout和Masonry比较的更多相关文章
- iOS 开源项目
在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...
- 收集Github上的iOS控件和开发资料
文章来源:http://www.mobile-open.com/2015/85017.html 动画 awesome-ios-animation 收集了iOS平台下比较主流炫酷的几款动画框架 RCTR ...
- Github 上的 iOS 开源项目
在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...
- Github上的iOS资料-个人记录
动画 awesome-ios-animation收集了iOS平台下比较主流炫酷的几款动画框架 RCTRefreshControlqq的下拉刷新 TBIconTransitionKiticon 的点击动 ...
- iOS开发之Masonry框架源码深度解析
Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...
- 【原】Masonry+UIScrollView的使用注意事项
[原]Masonry+UIScrollView的使用注意事项 本文转载请注明出处 —— polobymulberry-博客园 1.问题描述 我想实现的使用在一个UIScrollView依次添加三个UI ...
- Xcode8+和iOS10+使用Masonry自动计算行高
说起tableView的自动计算行高,真的是不想再提了,写了不知道几百遍了.可就是这麽一个小玩意儿,把我给难的不行不行的,眼看都要没头发了. 1.设置tableView的预估行高和行高为自动计算 // ...
- Masonry和FDTemplateLayoutCell 结合使用示例Demo
我们知道,界面布局可以用Storyboard或Xib结合Autolayout实现,如果用纯代码布局,比较热门的有Masonry.SDAutoLayout,下面的简单demo,采用纯代码布局,实现不定高 ...
- Masonry介绍与使用实践:快速上手Autolayout
1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 w ...
随机推荐
- 在C#中??和?分别是什么意思?
在C# 6.0中,引入了一个 ?. 的运算符,前面的代码可以改成如下形式: int? firstX = points?.FirstOrDefault()?.X; 从这个例子中我们也可以看出它的基本用法 ...
- 运行nodejs的blog程序遇见问题
我是运行这个教程的代码.可以在网上找到相关视频和代码. 第一个问题,数据库中没有创建对应的表就开始运行程序.node app.js 这个错误问题大家可以去重现一下 第二个问题,我也没有看明白,但是我根 ...
- win10查看连接过的wifi密码
cmd窗口 运行 “netsh wlan show profiles name="linasd" key=clear”
- js !!条件判断或运算的作用
今天看到一个判断语句非常奇怪: if(!!selected){} //为什么是双'!'号呢? 自己查了下资料终于明白了这其中的原理: 原来'!!'会将表达式转为Boolean类型的数据. 如果'!un ...
- JavaScript DOM 编程艺术(第2版)读书笔记 (9)
三位一体的网页 结构层:由HTML或XHTML之类的标记语言负责创建: 表示层:由CSS负责完成: 行为层:负责内容应该如何响应事件这一问题.这是由JavaScript语言和DOM主宰的领域. 分离 ...
- 关于cookie的文章(cookie与session机制)
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- wf(三)
前言: 到现在我们可以看到,WF4包含一个.xmal 文件的设计器和一个调用活动的runtime.当你创建自己的工作流的时候,你是同时也创建了一个活动, 因为活动是一个继承System.Activit ...
- JavaScript中的prototype使用说明
参考 http://abruzzi.iteye.com/blog/1026125 http://www.jb51.net/article/23052.htm
- background-clip 制作文字火焰效果
1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip || text 2. ...
- [问题2014S14] 解答
[问题2014S14] 解答 首先, 满足条件的 \(\varphi\) 的全体特征值都为零. 事实上, 任取 \(\varphi\) 的特征值 \(\lambda\), 对应的特征向量为 \(0\ ...