Masonry 使用复习总结

title: Masonry 使用复习总结
date: 2015-08-23 11:07:53
categories: IOS

tags: Masonry

小小程序猿
我的博客：http://daycoding.com

为了解决ios 原生写约束太痛苦这个问题
github：Masonry

安装

使用Pod组织安装masonry

platform :ios, '6.0'
pod 'Masonry'

注意

• 如果配合xib使用需要将“Use Auto Layout”和“Use Size Classes”这两个选项去掉，要不然控制台会报错
• 要先添加view，在添加约束
• 最好在约束中设置控件大小

经常用到的约束

设置控件宽高

   UIView* red = [[UIView alloc]init];
    red.backgroundColor = [UIColor redColor];
    [self.view addSubview:red];
    //要先添加view 之后才能添加约束
    [red mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.size.mas_equalTo(CGSizeMake(100, 100));
        //如果使用eqaulto时，设置数值前需要加@
        //mas_equalTo则不用
        make.height.equalTo(@100);
        make.width.mas_equalTo(100);
    }];
    

运行结果：

等同于其他控件宽高
```
UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:<sup>MASConstraintMaker *make</sup> {
// make.size.mas_equalTo(CGSizeMake(100, 100));
//如果使用eqaulto时，设置数值前需要加@
//mas_equalTo则不用
make.height.equalTo(@100);
make.width.mas_equalTo(100);
}];

UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {

// make.size.equalTo(red);
// 等价于
make.width.equalTo(red);
make.height.equalTo(red);
//这个用来设置距离红方块的距离
make.left.equalTo(red.mas_right).offset(10);
}];
```
结果：

设置边距margin

top和left的边距设置

UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@100);
    make.width.mas_equalTo(100);
}];

UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {

    make.width.equalTo(red);
    make.height.equalTo(red);
    make.left.equalTo(red.mas_right).offset(100);
    make.top.equalTo(red.mas_bottom).offset(100);

}];

运行结果：

右方和下方的边距设置
```
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:<sup>MASConstraintMaker *make</sup> {

    make.height.equalTo(@100);
    make.width.mas_equalTo(100);
    make.right.equalTo(self.view.mas_right).offset(-50);
    make.bottom.equalTo(self.view.mas_bottom).offset(-20);

}];

运行结果：
![](http://7xk16d.com1.z0.glb.clouddn.com/15-6-30/30251805.jpg)

**注意：在设置边距的时候上、左边距的值是正数，右、下的边距值是负数**
### 设置左右对齐

 UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@100);
    make.width.mas_equalTo(200);
    make.left.equalTo(self.view.mas_left).offset(30);
}];
UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@100);
    make.width.mas_equalTo(100);
    //让蓝方块在红方块下方
    make.top.equalTo(red.mas_bottom).offset(10);
    //设置左对齐
    make.left.equalTo(red.mas_left);
}];

  运行结果：
![](http://7xk16d.com1.z0.glb.clouddn.com/15-6-30/39647700.jpg)                     ![](http://7xk16d.com1.z0.glb.clouddn.com/15-6-30/60579122.jpg)
###撑满剩余空间###

UIView* red = [[UIView alloc]init];
red.backgroundColor = [UIColor redColor];
[self.view addSubview:red];
[red mas_makeConstraints:<sup>MASConstraintMaker *make</sup> {
make.height.equalTo(@50);
make.width.mas_equalTo(50);
make.left.equalTo(self.view.mas_left).offset(10);
make.top.equalTo(self.view.mas_top).offset(20);
}];

UIView* blue= [[UIView alloc] init];
blue.backgroundColor = [UIColor blueColor];
[self.view addSubview:blue];
[blue mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(red);
    make.centerY.equalTo(red.mas_centerY);
    make.left.equalTo(red.mas_right).offset(10);
    make.right.equalTo(self.view.mas_right).offset(-10);

}];

结果：
![运行结果](http://7xk16d.com1.z0.glb.clouddn.com/15-7-1/67504229.jpg)