一年前那时我做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