iOS 经常使用布局方式之Masonry

级别： ★☆☆☆☆
标签：「iOS Masonry」「iOS 自动布局」「Masonry」
做者： Xs·H
审校： QiShare团队

---

在 沐灵洛 线下分享iOS UIButton根据内容自动布局时，有和前端同窗讨论到iOS的经常使用布局方式。讨论过程十分热闹，不容易记录，但做者认为讨论结果有必要记录一下，但愿能帮助到一些同窗。 做者将iOS经常使用布局方式概括为Frame、Autoresizing、Constraint、StackView和Masonry五种，并将逐一介绍。 本篇文章介绍Masonry。

在iOS 经常使用布局方式之Constraint文章中，做者介绍了NSLayoutConstraint在布局界面时的强大功能，但也体验到了NSLayoutConstraint代码语法的冗长和不易阅读性。本文要介绍的Masonry就是一个轻量级的布局框架，它使用更好的语法包装AutoLayout，并提供了一种描述NSLayoutConstraint的可连接方式，从而使布局代码更简洁，更易读。

因此说，Masonry是基于NSLayoutConstraint的一种第三方框架，能够从GitHub上查看其详细介绍。这里，做者只展现一下使用Masonry实现4分图效果的代码。

@implementation QiMasonryViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    _contentView = [[QiMasonryContentView alloc] initWithFrame:CGRectZero];
    _contentView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:_contentView];
    
    [_contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top);
        make.left.equalTo(self.view.mas_left);
        make.right.equalTo(self.view.mas_right);
        make.bottom.equalTo(self.view.mas_bottom).with.offset(-20.0);
    }];
}

@end
复制代码

@implementation QiMasonryContentView

- (instancetype)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    
    if (self) {
        
        _subView1 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView1];
        
        _subView2 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView2];
        
        _subView3 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView3];
        
        _subView4 = [[UIView alloc] initWithFrame:CGRectZero];
        _subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];
        [self addSubview:_subView4];
        
        [_subView1 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(20);
            make.left.mas_equalTo(10);
            make.width.equalTo(self.subView2);
            make.height.equalTo(self.subView3);
            make.right.equalTo(self.subView2.mas_left).offset(-20);
        }];
        [_subView2 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.subView1.mas_top);
            make.right.equalTo(self).offset(-10);
            make.width.equalTo(self.subView1);
            make.height.equalTo(self.subView4);
        }];
        
        [_subView3 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(self.subView1.mas_bottom).offset(20);
            make.left.mas_equalTo(10);
            make.width.mas_equalTo(self.subView4);
            make.height.mas_equalTo(self.subView1);
            make.bottom.mas_equalTo(self).offset(-20);
        }];
        [_subView4 mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.mas_equalTo(self.subView3);
            make.left.mas_equalTo(self.subView3.mas_right).offset(20);
            make.right.mas_equalTo(self).offset(-10);
            make.width.mas_equalTo(self.subView3);
            make.height.mas_equalTo(self.subView2);
            make.bottom.mas_equalTo(self).offset(-20);
        }];
    }
    
    return self;
}

@end
复制代码

上述代码所实现的效果以下图所示。

文章中的代码能够从QiLayoutDemo中获取。

iOS 经常使用布局方式总结

截止本篇文章，做者逐一介绍了Frame、Autoresizing、Constraint、StackView和Masonry五种iOS经常使用布局方式。做者的目的是经过对这几种布局方式的介绍，能让一些读者同窗对iOS布局有个全面的了解。至于常被问到的哪一种布局方式好，实在是很差回答，但能够分享一下这些布局方式在项目中的使用状况，以及遇到的问题，供各位读者同窗参考。

• 1. Frame+Autoresizing 得益于Frame的编程灵活性和Autoresizing的简易，Frame+Autoresizing的组合布局方式在QiShare项目中占比最高。但在一些只须要操做frame某个属性（好比，只想修改宽度）时，会显得代码有点冗余。因而，引入UIView+QiAddition能够在必定程度上得以改善。以下。

_subView.qi_top = 10.0;
_subView.qi_left = 20.0;
_subView.qi_width = 300.0;
_subView.qi_height = 40.0;
复制代码

• 2. 基于Storyboard的Constraint Storyboard是个很方便的工具，在搭建一些简单界面时，比Frame编码要高效不少。结合AutoLayout的Constraint，能够快速搭建出带有布局约束的界面。可是，在对AutoLayout概念和Constraint掌握不特别清晰时，经常会出现约束冲突的状况，并且排查困难。另外，打开Storyboard文件会须要更多的电脑性能，在做者的iMac上会经常出现卡顿的现象。

• 3. 基于纯代码的Constraint+Masonry 三方库Masonry是基于NSLayoutConstraint的布局方式，用纯代码的方式能够更易阅读地实现控件约束。但因为NSLayoutConstraint与Frame的不兼容（使用NSLayoutConstraint约束过的控件，再修改frame会无效），在多人合做的项目中不多被用到。

• 4. Frame+StackView 或 Constraint+StackView StackView的使用，主要看有没有界面需求适合排列布局方式，它不受限于Frame或者Constraint。但因为UIStackView在iOS9+才会有，因此最低支持iOS9-的项目中基本不会使用。随着目前项目最低支持版本逐渐升到了iOS10+，UIStackView会在将来的项目中被愈来愈多地使用到。

---

小编微信：可加并拉入《QiShare技术交流群》。

关注咱们的途径有：
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
iOS UIButton根据内容自动布局
iOS 指定初始化方法
UIView中的hitTest方法
奇舞周刊