Masonry的基本使用

最近公司所做的React native项目中要嵌入一些简单的原生界面，因为对IOS开发的了解有限，就选择了Masonry布局，这里总结下这段时间的Masonry使用。
Masonry安装用cocoapods就可以了。
引入#import <Masonry/Masonry.h>后就可以使用Masonry进行代码布局

UIView *mainView = [[UIView alloc] init];
    mainView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:mainView];
    [mainView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(300,300));
    }];

首先这段代码以self.view为参照物来设置mainView的位置,这段代码的实际效果如下图：

equalTo

来设置与参照物相等的最常用的就是
.equalTo方法，当然还有mas_equalTo方法，mas_equalTo后面再讲解。

1.MASViewAttribute类

第一类可以放入.equalTo的参数是MASViewAttribute类

MASViewAttribute	NSLayoutAttribute
view.mas_left	NSLayoutAttributeLeft
view.mas_right	NSLayoutAttributeRight
view.mas_top	NSLayoutAttributeTop
view.mas_bottom	NSLayoutAttributeBottom
view.mas_leading	NSLayoutAttributeLeading
view.mas_trailing	NSLayoutAttributeTrailing
view.mas_width	NSLayoutAttributeWidth
view.mas_right	NSLayoutAttributeRight
view.mas_height	NSLayoutAttributeHeight
view.mas_centerX	NSLayoutAttributeCenterX
view.mas_centerY	NSLayoutAttributeCenterY
view.mas_baseline	NSLayoutAttributeBaseline

现在在黄色的mainView中添加一个firstView

    UIView *firstView = [[UIView alloc] init];
    firstView.backgroundColor = [UIColor blueColor];
    [mainView addSubview:firstView];
    [firstView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(mainView.mas_top);
        make.left.equalTo(mainView.mas_left);
        make.size.mas_equalTo(CGSizeMake(200,200));
    }];

2. UIView/NSView

可以将参考值改为UIView，例如将mainView放在view的最中间

make.centerX.equalTo(self.view);

在限制firstView的位置时，我们用到了

make.top.equalTo(mainView.mas_top);
make.left.equalTo(mainView.mas_left);

这两句等价于

make.top.equalTo(mainView);
make.left.equalTo(mainView);

3. NSNumber

equalTo支持NSNumber

make.width.equalTo(@200);
make.height.equalTo(@200);

对于常量，mas_equalTo提供更强大的支持，支持CGSize、CGPoint、NSNumber、UIEdgeInsets等类型
例如前面的：

 make.size.mas_equalTo(CGSizeMake(300,300));

make.width.equalTo(@200);
make.height.equalTo(@200);

等价于

make.width.mas_equalTo(200);
make.height.mas_equalTo(200);

prioritize

Masonry给了四种prioritize
.priority 自定义优先级
.priorityHigh 等同于UILayoutPriorityDefaultHigh
.priorityMedium 位于High与Low之前
.priorityLow 等同于UILayoutPriorityDefaultLow
需要注意的是Masonry默认的priority值为1000，而.priorityHigh所定义的值为750

Composition

Masonry提供了一些组合类型的NSLayoutAttribute，
例如edge，size，center
edge等同于right，left，top，bottom
size等同于width，height
center等同于centerX，centerY

Masonry还提供了一些相当好用的and，with操作
例如：

       make.top.bottom.and.left.equalTo(mainView);
       make.top.equalTo.(mainVide).with.offset(10);

如果把with，and去掉也不影响效果，with，and是为了增加代码的可读性。
with，and只是return self而以

- (MASConstraint *)with {
    return self;
}

- (MASConstraint *)and {
    return self;
}

Modify

Masonry提供了几个方法去更新constraints

1.References

可以把个别的constraint赋值一个局部变量中，接着就可以通过这些变量来对这些constraint进行操作
例如：

// in public/private interface
@property (nonatomic, strong) MASConstraint *topConstraint;

...

// when making constraints
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
    make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

...
// then later you can call
[self.topConstraint uninstall];

2.mas_updateConstraints

通过mas_updateConstraints来代替mas_makeConstraints来更新constraints

3.mas_remakeConstraints

mas_remakeConstraints与mas_updateConstraints类似，但是mas_updateConstraints会保留之前的一些constraints，而mas_remakeConstraints回清空之前的constraints，再根据新建的约束进行更新。