码迷，mamicode.com
首页 > 其他好文 > 详细

Masonry的简单使用

时间：2015-09-23 14:47:46      阅读：169      评论：0      收藏：0      [点我收藏+]

标签：

 

介绍

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开发者说道：
      2015年4月30日 16:54

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

      回复
       
      转载：http://archerzz.ninja/ios/masonry-code.html

Masonry的简单使用

标签：

原文地址：http://www.cnblogs.com/106dapeng/p/4831974.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！