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实现自动布局，对比一下他们的使用。

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比较

相关文章