iOS开发之Masonry（一）

本文主要介绍Masonry的简单实用，并联系如何给控件添加约束：mas_makeConstraints。下面就马上上代码来使用。

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    // 创建redview
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    
    // 创建greenView
    UIView *greenView = [[UIView alloc] init];
    [self.view addSubview:greenView];
    greenView.backgroundColor = [UIColor greenColor];

    // 创建blueView
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    
    // 添加约束
    // 1.red view:距离父控件顶部20，距离父控件左边100，自身宽高（100，100）
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view).with.offset(20);
        make.left.equalTo(self.view).with.offset(100);
        make.size.mas_equalTo(CGSizeMake(100, 100));
        
    }];
    
    // 1.green view:距离redview底部20，距离父控件右边100，自身宽高（200，100）
    [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(redView.mas_bottom).with.offset(20);
        make.right.equalTo(self.view).with.offset(-100);
        make.size.mas_equalTo(CGSizeMake(200, 100));
        
    }];
    
    // 1.blue view:顶部等于greenview底部，中点x等于父控件中点x，自身宽高等于greenview的宽高
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(greenView.mas_bottom);
        make.centerX.equalTo(self.view);
        make.size.equalTo(greenView);
        
    }];
    
}

代码说明：

具体view的约束都已经现在注释里了。

对于上述约束来说是很好理解的，比如：(redView顶部约束)

make.top.equalTo(self.view).with.offset(20);

意思：我（子控件）的顶部距离父控件的顶部相差20

这里说一下注意点：

1.使用约束之前一定要先将子view添加到父view上。

2.每个子view的约束一定要完整，（除某些控件外，以后会说到）。

3.添加约束的代码也可以放在控制器的- (void)updateViewConstraints方法中，可以看出来该方法是专门用来更新控件的约束的。