級(jí)別： ★☆☆☆☆
標(biāo)簽：「iOS Masonry」「iOS 自動(dòng)布局」「Masonry」
作者： Xs·H
審校： QiShare團(tuán)隊(duì)
在 沐靈洛 線下分享iOS UIButton根據(jù)內(nèi)容自動(dòng)布局時(shí)术健，有和前端同學(xué)討論到iOS的常用布局方式。討論過程十分熱鬧粘衬，不容易記錄荞估，但作者認(rèn)為討論結(jié)果有必要記錄一下，希望能幫助到一些同學(xué)稚新。
作者將iOS常用布局方式歸納為Frame勘伺、Autoresizing、Constraint枷莉、StackView和Masonry五種娇昙，并將逐一介紹尺迂。
本篇文章介紹Masonry笤妙。
在iOS 常用布局方式之Constraint文章中，作者介紹了NSLayoutConstraint在布局界面時(shí)的強(qiáng)大功能噪裕，但也體驗(yàn)到了NSLayoutConstraint代碼語法的冗長(zhǎng)和不易閱讀性蹲盘。本文要介紹的Masonry就是一個(gè)輕量級(jí)的布局框架，它使用更好的語法包裝AutoLayout膳音，并提供了一種描述NSLayoutConstraint的可鏈接方式召衔，從而使布局代碼更簡(jiǎn)潔，更易讀祭陷。
所以說苍凛，Masonry是基于NSLayoutConstraint的一種第三方框架，可以從GitHub上查看其詳細(xì)介紹兵志。這里醇蝴，作者只展示一下使用Masonry實(shí)現(xiàn)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
上述代碼所實(shí)現(xiàn)的效果如下圖所示想罕。
文章中的代碼可以從QiLayoutDemo中獲取悠栓。
iOS 常用布局方式總結(jié)
截止本篇文章，作者逐一介紹了Frame按价、Autoresizing惭适、Constraint、StackView和Masonry五種iOS常用布局方式楼镐。作者的目的是通過對(duì)這幾種布局方式的介紹癞志，能讓一些讀者同學(xué)對(duì)iOS布局有個(gè)全面的了解。至于常被問到的哪種布局方式好框产，實(shí)在是不好回答凄杯，但可以分享一下這些布局方式在項(xiàng)目中的使用情況师溅，以及遇到的問題，供各位讀者同學(xué)參考盾舌。
-
1. Frame+Autoresizing
得益于Frame的編程靈活性和Autoresizing的簡(jiǎn)易墓臭，F(xiàn)rame+Autoresizing的組合布局方式在QiShare項(xiàng)目中占比最高。但在一些只需要操作frame某個(gè)屬性（比如妖谴，只想修改寬度）時(shí)窿锉，會(huì)顯得代碼有點(diǎn)冗余。于是膝舅，引入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是個(gè)很方便的工具仍稀，在搭建一些簡(jiǎn)單界面時(shí)洼滚，比Frame編碼要高效很多。結(jié)合AutoLayout的Constraint技潘，可以快速搭建出帶有布局約束的界面遥巴。但是，在對(duì)AutoLayout概念和Constraint掌握不特別清晰時(shí)享幽，常常會(huì)出現(xiàn)約束沖突的情況铲掐，而且排查困難。另外值桩，打開Storyboard文件會(huì)需要更多的電腦性能摆霉，在作者的iMac上會(huì)常常出現(xiàn)卡頓的現(xiàn)象。3. 基于純代碼的Constraint+Masonry
三方庫(kù)Masonry是基于NSLayoutConstraint的布局方式奔坟，用純代碼的方式可以更易閱讀地實(shí)現(xiàn)控件約束携栋。但由于NSLayoutConstraint與Frame的不兼容（使用NSLayoutConstraint約束過的控件，再修改frame會(huì)無效）咳秉，在多人合作的項(xiàng)目中很少被用到婉支。4. Frame+StackView 或 Constraint+StackView
StackView的使用，主要看有沒有界面需求適合排列布局方式滴某，它不受限于Frame或者Constraint磅摹。但由于UIStackView在iOS9+才會(huì)有，所以最低支持iOS9-的項(xiàng)目中基本不會(huì)使用霎奢。隨著目前項(xiàng)目最低支持版本逐漸升到了iOS10+户誓，UIStackView會(huì)在未來的項(xiàng)目中被越來越多地使用到。
推薦文章：
iOS UIButton根據(jù)內(nèi)容自動(dòng)布局
iOS 指定初始化方法
UIView中的hitTest方法
