iOS UI布局神器Masonry
我们在iOS开发中，一定会牵扯到我们的布局的开发。一般的来讲，布局分为三种方式。
- 第一种，就是我们直接在StoryBoard里面“画出”我们的布局，这种所见即所得的方式，是苹果公司推荐开发者的方
式，所以，在我们最新的XCode里面创建的项目，都会默认包含一个叫做Main.storyboard的文件，在这个文件上面，我们就可以画出我们自己的布局。甚至有时候我们都可以让我们的美工给我们做出Storyboard文件。例如下图。
Screen Shot 2016-01-26 at 5.26.25 PM.png
- 第二种方式就是我们的xib，或者叫nib文件，这种方式也是一种图像化的布局方式。只是我们的布局是和每个View Controller对应的。所以，这种方式比我们的Storyboard更加灵活，做起来也比较轻量，没有Storyboard中的场景的概念，也可以根据你自己的需求选择需要创建nib文件的类。如下：
Paste_Image.png
- 第三种，就是通过手写代码来实现我们的UI界面。这种方式在移动开发刚兴起时，比较流行，因为有人说通过手写的代码，比你在Storyboard或者是xib中做的界面，加载起来要快，因为我们的所见即所得的界面，还是要在运行的时候，转换成本地的代码。而随着现在苹果公司对于Interface builder的慢慢优化，我们使用手写UI的性能优势已经越来越小了。我们今天仍然有很多公司使用手写UI，主要是因为遗留的代码问题，还有团队协作的方便性。在手写代码的时候，我们经常会发现一个简单的界面，会有很多代码需要编写，尤其是我们UI组件之间的Layout constraits。
Masonry是什么
刚才说了，我们的手写UI，不可避免的面对一个问题，我们的UI可能会在不同的环境下有不同的显示效果，所以，我们要让我们写出的界面能够在各种不同的设备上显示正确。我们在iOS上解决这个问题，是通过给不同的组件上添加各种各样的约束。约束非常好理解。例如，我们有这么一个样式。
Paste_Image.png
如果我们想在我们的屏幕上写这么一个布局。我们可能就要做一些约束，保证这个界面能够在不同的手机上显示，例如：
- 让绿色的左边和上边的边界和父视图一样，流出15个像素的边界
- 让绿色的高度和蓝色的高度一样
- 让绿色的宽度和红色的一样
...
等等
同理，我们的红色快和蓝色块也有相应的约束需要添加，当我们确定好我们所需要的所有约束，然后就可以使用Masonry来帮我们写这些约束了，那么我们不用Masonry不行么？
为什么要用Masonry?
如果要实现上面的这些约束，我们iOS里面自带了一个类，叫做NSLayoutConstraints，通过这个类相关的API，我们可以让我们的视图对象创建相应的约束，例如，我们有一个非常简单的需求，想在视图里面创建一个子视图，我们子视图的Rect上下左右比外面的视图都要少10dp。那么，使用NSLayoutConstraints,我们的代码大概是这个样子的。
UIView *superview = self;
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[superview addConstraints:@[
//view1 constraints
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:padding.top],
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:padding.left],
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-padding.bottom],
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeRight
multiplier:1
constant:-padding.right],
]];
就会产生这么一大坨代码，而这还只是一个最简单的例子，如果说你的UI里面有很多的子视图，他们之间有各种关系，那么，你的代码如果这样写下去，基本就没人能读得懂了。
不过没关系，我们不是有Masonry么，看看在Masonry中是如何处理这个约束的。
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];
或者更短：
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview).with.insets(padding);
}];
是不是清爽多了，他的写法也很清晰，其实就是通过block来实现我们的约束，你的每一个view就是block里面的make,然后他有很多属性，比如说top.left.right.bottom，centerX, centerY等等，然后，你使用一个equalTo来和其他视图建立约束，然后在每个视图上有一些属性，类似于mas_top，就可以使用上了。是不是很爽啊。
样例
例如，我们现在需要写一个tableview cell，这个cell是包含四个按钮，每个按钮中间有个Image view，然后每个Image view正下方有个label，如图所示：
我们就可以通过如下方式来写cell:
// DRDiscoverCategoryCell.h
#import <UIKit/UIKit.h>
@interface DRDiscoverCategoryCell : UITableViewCell
@end
// DRDiscoverCategoryCell.m
#import "DRDiscoverCategoryCell.h"
@implementation DRDiscoverCategoryCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
self.contentView.backgroundColor = [SLColor backgroundColor];
self.selectionStyle = UITableViewCellSelectionStyleNone;
CGFloat buttonWidth = [UIScreen mainScreen].bounds.size.width / 4;
for (int i = 0 ; i < 4; i++) {
UIButton *mainButton = [[UIButton alloc] initWithFrame:CGRectMake(i * buttonWidth, 0, buttonWidth, 80)];
mainButton.backgroundColor = [SLColor c9Color];
UIImage *image =
[UIImage imageWithData:
[NSData dataWithContentsOfURL:
[NSURL URLWithString:@"http://forum-dev.dianrong.com/static/image/discover/icon-finance.png"]]];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[mainButton addSubview:imageView];
[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(mainButton);
make.centerY.equalTo(mainButton.mas_centerY).offset(-10);
make.width.height.equalTo(@45);
}];
UILabel *categoryTitleLabel = [[UILabel alloc] init];
categoryTitleLabel.text = @"点融黑帮";
categoryTitleLabel.font = [UIFont systemFontOfSize:11];
categoryTitleLabel.textAlignment = NSTextAlignmentCenter;
[mainButton addSubview:categoryTitleLabel];
[categoryTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(mainButton);
make.width.equalTo(@45);
make.top.equalTo(imageView.mas_bottom).offset(5);
}];
[self.contentView addSubview:mainButton];
}
}
return self;
}
@end
是不是很简单啊，如果在使用Masonry的过程中有什么问题，请欢迎随时和我交流。我的微信公众账号：马哥水果派， 可以扫描下面的二维码。
qrcode_for_gh_5c8f4b03ea21_1280.jpg
