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], ]];

 

安装

1. 直接进入github进行源码下载
2. 使用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]);}];

效果图:

Posted in iOS

Post navigation

One thought on “Masonry简单使用”

1. 一名来自xxx公司的iOS开发者说道：

   博主，给你合并下多个视图相隔相同的方法：
   __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];
   }