Masonry自动布局的使用心得

1.认识Masonry

例子1

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

    make.top.equalTo(superview.mas_top).with.offset(padding.top); 
    make.left.equalTo(superview.mas_left).with.offset(padding.left);

    make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);

    make.right.equalTo(superview.mas_right).with.offset(-padding.right);

}];

例子2：等同于例子1

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.equalTo(superview).with.insets(padding);

}];

2.不是相等/相当于的情况

equalTo

 equivalent
to NSLayoutRelationEqual

lessThanOrEqualTo

 equivalent
to NSLayoutRelationLessThanOrEqual

.greaterThanOrEqualTo

 equivalent
to NSLayoutRelationGreaterThanOrEqual

3.MASViewAttribute
属性

4.UIView/NSView

下面两个相等 

make.left.greaterThanOrEqualTo(label);

make.left.greaterThanOrEqualTo(label.as_left);

5.NSNumber

//width >= 200 && width <= 400

make.width.greaterThanOrEqualTo(@200);

make.width.lessThanOrEqualTo(@400)

注意：

//creates view.left = view.superview.left + 10

make.left.lessThanOrEqualTo(@10)

例子5：

make.top.mas_equalTo(42);

make.height.mas_equalTo(20);

make.size.mas_equalTo(CGSizeMake(50, 100));

make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));

make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

6.Learn
to prioritize

例子6：

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();

make.top.equalTo(label.mas_top).with.priority(600);

7.compositon
组成

7.1
edges

例子7：

// make top, left, bottom, right equal view2
make.edges.equalTo(view2);

// make top = superview.top + 5, left = superview.left + 10,
//      bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

7.2
size

例子8：

// make width and height greater than or equal to titleLabel

make.size.greaterThanOrEqualTo(titleLabel)

// make width = superview.width + 100, height = superview.height - 50

make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

7.3 center

例子9：
// make centerX and centerY = button1

make.center.equalTo(button1)

// make centerX = superview.centerX - 5, centerY = superview.centerY + 10

make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

例子10：

// All edges but the top should equal those of the superview

make.left.right.and.bottom.equalTo(superview);

make.top.equalTo(otherView);

7.4 mas_updateConstraints  更新约束（用于更新一组约束）

例子11：

- (void)updateConstraints {

    [self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {

        make.center.equalTo(self);

        make.width.equalTo(@(self.buttonSize.width)).priorityLow();

        make.height.equalTo(@(self.buttonSize.height)).priorityLow();

        make.width.lessThanOrEqualTo(self);

        make.height.lessThanOrEqualTo(self);

    }];

    //according to apple super should be called at end of method
    [super updateConstraints];

}

7.5 mas_remakeConstraints（移除以前约束，重新添加约束）

例子12：
- (void)changeButtonPosition {
    [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.size.equalTo(self.buttonSize);

        if (topLeft) {
            make.top.and.left.offset(10);
        } else {
            make.bottom.and.right.offset(-10);
        }
    }];
}