Masonry简单使用

Masonry源码

在其官网上也进行了很多的介绍,在下面会写出我自己的一些见解.如果使用过iOS中系统的NSLayoutConstraints已经知道非常麻烦

如下代码就是系统的约束

UIView *superview = self;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

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

[superview addConstraints:@[
                            
                            //view1 constraints
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeTop
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeTop
                                                        multiplier:1.0
                                                          constant:padding.top],
                            
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeLeft
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeLeft
                                                        multiplier:1.0
                                                          constant:padding.left],
                            
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeBottom
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeBottom
                                                        multiplier:1.0
                                                          constant:-padding.bottom],
                            
                            [NSLayoutConstraint constraintWithItem:view1
                                                         attribute:NSLayoutAttributeRight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:superview
                                                         attribute:NSLayoutAttributeRight
                                                        multiplier:1
                                                          constant:-padding.right],
                            
                            ]];

安装

直接进入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));
}];

可以看到我们已经创建出一个位置居中,并且视图大小为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]);
}];

参考地址：http://archerzz.ninja/ios/masonry-code.html