AutoLayout和Masonry两种方式实现自动布局的内容包裹和视图均分

前言

这两种方式分别代表了两种人，一种快速布局，直观，但是很多人认为很难维护，后者纯代码布局，老一派的人用起来都说好，反正一说起来就打起来了，一个虽然快，但是难以维护啊，一个虽然写起来很多，但是维护起来简单啊，巴拉巴拉的，我个人觉得，适配的话最好能深刻理解AutoLayout,Apple特有的东西，理解下也好，有了直观的理解之后，你再用Masonry就非常的简单了，个人观点而已，不喜勿喷，主要之前参与的App有两个是纯AutoLayout，没错，是纯的，而且是多人开发，玩起来一样没问题，现在对这些东西理解的还算可以，报错什么的也能及时搞定了，废话不多了，记录了两个最常用的知识点

示例图

分析

上面两个图是代码完成，下面两个是自动布局，现在简单看下区别和实现

AutoLayout实现包裹和均分

以下是均分的约束,这里看不懂的就可以去面壁了，去翻翻我之前的几篇博客就知道了，基本上就是红色添加上，左，下的约束，然后黄色添加上，右，下，左，再来个等宽，搞定

以下是子视图内容撑开父视（父视图frame不定）的约束,首先你的灰色底部父视图我只给定了X和Y的坐标，size不定，然后内部黑色填充上，左，下，然后给Size，蓝色填充上，右，下，左边，然后给size

注意：这里看起来简单，如果你做内容包裹，你像我这么做这里有个坑，其实这个就是反面教材，这里其实只处理了一种等高的情况，如果你的左边和右边高度不一样，系统会给出你警告，让你再自己看看这不合理的约束,类似于这种错误，其实就是你的约束不是完美的，有冲突了，这个如果你用代码写，你就很难最终和找到了，但是你用Autolayout，你根本不需要Run，在拉约束的时候就看到了，这也算是个优点吧，下面再看看不等高的代码实现

2017-05-10 15:15:41.717981+0800 SystemTime[55019:5807911] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "",
    "",
    "",
    "",
    "",
    ""
)

Masonry实现包裹和均分

很明显能看出，上面是均分，下面是包裹，直接看代码吧

// 代码实现内容包裹和均分
@property (nonatomic,strong) UIView *backView;

// 均分父视图（父视图X,Y,W,H都已知，代表frame已定）
@property (nonatomic,strong) UIView *averageView;
@property (nonatomic,strong) UIView *averageLeftView;
@property (nonatomic,strong) UIView *averageRightView;

// 用子视图的内容来填充赋值父视图的frame 父视图已知X,Y，height和width都是由子视图来填充
@property (nonatomic,strong) UIView *fillBackView;
@property (nonatomic,strong) UIView *fillLeftView;
@property (nonatomic,strong) UIView *fillMiddleView;
@property (nonatomic,strong) UIView *fillRightView;

self.backView  = [[UIView alloc] init];
    self.backView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.7];
    [self.view addSubview:self.backView];
    [self.backView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self.view);
        make.height.equalTo(@([UIScreen mainScreen].bounds.size.height/2.5));
    }];


    self.averageView = [[UIView alloc] init];
    self.averageView.backgroundColor = [UIColor blackColor];
    [self.backView addSubview:self.averageView];
    [self.averageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.equalTo(self.backView);
        make.height.equalTo(self.backView.mas_height).multipliedBy(0.5);
    }];


    self.averageLeftView = [[UIView alloc] init];
    self.averageLeftView.backgroundColor = [UIColor blueColor];
    [self.averageView addSubview:self.averageLeftView];
    [self.averageLeftView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.equalTo(self.averageView).with.offset(10);
        make.bottom.equalTo(self.averageView).with.offset(-10);
    }];

    self.averageRightView = [[UIView alloc] init];
    self.averageRightView.backgroundColor = [UIColor greenColor];
    [self.averageView addSubview:self.averageRightView];
    [self.averageRightView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.bottom.equalTo(self.averageView).with.offset(-10);
        make.top.equalTo(self.averageView).with.offset(10);
        make.left.equalTo(self.averageLeftView.mas_right).with.offset(10);
        make.width.equalTo(self.averageLeftView.mas_width);
    }];


    self.fillBackView = [[UIView alloc] init];
    self.fillBackView.backgroundColor = [UIColor purpleColor];
    [self.backView addSubview:self.fillBackView];
    // 包裹内容
    [self.fillBackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.averageView.mas_bottom).with.offset(30);
        make.centerX.equalTo(self.backView);
    }];

    // 子视图填充
    self.fillLeftView = [[UIView alloc]  init];
    self.fillLeftView.backgroundColor = [UIColor redColor];
    [self.fillBackView addSubview:self.fillLeftView];

    [self.fillLeftView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.top.equalTo(self.fillBackView).with.offset(10);
        make.centerY.equalTo(self.fillBackView);
        make.left.equalTo(self.fillBackView).with.offset(10);
//        make.bottom.equalTo(self.fillBackView).with.offset(-10);
        make.size.mas_equalTo(CGSizeMake(80, 60));

    }];

    self.fillMiddleView = [[UIView alloc]  init];
    self.fillMiddleView.backgroundColor = [UIColor orangeColor];
    [self.fillBackView addSubview:self.fillMiddleView];

    [self.fillMiddleView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.fillLeftView.mas_right).with.offset(10);
        make.centerY.equalTo(self.fillBackView);
//        make.top.equalTo(self.fillBackView).with.offset(10);
//        make.bottom.equalTo(self.fillBackView).with.offset(-10);
        make.size.mas_equalTo(CGSizeMake(30, 60));

    }];


    self.fillRightView = [[UIView alloc]  init];
    self.fillRightView.backgroundColor = [UIColor blueColor];
    [self.fillBackView addSubview:self.fillRightView];
    [self.fillRightView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.bottom.equalTo(self.fillBackView).with.offset(-10);
        make.top.equalTo(self.fillBackView).with.offset(10);
        make.left.equalTo(self.fillMiddleView.mas_right).with.offset(10);
        make.size.mas_equalTo(CGSizeMake(200, 100));
    }];

这里我之前也是和上面的AutoLayout一样是等高的示例，就是那几句注掉的代码，但是为了突出刚才的约束严格意义上来讲是有问题的，因此这里给了一个不等高的特殊情况，代码很少，随意感受下效果，最后的点击事件

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [self.fillRightView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@10);
    }];

    [self.averageRightView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.averageLeftView.mas_right).with.offset(300);
    }];


    [UIView animateWithDuration:2.0f animations:^{
        [self.fillBackView layoutIfNeeded];
        [self.averageView layoutIfNeeded];
        self.backView.hidden = YES;
    }];
}

Demo地址
Demo里面还有一个另外的东西，由于都只是小知识点，就放在一起了，一个对iOS设计倒计时的思路和遇到的坑
cell倒计时问题遇到的坑