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
