Masonry入门

参考文章:
http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/
Demo地址:https://github.com/LiuDongiOS/MasonryDemo
入门进阶表:（一定要先addSubview）

入门进阶表.png

1:不堪一击,实现以下效果:

居中显示一个view.png
居中显示一个view.png

代码实现:


  UIView *sv = [UIView new];
  [sv showPlaceHolder];
  sv.backgroundColor = [UIColor blackColor];
 
  [self.view addSubview:sv];
 [sv mas_makeConstraints:^(MASConstraintMaker *make) {

   make.left.right.equalTo(@0);
   make.height.equalTo(@200);
   make.center.equalTo(self.view);

 }];

2:初学乍练,实现�以下效果:

在上一个基础之上添加一个子view略小于其superView(边距为10).png
在上一个基础之上添加一个子view略小于其superView(边距为10).png

代码实现:

  UIView *sv1 = [UIView new];
  [sv1 showPlaceHolder];
  sv1.backgroundColor = [UIColor redColor];
  [sv addSubview:sv1];
  [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {
// 第一种方式
//    make.top.equalTo(sv).with.offset(10);
//    make.left.equalTo(sv).with.offset(10);
//    make.right.equalTo(sv).with.offset(-10);
//    make.bottom.equalTo(sv).with.offset(-10);
   //第二种方法
    //基于某个view四周进行约束
//    make.edges.equalTo(sv).insets(UIEdgeInsetsMake(20, 10, 20, 10));
//    
    //第三种方法
    make.top.and.left.and.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
 
  }];

3:初窥门径,实现以下效果:

![让两个高度为150的view(sv的子view)水平居中且等宽且等间隔排列 间隔为10(自动计算其宽度).png . . .]](http://upload-images.jianshu.io/upload_images/1259755-79f1e17503f0375f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

让两个高度为150的view(sv的子view)水平居中且等宽且等间隔排列 间隔为10(自动计算其宽度).png

代码实现:

int padding1 = 10;
  UIView *sv2 = [UIView new];
  sv2.backgroundColor = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000];
  [sv2 showPlaceHolder];
  [self.view addSubview:sv2];
 
 
  UIView *sv3 = [UIView new];
  sv3.backgroundColor = [UIColor colorWithRed:0.000 green:1.000 blue:0.502 alpha:1.000];
  [sv3 showPlaceHolder];
  [self.view addSubview:sv3];
 
  [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.mas_equalTo(150);
    make.centerY.mas_equalTo(sv.mas_centerY);
    make.width.equalTo(sv3);
    make.left.equalTo(sv).with.offset(padding1);
    make.right.equalTo(sv3.mas_left).with.offset(-padding1);
   
 
  }];
 

  [sv3 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.mas_equalTo(@150);
    make.centerY.mas_equalTo(sv.mas_centerY);
    make.width.equalTo(sv2);
    make.left.equalTo(sv2.mas_right).with.offset(padding1);
    make.right.equalTo(sv.mas_right).with.offset(-padding1);
   

  }];

4.略有小成,实现以下效果:

黑,灰俩个view.黑色view的左、右边距为20，上边距为80, 下边距灰色view 20，宽度自适应，高度与灰色view平分整个界面(不包含头部的标题和按钮所占高度).灰色view宽度为黑色view的一半（即左边以中线起始），右、下边距与黑色view相同，高度与黑色view相同).png
黑,灰俩个view.黑色view的左、右边距为20，上边距为80, 下边距灰色view 20，宽度自适应，高度与灰色view平分整个界面(不包含头部的标题和按钮所占高度).灰色view宽度为黑色view的一半（即左边以中线起始），右、下边距与黑色view相同，高度与黑色view相同).png

代码实现:

