ios:Masonry

阅读更多

https://github.com/SnapKit/Masonry

pod 'Masonry'

- (void)viewDidLoad {
    [super viewDidLoad];

    // 使用 Masonry 布局，基本可以抛弃 CGRectMake 了，直接初始化即可。
    UIView *view = [[UIView alloc] init];

    view.backgroundColor = [UIColor darkGrayColor];

    // 在做布局之前，一定要先将 view 添加到 superview 上，否则会报错。
    [self.view addSubview:view];

    // mas_makeConstraints 就是 Masonry 的 autolayout 添加函数，将所需的约束添加到block中就行。
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        // 设置居中
        make.center.equalTo(self.view);
        // 设置宽度为200
        make.width.equalTo(@200);
        // 设置高度为200
        make.height.mas_equalTo(200);
    }];
}

//三个并排的view
- (void)viewDidLoad {
    [super viewDidLoad];

    // 初始化视图
    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];

    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view2];

    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor greenColor];
    [self.view addSubview:view3];

    // 布局视图
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 设置中心点
        make.centerY.mas_equalTo(self.view);
        // 设置左侧距离父视图10像素
        make.left.equalTo(self.view).offset(10);
        // 设置右侧距离和view2的左侧相距10像素
        make.right.equalTo(view2.mas_left).offset(-10);
        // 设置高度
        make.height.mas_equalTo(200);
        // 设置宽度和view2以及view3相等
        make.width.equalTo(@[view2, view3]);
    }];

    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(self.view);
        make.height.mas_equalTo(view1);
        make.width.equalTo(@[view1, view3]);
    }];

    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(self.view);
        make.left.equalTo(view2.mas_right).offset(10);
        make.right.equalTo(self.view).offset(-10);
        make.height.mas_equalTo(view1);
        make.width.equalTo(@[view1, view2]);
    }];

}

Masonry 的注意项

1、使用mas_makeConstraints方法的元素必须事先添加到父元素的中，例如：[self.view addSubview:view];

2、mas_equalTo和equalTo区别：mas_equalTo比equalTo多了类型转换操作，一般来说，大多数时候两个方法都是通用的，但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。特别是多个属性时，必须使用equalTo，例如：make.left.and.right.equalTo(self.view);。

3、注意方法with和and，这两个方法其实没有做任何操作，方法只是返回对象本身，这个方法的左右完全是为了方法写的时候的可读性 ，如下两行代码是完全一样的，但是明显加了and方法的语句可读 性更高点。

1.设置间距后用offset添加偏移量
make.left.equalTo(self.view.mas_left).offset(0);

2.设置宽的比例
make.width.equalTo(self.view.mas_width).multipliedBy(0.5)

3.设置参照的视图等宽高
make.width.and.height.equalTo(self.imageView);

4.设置内边距
make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));