安装
- 直接进入github进行源码下载
- 使用CocoaPod
使用
要创建一个试图,距离上下左右都是10的这样一个约束使用Masonry的效果
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
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);
}];
甚至我们这样写得更加简洁
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview).with.insets(padding);
}];
接下来我们来观看下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]);
}];