UIView *blackView = [UIView new];
  blackView.backgroundColor = [UIColor blackColor];
  [blackView showPlaceHolder];
  [self.view addSubview:blackView];
 
  UIView *grayView = [UIView new];
  grayView.backgroundColor = [UIColor lightGrayColor];
  [grayView showPlaceHolder];
  [self.view addSubview:grayView];

  [blackView mas_makeConstraints:^(MASConstraintMaker *make) {
  //添加左,上边距的约束
  //mas_equal的支持CGSIZE CGPOINT NSNUMBER UIEDGEINSETS
    make.top.mas_equalTo(80);
    make.left.mas_equalTo(20);
    //添加右边约束
    make.right.mas_equalTo(-20);
 
   
   
  }];
 

  [grayView mas_makeConstraints:^(MASConstraintMaker *make) {
    //添加右下约束
    make.bottom.right.mas_equalTo(-20);
    //添加高度约束,让高度等于blackview
    make.height.equalTo(blackView);
    //添加上边约束
    make.top.equalTo(blackView.mas_bottom).offset(20);
    //添加左边距
    make.left.equalTo(self.view.mas_centerX).offset(0)
    ;
   
   
   
   
  }];

5:驾轻就熟,实现以下效果:


绿,红,蓝三个view.绿色view的上边距为80、左边距为20,右边距self.view的X中线为10. 红色view的上边距80、右边距为 20,左边距绿色view 20. 绿、红宽度自适应. 蓝色view的上边距绿、红view为 20, 左、右、下边距为20，高度与绿, 红view相同.png

绿,红,蓝三个view.绿色view的上边距为80、左边距为20,右边距self.view的X中线为10. 红色view的上边距80、右边距为 20,左边距绿色view 20. 绿、红宽度自适应. 蓝色view的上边距绿、红view为 20, 左、右、下边距为20，高度与绿, 红view相同

代码实现:

//第一步:
  UIView *greenView = [UIView new];
  greenView.backgroundColor = [UIColor greenColor];
  [greenView showPlaceHolder];
  [self.view addSubview:greenView];
 
  UIView *redView = [UIView new];
  redView.backgroundColor = [UIColor redColor];
  [redView showPlaceHolder];
  [self.view addSubview:redView];
 
  UIView *blueView = [UIView new];
  blueView.backgroundColor = [UIColor blueColor];
  [blueView showPlaceHolder];
  [self.view addSubview:blueView];
  //第二步
 
 
 
  [greenView mas_makeConstraints:^(MASConstraintMaker *make) {
   
   
    make.top.mas_equalTo(80);
    make.left.mas_equalTo(20);
    make.right.mas_equalTo(self.view.mas_centerX).offset(-10);
   
   
   
   
  }];
 
 
  [redView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(80);
    make.right.mas_equalTo(-20);
    make.left.mas_equalTo(greenView.mas_right).offset(20);
   
   
  }];
 
  [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.top.mas_equalTo(redView.mas_bottom).offset(20);
    make.left.mas_equalTo(20);
    make.bottom.right.equalTo(@-20);

    make.height.mas_equalTo(redView);
    make.height.mas_equalTo(greenView);
   

  }];

6.融会贯通,实现以下效果.


垂直居中显示输入框, 左右边距为 10,高度为 40. 当键盘挡住输入框时，输入框自动向上弹到键盘上方。.png

垂直居中显示输入框, 左右边距为 10,高度为 40. 当键盘挡住输入框时，输入框自动向上弹到键盘上方。.png

代码实现:

//这里我把距离bottom的距离设定了定值了在横屏键盘消失的时候会回到屏幕上方,
//这里让大家理解更新约束的用法.
- (void)viewDidLoad {
  [super viewDidLoad];
  [self creatBackButton];
  self.textField = [UITextField new];
  self.textField.backgroundColor = [UIColor redColor];
  self.textField.frame = CGRectMake(10, self.view.frame.size.height /2, self.view.frame.size.width - 20, 40);
  [self.textField showPlaceHolder];
 [self.view addSubview:self.textField];
  [self.textField mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.right.mas_equalTo(-10);
    make.centerX.equalTo(self.view);
    make.bottom.mas_equalTo(-350);
    make.height.mas_equalTo(40);
   
  }];
 
 // 注册键盘通知
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillChangeFrameNotification:) name:UIKeyboardWillChangeFrameNotification object:nil];
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHideNotification:) name:UIKeyboardWillHideNotification object:nil];
 
  // Do any additional setup after loading the view.
}

