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方法
奇舞週刊