Masonry约束间距相等

Masonry约束间距相等

最近发现Masonry的官方Demo太简单了，想写一个相对项目级的Demo,但是发下最近太忙，所有只能写一点实用的Demo。有时间的时候在写个完整的项目级demo。

之前介绍过利用Masonry进行约束宽高相等的例子, Masonry如何约束宽高相等,但是要真正用在项目中开发，项目中的控件布局会更加复杂，所以今天介绍另一个Demo，约束间隙相等。实际上AutoLayout的本质就是相对。你要约束布局，就必须指明你是相对那个控件进行布局的。

现在演示一个Demo

要求：现有3个View，大小相等(80,40)，在俯视图的中间，距离左右边界为20,它们之间的间隙相等。

代码如下：

- (void) setupUI1
{
    UIView * oneView = UIView.new;
    UIView * twoView = UIView.new;
    UIView * threeView = UIView.new;
    
    
    oneView.backgroundColor = [UIColor redColor];
    twoView.backgroundColor = [UIColor yellowColor];
    threeView.backgroundColor = [UIColor greenColor];
    [self.view addSubview:oneView];
    [self.view addSubview:twoView];
    [self.view addSubview:threeView];
    
    UIView * spaceOneView = UIView.new;
    UIView * spaceTwoView = UIView.new;
    [self.view addSubview:spaceTwoView];
    [self.view addSubview:spaceOneView];
    
    CGSize size = CGSizeMake(80,40);
    [oneView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(size);
        make.centerY.equalTo(self.view);
        make.left.equalTo(self.view).offset(20);
        make.right.equalTo(spaceOneView.left);
    }];
    
    [twoView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(oneView);
        make.centerY.equalTo(self.view);
        make.left.equalTo(spaceOneView.right);
        make.right.equalTo(spaceTwoView.left);
    }];
    
    [threeView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(oneView);
        make.centerY.equalTo(self.view);
        make.right.equalTo(self.view).offset(-30);
        //make.left.equalTo(twoView.right).offset(100);
        make.left.equalTo(spaceTwoView.right);
    }];
    
    [spaceOneView makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(spaceTwoView.width);
        make.centerY.equalTo(self.view);
        //        make.height.equalTo(twoView);
        //        make.height.equalTo(spaceTwoView);
    }];
    
    [spaceTwoView makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(self.view);
    }];
}

效果如下：

demo1_0.png

demo1_1.png

虽然这里我们约束是三个UIView,但是我们需要初始化总共五个View，其中两个View是作为占位视图的。这个Demo的核心是要学会用占位视图来进行布局，因为自动布局就是相对。学会这个Demo,iOS开发中的AutoLayout布局基本不会有问题了。但是这样特别麻烦，约束三个View还好，如果10View,我们是不是要初始化9个View来进行占位呢？如果需要约束所有的间距都相等，我们是不是初始化话11个占位视图呢？实际上我们写个分类就可以了，这样我们就可以直接调用就可以了。明白这一点，可以自己尝试一下写个分类或者工具类。

技术交流群：QQ群：344914307