一年前那时我做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比较的更多相关文章

  1. iOS 开源项目

    在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...

  2. 收集Github上的iOS控件和开发资料

    文章来源:http://www.mobile-open.com/2015/85017.html 动画 awesome-ios-animation 收集了iOS平台下比较主流炫酷的几款动画框架 RCTR ...

  3. Github 上的 iOS 开源项目

    在 Github 上 Star 太多了,有时候很难找到自己想要的开源库,所以在此记录下来.便于自己开发使用,也顺便分享给大家. 动画 awesome-ios-animation收集了iOS平台下比较主 ...

  4. Github上的iOS资料-个人记录

    动画 awesome-ios-animation收集了iOS平台下比较主流炫酷的几款动画框架 RCTRefreshControlqq的下拉刷新 TBIconTransitionKiticon 的点击动 ...

  5. iOS开发之Masonry框架源码深度解析

    Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁.Masonry简化了NSLayoutConstraint的使用方式,让 ...

  6. 【原】Masonry+UIScrollView的使用注意事项

    [原]Masonry+UIScrollView的使用注意事项 本文转载请注明出处 —— polobymulberry-博客园 1.问题描述 我想实现的使用在一个UIScrollView依次添加三个UI ...

  7. Xcode8+和iOS10+使用Masonry自动计算行高

    说起tableView的自动计算行高,真的是不想再提了,写了不知道几百遍了.可就是这麽一个小玩意儿,把我给难的不行不行的,眼看都要没头发了. 1.设置tableView的预估行高和行高为自动计算 // ...

  8. Masonry和FDTemplateLayoutCell 结合使用示例Demo

    我们知道,界面布局可以用Storyboard或Xib结合Autolayout实现,如果用纯代码布局,比较热门的有Masonry.SDAutoLayout,下面的简单demo,采用纯代码布局,实现不定高 ...

  9. Masonry介绍与使用实践:快速上手Autolayout

    1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 w ...

随机推荐

  1. javascript编程: JSON, Mapping, 回调

    使用 Javascript  编程, 组合使用 JSON 数据格式,Mapping 和回调技术, 可以产生很强的表达效果. 在实际工作中, 总会有数据汇总的需求. 比如说, 取得了多个 device ...

  2. T-SQL 的简单查询语句

    通配符: “_”: 代表匹配一个字符 “%”: 代表匹配多个字符: []:表示范围,可以包含多个数据 [^] 表示取反 “-“  表示范围 逻辑与 and 逻辑或 or  逻辑非 not 聚会函数 : ...

  3. Temporary ASP.NET 拒绝访问

    CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\dd813f66 ...

  4. php中的json_encode()和json_decode()函数的一些说明

    一,json语法( php中的json_decode($json)中的$json要符合json语法格式 ) ① JSON可以表示三种类型的值 1,简单值.包括整型,字符串型,布尔值和null.例如:5 ...

  5. How To Use FETCH_RECORDS In Oracle Forms

    When called from an On-Fetch trigger, initiates the default Form Builder processing for fetching rec ...

  6. 文件上传和下载(可批量上传)——Spring(二)

    针对SpringMVC的文件上传和下载.下载用之前“文件上传和下载——基础(一)”的依然可以,但是上传功能要修改,这是因为springMVC 都为我们封装好成自己的文件对象了,转换的过程就在我们所配置 ...

  7. Beaglebone Black – 智能家居控制系统 LAS - 插座组装

    上一篇完成了服务端,这次是拼图的最后一块,插座. 插座一个,准备废掉它其中一个插头 预想电路草图 物料清单: 两路插座一个 继电器一个,3.3V 能驱动即可: 交流转直流 3.3V,我买了现成的模块: ...

  8. 单据类型BE构建

    开发流程:BE--UI--发布在开发时有必要对元数据.代理调用.弱类型.强类型有所了解基本的单据开发包括单据类型BE.单据状态BE.单据BE,下面分别罗列出各单据的BE的设计开发: 本章主要讲解单据类 ...

  9. 用spring的InitializingBean作初始化

    org.springframework.beans.factory包下有一个接口是InitializingBean 只有一个方法: /**  * Invoked by a BeanFactory af ...

  10. 实现文本框默认灰色文字,点击消失,如果没输入内容可再返回原来的灰色文字(js版)

    $(document).ready(function(){ $("#biaoqian").val('这里是默认的灰色文字'); $("#biaoqian").c ...