#pragma mark -- 键盘即将出现 --
- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {
 
  // 获取键盘基本信息（动画时长与键盘高度）
  NSDictionary *userInfo = [notification userInfo];
  CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
  CGFloat keyboardHeight = CGRectGetHeight(rect);
  CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
 
  // 修改下边距约束
 [self.textField mas_updateConstraints:^(MASConstraintMaker *make) {
  
   
   make.bottom.mas_equalTo(-keyboardHeight);
   
   
 }];
 

  // 更新约束
  [UIView animateWithDuration:keyboardDuration animations:^{
   
    [self.view layoutIfNeeded];
  }];
}
#pragma mark -- 键盘即将消失 --
- (void)keyboardWillHideNotification:(NSNotification *)notification {
 
  // 获得键盘动画时长
  NSDictionary *userInfo = [notification userInfo];
  CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
 
  // 修改为以前的约束
   [self.textField mas_updateConstraints:^(MASConstraintMaker *make) {
    
     make.bottom.mas_equalTo(-350);

    
   }];
 

  // 更新约束
  [UIView animateWithDuration:keyboardDuration animations:^{
   
    [self.view layoutIfNeeded];
  }];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 
  [super touchesBegan:touches withEvent:event];
  [self.view endEditing:YES];
}

7.炉火纯青,实现以下效果.


在UIScrollView顺序排列50个view并自动计算contentSize.png

在UIScrollView顺序排列50个view并自动计算contentSize.png

代码实现:

UIView *sv = [UIView new];
  sv.backgroundColor = [UIColor blackColor];
  [self.view addSubview:sv];
  [sv mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.left.right.equalTo(@0);
    make.top.equalTo(@80);
    make.bottom.equalTo(@0);
   
  }];
  UIScrollView *scrollView = [UIScrollView new];
  scrollView.backgroundColor = [UIColor whiteColor];
  [sv addSubview:scrollView];
  [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(sv);
  }];
 
  UIView *container = [UIView new];
  [scrollView addSubview:container];
  [container mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.edges.equalTo(scrollView);
    make.width.equalTo(scrollView);
   
  }];
 
  int count = 50;
 
  UIView *lastView = nil;
 
  for ( int i = 1 ; i <= count ; ++i )
  {
    UIView *subv = [UIView new];
    [container addSubview:subv];
    subv.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 )
                     saturation:( arc4random() % 128 / 256.0 ) + 0.5
                     brightness:( arc4random() % 128 / 256.0 ) + 0.5
                       alpha:0.6];
   
    [subv mas_makeConstraints:^(MASConstraintMaker *make) {
      make.left.and.right.equalTo(container);
      make.height.mas_equalTo(@(5*i + 5));
    //作答区  
      if (lastView) {
        make.top.mas_equalTo(lastView.mas_bottom);
      }else{
       
        make.top.mas_equalTo(container.mas_top);
       
      }
  
    }];
   
    lastView = subv;
    [lastView showPlaceHolder];
  }
 
 
  [container mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(lastView.mas_bottom);
  }];

8:出类拔萃,实现以下效果:

实现对tableView添加、更新、重置约束.png

实现对tableView添加、更新、重置约束.png

实现代码:

//主要代码
- (void)handleMake:(UIButton *)button{
 
  [self.tableView mas_makeConstraints:^(MASConstraintMaker *make) {
   
    make.top.mas_equalTo(80);
    make.left.mas_equalTo(self.view.mas_left);
    make.bottom.right.mas_equalTo(0);
   
 
  }];
 
 
}

- (void)handleUp:(UIButton *)button{
  //更新你需要更新的约束
  [self.tableView mas_updateConstraints:^(MASConstraintMaker *make) {
   
    make.top.mas_equalTo(150);
   

  }];
 

}

