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，再根据新建的约束进行更新。