iOS UI布局神器Masonry

作者: coolma | 来源:发表于2016-01-26 18:08 被阅读1129次

我们在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

iOS UI布局神器Masonry

Masonry是什么

为什么要用Masonry?

样例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS开发·布局篇

iOS开发

iOS 开发

iOS Developer

iOS移动开发社区

Objective C开发

IOS实战