- (void)handleRemark:(UIButton *)button{
  //不能针对一个view添加俩个约束
  [self.tableView mas_remakeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(180);
    make.left.mas_equalTo(self.view.mas_left);
    make.bottom.right.mas_equalTo(-80);

  }];
 
}

9:出神入化,实现以下效果:

解析数据, 实现约束和高度自适应.png

解析数据, 实现约束和高度自适应.png

代码实现:

//用到了自定义cell 工程demo在下方链接
 [self.lableContent mas_makeConstraints:^(MASConstraintMaker *make) {
  
   make.edges.equalTo(self.contentView);
   
 }];

10:得心应手,实现以下效果:


九宫格.png
九宫格.png

代码实现:

//此代码可以直接放在viewDidLoad
// 创建一个空view 代表上一个view
  __block UIView *lastView = nil;
  // 间距为10
  int intes = 10;
  // 每行3个
  int num = 3;
  // 循环创建view
  for (int i = 0; i < 9; i++) {
   
    UIView *view = [UIView new];
    [self.view addSubview:view];
    view.backgroundColor = [UIColor colorWithHue:(arc4random() % 256 / 256.0 ) saturation:( arc4random() % 128 / 256.0 ) + 0.5
                     brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:0.2];
   
    // 添加约束
   
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
      // 给个高度约束
      make.height.mas_equalTo(80);
     
      // 1. 判断是否存在上一个view
      if (lastView) {
        // 存在的话宽度与上一个宽度相同
        make.width.equalTo(lastView);
      } else {
       
        if (i % num != 0) {
          make.width.mas_equalTo((view.superview.frame.size.width - (num + 1)* intes)/4);
        }
      }
      // 2. 判断是否是第一列
      if (i % num == 0) {
        // 一：是第一列时 添加左侧与父视图左侧约束
        make.left.mas_equalTo(view.superview).offset(intes);
      } else {
        // 二： 不是第一列时 添加左侧与上个view左侧约束
        make.left.mas_equalTo(lastView.mas_right).offset(intes);
      }
      // 3. 判断是否是最后一列 给最后一列添加与父视图右边约束
      if (i % num == (num - 1)) {
        make.right.mas_equalTo(view.superview).offset(-intes);
      }
      // 4. 判断是否为第一列
      if (i / num == 0) {
        // 第一列添加顶部约束
        make.top.mas_equalTo(view.superview).offset(intes*10);
      } else {
        // 其余添加顶部约束 intes*10 是我留出的距顶部高度
        make.top.mas_equalTo(intes * 10 + ( i / num )* (80 + intes));
      }
     
    }];
    // 每次循环结束 此次的View为下次约束的基准
    lastView = view;
   
  }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • # 2018-01-21
    # 一、框架概述 # 课程概述 1. laravel 4天（之前TP框架还是很大的区别）（国外框架） 2. 在线教...
    关进一阅读 359评论 0赞 0
  • Masonry 入门到精通一
    iOS布局有很多种方法，有原始的Frame布局，通过计算每一个控件的高度/宽度，来定义每一个控件的位置，简单的只有...
    敲代码的树懒阅读 1,115评论 0赞 3
  • jenkins github和docker构建CICD
    本章节主要介绍jenkins的使用 在前一章节中已经介绍可jenkins安装步骤，不了解的可以参考前文：[jenk...
    haishuiaa阅读 3,229评论 0赞 3
  • MySQL入门
    一、关于MySQL MySQL（Structured Query Language）是一个关系型数据库管理系统，在...
    eRosicky阅读 518评论 0赞 0
  • 【育儿20】共同解决问题，可以减少校园暴力
    【育儿】文集已建起，欢迎点击查阅、关注、互动交流！ 倾听学生的感受和需求。总结他们的观点。表达自己的感受和需求。邀...
    小尘老师阅读 1,126评论 16赞 62