Masonry約束間距相等

最近發(fā)現(xiàn)Masonry的官方Demo太簡單了，想寫一個相對項目級的Demo,但是發(fā)下最近太忙，所有只能寫一點實用的Demo。有時間的時候在寫個完整的項目級demo。

之前介紹過利用Masonry進行約束寬高相等的例子, Masonry如何約束寬高相等,但是要真正用在項目中開發(fā)，項目中的控件布局會更加復雜，所以今天介紹另一個Demo，約束間隙相等。實際上AutoLayout的本質(zhì)就是相對。你要約束布局，就必須指明你是相對那個控件進行布局的。

現(xiàn)在演示一個Demo

要求：現(xiàn)有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開發(fā)中的AutoLayout布局基本不會有問題了。但是這樣特別麻煩，約束三個View還好，如果10View,我們是不是要初始化9個View來進行占位呢？如果需要約束所有的間距都相等，我們是不是初始化話11個占位視圖呢？實際上我們寫個分類就可以了，這樣我們就可以直接調(diào)用就可以了。明白這一點，可以自己嘗試一下寫個分類或者工具類。

技術(shù)交流群：QQ群：344914307