首先,在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout

 

 

从图中我们可以看出,只要设置相应得局限,控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需求。这里就不详细讲解具体拖拽的方法.....

然后,我们按着上图的属性来看看如何简单得使用Masonry

这里是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;    //高

@property (nonatomic, strong, readonly) MASConstraint *centerX;  //横向居中

@property (nonatomic, strong, readonly) MASConstraint *centerY;  //纵向居中

@property (nonatomic, strong, readonly) MASConstraint *baseline; //文本基线

属性有了,接着我们应该怎么在视图中添加约束呢,Masonry给我们提供了3个方法

//新增约束
 - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

//更新约束
 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

//清楚之前的所有约束,只会保留最新的约束
 - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
 
 合理的利用这个3个函数,基本上可以应对任何情况了

准备工作已经完成,我们来看几个小demo

1.居中一个view

// 防止block中的循环引用
    __weak typeof (self) weakSelf = self;
    // 初始化一个View
    UIView *bgView = [[UIView alloc]init];
    bgView.backgroundColor = [UIColor redColor];
    [self.view addSubview:bgView];
    // 使用mas_makeConstraints添加约束
    [bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf.view);
        make.size.mas_equalTo(CGSizeMake(200, 200));
    }];

效果图1

是不是很简单,这里有一点要必须注意下,添加约束前必须要把view添加到视图上。

那我要是不想固定他得宽高呢,让view的大小根据间距来控制怎么做

我们来设置一个基于父视图间距为10的view

[bgView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf.view);
        make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));
 }];

这样就ok了!!!

make.edges.mas_offset(UIEdgeInsetsMake(10, 10, 10, 10));

等同于

make.top.equalTo(weakSelf.view).with.offset(10);
    make.left.equalTo(weakSelf.view).with.offset(10);
    make.bottom.equalTo(weakSelf.view).with.offset(-10);
    make.right.equalTo(weakSelf.view).with.offset(-10);

2.多个view

2个view横向居中,第二个view距离第一个view间距为10

UIView *view1 = [[UIButton alloc]init];
    view1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(90, 90));
        make.centerX.equalTo(weakSelf.view);
        make.top.width.offset(90);
    }];
   
    UIView *view2 = [[UILabel alloc]init];
    view2.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.centerX.equalTo(view1);
        make.top.equalTo(view1.mas_bottom).with.offset(20);
    }];

效果图2

大家有没有看到第二个view代码中

make.top.equalTo(view1.mas_bottom).with.offset(20);

view1.mas_bottom 是什么意思呢?如果只写view1,Masonry会默认是view1中最上面开始算起,也就是view2 间距view1 Y轴开始20的间距

通过这个也就可以很方便的设置view同另一个view之间上下左右的间距了

大家不妨试试view.mas_top  view.mas_left  view.mas_right 的效果是什么样得了

下面我附上一个完整的界面demo,大家可以看看

效果图3

代码如下:

- (void)setupFrame {
    __weak typeof(self) weakSelf = self;

    //上传头像
    UIButton *iconBtn = [[UIButton alloc]init];
    [iconBtn setCornerRadius:45];
    [iconBtn setBackgroundImage:[UIImage imageNamed:@"huantouxiang"] forState:UIControlStateNormal];
    [iconBtn addTarget:self action:@selector(iconButton) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:iconBtn];
    self.iconBtn = iconBtn;

    [self.iconBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(90, 90));
        make.centerX.equalTo(weakSelf.view);
        make.top.width.offset(90);
    }];
   
    //上传社区头像文字提醒
    UILabel *iconLabel = [[UILabel alloc]init];
    iconLabel.textColor = c3;
    iconLabel.text = @"上传社团头像";
    iconLabel.font = [UIFont systemFontOfSize:15];
    [self.view addSubview:iconLabel];
   
    [iconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(iconBtn);
        make.top.equalTo(iconBtn.mas_bottom).with.offset(20);
    }];
   
    //社团编辑图标
    UIImageView *editIcon = [[UIImageView alloc]init];
    editIcon.image = [UIImage imageNamed:@"bianxie"];
    [self.view addSubview:editIcon];
   
    [editIcon mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(CGSizeMake(25, 20));
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.top.equalTo(iconLabel.mas_bottom).with.offset(30);
    }];
   
    //社团名
    UITextField *nameText = [[UITextField alloc]init];
    nameText.placeholder = @"请填写社区名(社团名最多6个字)";
    [self.view addSubview:nameText];
    self.nameText = nameText;
   
    [nameText mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@20);
        make.centerY.equalTo(editIcon);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.left.equalTo(editIcon.mas_right).with.offset(5);
    }];
   
    //分割线
    UIImageView *xian = [[UIImageView alloc]init];
    xian.backgroundColor = DBColor(226, 226, 226);
    [self.view addSubview:xian];
   
    [xian mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@1);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(editIcon.mas_bottom).with.offset(5);
    }];
   
    //选择标签
    UILabel *tagLabel = [[UILabel alloc]init];
    tagLabel.text = @"选择标签";
    tagLabel.textColor = c3;
    tagLabel.font = [UIFont systemFontOfSize:15];
    [self.view addSubview:tagLabel];
   
    [tagLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@20);
        make.width.mas_equalTo(@60);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.top.equalTo(xian).with.offset(35);
    }];
   
    //跳转标签选择
    UITextField *tagText = [[UITextField alloc]init];
    tagText.placeholder = @"美容颜";
    tagText.borderStyle=UITextBorderStyleRoundedRect;
    tagText.delegate = self;
    [tagText addTarget:self action:@selector(textTag) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:tagText];
   
    [tagText mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.equalTo(tagLabel);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.left.equalTo(tagLabel.mas_right).with.offset(5);
    }];
   
    //tagView
    self.tagView = ({
        SKTagView *view = [SKTagView new];
        view.backgroundColor = [UIColor clearColor];
        view.padding    = UIEdgeInsetsMake(0, 0, 0, 0);
        view.insets    = 15;
        view.lineSpace = 10;
        __weak SKTagView *weakView = view;
        view.didClickTagAtIndex = ^(NSUInteger index){
            //Remove tag
            [weakView removeTagAtIndex:index];
        };
        view;
    });
    [self.view addSubview:self.tagView];
    [self.tagView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(tagText.mas_bottom).with.offset(10);
    }];
   
    //label标识语
    UILabel *label = [[UILabel alloc]init];
    label.font = [UIFont systemFontOfSize:13];
    label.textColor = [UIColor redColor];
    label.text = @"PS:成员和视频越多得社团越容易被发现!";
    [self.view addSubview:label];
   
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(self.tagView.mas_bottom).with.offset(20);
    }];
   
    UIButton *commitBtn = [[UIButton alloc]init];
    [commitBtn setCornerRadius:5];
    [commitBtn setBorderWidth:1 color:DBTextThemeColor];
    [commitBtn setTitleColor:DBTextThemeColor forState:UIControlStateNormal];
    commitBtn.titleLabel.font = [UIFont systemFontOfSize:15];
    [commitBtn setTitle:@"确认发布" forState:UIControlStateNormal];
    [commitBtn addTarget:self action:@selector(commitButton) forControlEvents:UIControlEventTouchDown];
    [self.view addSubview:commitBtn];
   
    [commitBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(@30);
        make.left.equalTo(weakSelf.view).with.offset(10);
        make.right.equalTo(weakSelf.view).with.offset(-10);
        make.top.equalTo(label.mas_bottom).with.offset(50);
    }];
}

文/着小铺(简书作者)
原文链接:http://www.jianshu.com/p/f0b17ecfd04e
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

