Masonry的使用

Masonry中常用的属性

  // 左侧

  @property (nonatomic, strong, readonly) MASConstraint *left;

// 顶部
@property (nonatomic, strong, readonly) MASConstraint *top;
// 右侧
@property (nonatomic, strong, readonly) MASConstraint *right;
// 底部
@property (nonatomic, strong, readonly) MASConstraint *bottom;
// 首部
@property (nonatomic, strong, readonly) MASConstraint *leading;
// 尾部
@property (nonatomic, strong, readonly) MASConstraint *trailing;
// 宽
@property (nonatomic, strong, readonly) MASConstraint *width;
// 高
@property (nonatomic, strong, readonly) MASConstraint *height;
// 中心点x
@property (nonatomic, strong, readonly) MASConstraint *centerX;
// 中心点y
@property (nonatomic, strong, readonly) MASConstraint *centerY;
// 文本基线
@property (nonatomic, strong, readonly) MASConstraint *baseline;

居中显示视图的方法
UIView *myView = [[UIView alloc] init];

myView.backgroundColor = [UIColor blueColor];
[self.view addSubview:myView];
    
[myView mas_makeConstraints:^(MASConstraintMaker *make) {
   // 设置当前center和父视图的center一样
   make.center.mas_equalTo(self.view);
   // 设置当前视图的大小（宽、高）
   make.size.mas_equalTo(CGSizeMake(300, 300));
}];

设置并排视图的方法

UIView *view1 = [[UIView alloc] init];

view1.backgroundColor = [UIColor redColor];

[myView addSubview:view1];

UIView *view2 = [[UIView alloc] init];

view2.backgroundColor = [UIColor yellowColor];

[myView addSubview:view2];

int padding = 10;

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

// 设置其位于父视图的Y的中心位置

make.centerY.mas_equalTo(myView.mas_centerY);

// 设置其左侧和父视图偏移10个像素

make.left.equalTo(myView).with.offset(padding);

// 设置其右侧和view2偏移10个像素

make.right.equalTo(view2.mas_left).with.offset(-padding);

// 设置高度 make.height.mas_equalTo(@120);

// 设置其宽度 make.width.equalTo(view2); }];

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(myView.mas_centerY);

make.left.equalTo(view1.mas_right).with.offset(padding);

make.right.equalTo(myView).with.offset(-padding);

make.height.mas_equalTo(view1); make.width.equalTo(view1);

}];

注意：以下的代码是等价的 

make.left.equalTo(myView).with.offset(padding);   // 等价于   make.left.equalTo(myView.mas_left).with.offset(padding);

也就是说默认情况下括号里面只写了视图的时候,其自动帮你添加当前masxxx(代表前面你需要设置的约束的位置).比如上面两行代码设置的make.left,当括号里面只写了myView的时候,会自动追加为myView.mas_left。

设置多个视图的间隔相同

注意下面设置宽度的时候是传递的数组,这样才能让多个视图进行等距离显示

UIView *view1 = [[UIView alloc] init];

view1.backgroundColor = [UIColor redColor];

[myView addSubview:view1];

UIView *view2 = [[UIView alloc] init];

view2.backgroundColor = [UIColor yellowColor];

[myView addSubview:view2];

UIView *view3 = [[UIView alloc] init];

view3.backgroundColor = [UIColor greenColor];

[self.view addSubview:view3];

int padding = 10;

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

// 设置中心点

make.centerY.mas_equalTo(myView);

// 设置左侧距离父视图10

make.left.equalTo(myView).with.offset(padding);

// 设置右侧距离和view2的左侧相隔10

make.right.equalTo(view2.mas_left).with.offset(-padding);

// 设置高度

make.height.mas_equalTo(@150);

// 宽度设置和view2以及view3相同

make.width.equalTo(@[view2, view3]);

}];

[view2 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(myView);

make.height.mas_equalTo(view1);

make.width.equalTo(@[view1, view3]);

}];

[view3 mas_makeConstraints:^(MASConstraintMaker *make) {

make.centerY.mas_equalTo(myView);

make.left.equalTo(view2.mas_right).with.offset(padding);

make.right.equalTo(myView).with.offset(-padding);

make.height.mas_equalTo(view1);

make.width.equalTo(@[view2, view1]);

}];

多个视图相隔的另一种方法

__weak typeof(self) weakSelf = self;

UIView * tempView = [[UIView alloc]init];
NSInteger count = 10;//设置一排view的个数
NSInteger margin = 10;//设置相隔距离
NSInteger height = 50;//设置view的高度
for (int i = 0; i < count; i ++) {
UIView * view = [[UIView alloc]init];
view.backgroundColor = [UIColor brownColor];
[self.view addSubview:view];
if (i == 0) {
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(weakSelf.view).offset(margin);
make.centerY.equalTo(weakSelf.view);
make.height.mas_equalTo(height);
}];
}
else if (i == count – 1){
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.right.equalTo(weakSelf.view).offset(-margin);
make.left.equalTo(tempView.mas_right).offset(margin);
make.centerY.equalTo(tempView);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
else{
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(tempView.mas_right).offset(margin);
make.centerY.equalTo(tempView);
make.height.equalTo(tempView);
make.width.equalTo(tempView);
}];
}
tempView = view;
[view layoutIfNeeded];
}