iOS开发 Masonry的简单使用的更多相关文章

  1. iOS开发网络篇—简单介绍ASI框架的使用

    iOS开发网络篇—简单介绍ASI框架的使用 说明:本文主要介绍网络编程中常用框架ASI的简单使用. 一.ASI简单介绍 ASI:全称是ASIHTTPRequest,外号“HTTP终结者”,功能十分强大 ...

  2. iOS开发UI篇—简单的浏览器查看程序

    iOS开发UI篇—简单的浏览器查看程序 一.程序实现要求 1.要求 2. 界面分析 (1) 需要读取或修改属性的控件需要设置属性 序号标签 图片 图片描述 左边按钮 右边按钮 (2) 需要监听响应事件 ...

  3. iOS开发UI篇—简单介绍静态单元格的使用

    iOS开发UI篇—简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...

  4. iOS开发Swift篇—简单介绍

    iOS开发Swift篇—简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objective-C ...

  5. 李洪强iOS开发之- 实现简单的弹窗

     李洪强iOS开发之- 实现简单的弹窗 实现的效果:  112222222222223333333333333333

  6. iOS开发-Masonry简易教程

    关于iOS布局自动iPhone6之后就是AutoLayOut,AutoLayOut固然非常好用,不过有时候我们需要在页面手动进行页面布局,VFL算是一种选择,如果对VFL不是很熟悉可以参考iOS开发- ...

  7. iOS开发基础-KVC简单介绍

    一.KVC介绍 键值编码(Key Value Coding,KVC):使开发者不必进行任何操作就可以进行属性的动态读写. KVC操作方法由 NSKeyValueCoding 协议提供,而 NSObje ...

  8. 【iOS开发】NSOperation简单介绍

    iOS开发多线程篇—NSOperation简单介绍 一.NSOperation简介 1.简单说明 NSOperation的作⽤:配合使用NSOperation和NSOperationQueue也能实现 ...

  9. iOS开发笔记,简单实现视频音频的边下边播

    总是在网上看别人的博文,受益匪浅,从没自己写过,今天分享一点小经验,第一次写技术博客,希望对同行的ios猿们有所帮助.   先介绍一下自己的情况:一年ios开发,http协议不太懂,大约知道断点下载h ...

随机推荐

  1. Linux内核设计第二周——操作系统工作原理

    Linux内核设计第二周 ——操作系统工作原理 作者:宋宸宁(20135315) 一.实验过程 图1 执行效果 从图中可以看出,每执行my_ start_ kernel函数两次或一次,my_ time ...

  2. Linux内核设计第六周 ——进程的描述和创建

    Linux内核设计第六周 ——进程的描述和创建 第一部分 知识点总结 一.进程描述符task_struct数据结构 1.操作系统的三大功能: 进程管理.内存管理.文件系统 2.进程的作用: 将信号.进 ...

  3. 详解php的curl几个函数

    关于php的curl一系列函数,这里解释一下它们的作用. 在html中,我们可以通过form设置http的post和get提交,但假如我们获取的数据不是从html中来的,而是php脚本主动向其他服务器 ...

  4. Windows server 2008 R2搭建主域控制器 + 辅域控制器

    一:实验模拟环境: Zhuyu公司是一个小公司,随着公司状大,公司越来越重视信息化建设,公司考虑到计算机用户权限集中管理及共享资源同步管理, 需要架设一套AD域控服务器,考虑到成本和日后管理问题,计划 ...

  5. 微信sdk分享,苹果手机分享到qq好友和qq空间没有反应

    最近线上程序苹果手机进行微信分享时,分享到qq好友和qq空间,无法调用分享程序,从微信跳转到qq后就没有反应了,但是安卓手机分享就没事? 解决:调用微信sdk分享时,分享的url(link)的参数不能 ...

  6. windows系统调用 遍历进程的虚拟地址

    #include "iostream" #include "windows.h" #include "shlwapi.h" #include ...

  7. [Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑

    构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.t ...

  8. 前端开发面试题JS

    1.介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) 2. ...

  9. QTP

    QTP支持功能测试和回归测试的自动化. 支持录制功能,可以对脚本设置检查点,也可以进行参数化.可以在一个ACTION中调用另外一个ACTION action可以调用外部脚本.可以复制已有的ACTION ...

  10. [转]关于NSAutoreleasePool' is unavailable: not available in automatic reference counting mode的解决方法

    转载地址:http://blog.csdn.net/xbl1986/article/details/7216668 Xcode是Version 4.2 Build 4D151a 根据Objective ...