iOS开发-Masonry简易教程

关于iOS布局自动iPhone6之后就是AutoLayOut,AutoLayOut固然非常好用,不过有时候我们需要在页面手动进行页面布局,VFL算是一种选择,如果对VFL不是很熟悉可以参考iOS开发-VFL(Visual format language)和Autolayout。VFL不复杂,理解起来很容易,实际开发中用的特别熟还好,要是第一次看估计要花点功夫才能搞定。Masonry算是VFL的简化版,用的人比较多,之前项目中用过一次,对手动写页面的开发来说算是福利。

基础知识

首先我们看一个常见的问题将一个子View放在的UIViewController的某个位置,通过设置边距来实现,效果如下:

如果通过VFL我们代码会是这样的:

    UIView *superview                               = self.view;

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

    UIEdgeInsets padding                            = UIEdgeInsetsMake(200, 50, 200, 50);

    [superview addConstraints:@[

                                //约束
                                [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],

                                ]];

只是简单的设置了一个边距,如果视图的关系比较复杂,维护起来会是一个很痛苦的事情,我们看一下Masonry是如何实现的,导入Masonry.h头文件,约束的代码:

    UIView  *childView=[UIView new];
    [childView setBackgroundColor:[UIColor redColor]];
    //先将子View加入在父视图中
    [self.view addSubview:childView];
    __weak typeof(self) weakSelf = self;
    UIEdgeInsets padding = UIEdgeInsetsMake(200, 50, 200, 50);
    [childView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(weakSelf.view).with.insets(padding);
    }];

通过mas_makeConstraints设置边距有种鸟枪换炮的感觉,我们即将开启一段新的旅程,可以紧接着看下面比较实用的功能~

实用知识

1.View设置大小

    UIView  *childView=[UIView new];
    [childView setBackgroundColor:[UIColor redColor]];
    //先将子View加入在父视图中
    [self.view addSubview:childView];
    __weak typeof(self) weakSelf = self;
    [childView mas_makeConstraints:^(MASConstraintMaker *make) {
        //设置大小
        make.size.mas_equalTo(CGSizeMake(100, 100));
        //居中
        make.center.equalTo(weakSelf.view);
    }];

效果如下:

  

这里友情其实一个小内容,目前我们设置约束都是通过mas_makeConstraints用来创建约束,mas_updateConstraints用来更新约束,mas_remakeConstraints重置约束,清除之前的约束,保留最新的约束,如果想深入解释下,可以阅读下面的英文解释~

/**
 *  Creates a MASConstraintMaker with the callee view.
 *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing
 *
 *  @param block scope within which you can build up the constraints which you wish to apply to the view.
 *
 *  @return Array of created MASConstraints
 */
- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

/**
 *  Creates a MASConstraintMaker with the callee view.
 *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
 *  If an existing constraint exists then it will be updated instead.
 *
 *  @param block scope within which you can build up the constraints which you wish to apply to the view.
 *
 *  @return Array of created/updated MASConstraints
 */
- (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

/**
 *  Creates a MASConstraintMaker with the callee view.
 *  Any constraints defined are added to the view or the appropriate superview once the block has finished executing.
 *  All constraints previously installed for the view will be removed.
 *
 *  @param block scope within which you can build up the constraints which you wish to apply to the view.
 *
 *  @return Array of created/updated MASConstraints
 */
- (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

2.设置高度,这里设置左右边距,因此不设置宽度,如果想单独设置width可参考高度的设置方式:

    UIView  *childView=[UIView new];
    [childView setBackgroundColor:[UIColor greenColor]];
    //先将子View加入在父视图中
    [self.view addSubview:childView];
    __weak typeof(self) weakSelf = self;
    [childView mas_makeConstraints:^(MASConstraintMaker *make) {
        //距离顶部44
        make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
        //距离左边30
        make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
        //距离右边30,注意是负数
        make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
        //高度150
        make.height.mas_equalTo(@150);
    }];

3.子视图之间的位置设置:

    UIView  *childView=[UIView new];
    [childView setBackgroundColor:[UIColor greenColor]];
    //先将子View加入在父视图中
    [self.view addSubview:childView];
    __weak typeof(self) weakSelf = self;
    [childView mas_makeConstraints:^(MASConstraintMaker *make) {
        //距离顶部44
        make.top.equalTo(weakSelf.view.mas_top).with.offset(44);
        //距离左边30
        make.left.equalTo(weakSelf.view.mas_left).with.offset(30);
        //距离右边30,注意是负数
        make.right.equalTo(weakSelf.view.mas_right).with.offset(-30);
        //高度150
        make.height.mas_equalTo(@150);
    }];
    //地址:http://www.cnblogs.com/xiaofeixiang/
    UIView *nextView=[UIView new];
    [nextView setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:nextView];
    [nextView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(childView.mas_bottom).with.offset(30);
        make.right.equalTo(childView.mas_right).with.offset(-30);
        make.width.mas_equalTo(@100);
        make.height.mas_equalTo(@100);
    }];

4.链式写法,算是一个便利的写法:

    UIView  *childView=[UIView new];
    [childView setBackgroundColor:[UIColor greenColor]];
    //先将子View加入在父视图中
    [self.view addSubview:childView];
    __weak typeof(self) weakSelf = self;
    [childView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.left.mas_equalTo(weakSelf.view).with.offset(100);
        make.bottom.and.right.mas_equalTo(weakSelf.view).with.offset(-100);
        //第二种写法更简单,相对于就是父视图
//        make.top.and.left.mas_equalTo(100);
//        make.bottom.and.right.mas_equalTo(-100);
    }];

    UILabel *label=[UILabel new];
    [label setText:@"博客园-FlyElephant"];
    [label setTextColor:[UIColor redColor]];
    [label setTextAlignment:NSTextAlignmentCenter];
    [self.view addSubview:label];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(weakSelf.view).with.offset(10);
        make.height.mas_equalTo(20);
        make.right.mas_equalTo(weakSelf.view).with.offset(-10);
        make.bottom.mas_equalTo(weakSelf.view).with.offset(-50);
    }];

 

网上关于Masonry的教程很多,给的例子的也很多,这几种情况基本上满足了开发中的需求,不会有太多的出入,算是一个简易版的教程,Masonry的中属性和iOS中的属性是有对应的关系,不过因为很简单,基本上没怎么看,下图是一个对照关系:

时间: 2024-10-05 20:58:06

iOS开发-Masonry简易教程的相关文章

iOS开发 ReactiveCocoa入门教程 第二部分

ReactiveCocoa 是一个框架,它允许你在你的iOS程序中使用函数响应式(FRP)技术.加上第一部分的讲解,你将会学会如何使用信号量(对事件发出数据流)如何替代标准的动作和事件处理逻辑.你也会学到如何转换.分离和组合这些信号量. 在这里,也就是第二部分里,你将会学到更多先进的ReactiveCocoa特性,包括: 1.另外两个事件类型:error和completed 2.Throttling(节流) 3.Threading 4.Continuations 5.更多... 是时候开始了.

初学iOS开发之简易计算器

今天学了下一个简易计算器,自己做时遇到了忘记把textfield代理给View Controller,导致按回车键时不能自动跳转到下一行输入,具体代理如下图所示. 在此步骤后,在ViewController.h添加<UITextfieldDelegate>具体添加如下图. 在添加代理模式后,在ViewController.m 添加下面的代码,就可以实现输入完后按回车键换行.

iOS开发 Masonry的简单使用

首先,在正式使用Masonry之前,我们先来看看在xib中我们是如何使用AutoLayout 从图中我们可以看出,只要设置相应得局限,控制好父视图与子视图之间的关系就应该很ok的拖出你需要的需求.这里就不详细讲解具体拖拽的方法..... 然后,我们按着上图的属性来看看如何简单得使用Masonry 这里是Masonry给我们的属性 @property (nonatomic, strong, readonly) MASConstraint *left;         //左侧 @property

IOS开发-Masonry

Masonry是一个封装苹果Autolayout的一个第三方框架.简化了代码添加约束的代码量等. 下载地址: https://github.com/SnapKit/Masonry 下载完后解压缩,把Masonry这个文件夹拖进项目里就可以了. 下面是一个小小的实例: 先导入头文件: #import "Masonry/Masonry.h" UIView *buleView = [[UIView alloc]init]; [buleView setBackgroundColor:[UICo

iOS开发环境 - Git教程2.0:添加远程仓库

添加远程库 1 - 你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举多得 2 - 开始添加 (1)首先,登陆 GitHub,然后,在右上角找到『Create a new repo』按钮,创建一个新的仓库: (2)在 Repository name 填入 learngFirstGit,其他保持默认设置,点击『Create repository』按钮,就成功地创建

iOS开发零基础教程之在终端(Terminal)里安装oh my zsh

oh my zsh 是终端里边的一个插件,安装上zsh之后让终端的目录结构更加清晰,而且会把文件和文件夹的用不同的颜色区分.最最最重要的是在用git做版本控制的时候zsh会在工程名后边加上git当前的分支名.用起来很爽.下边来介绍一下zsh的安装: 一.前置准备工作: 1.在应用程序里找 -> 其他  -> 终端 : 2.打开之后如下效果: 第一行显示的是上次登录的时间,第二行画红线的地方就是你激活电脑的时候输入的用户名. 3.这个白色的背景看着不太舒服,咱们把他调成黑底绿色,这是黑客专用颜色

【教程】申请iOS开发证书.p12和描述文件.mobileprovision

iOS开发者证书是用于开发调试的,可以直接连接你的xcode进行灌装到你的设备进行测试,第一步需要添加你的设备id然后再申请iOS开发证书. 现在xcode也可以免证书进行调试了. 一.添加调试设备 1.获取UDID 使用 iPhone 或 iPad的自带浏览器 扫描下面的二维码,即可快速获取 UDID 2.登录开发者中心,添加设备,选择Devices,点击右上角+号. 3.输入设备名称和设备UDID,一路点击创建. 二.创建开发者证书 iOS证书申请这里用到一个工具Appuploader,可以

iOS开发入门教程_iOS开发视频教程

iOS开发入门教程 (Object-C.网络编程.多线程.蓝牙.二维码.Cocos2D.OpenGL)适合人群:初级课时数量:34课时用到技术:IOS,Object-C,OpenGL,XCode,Cocos 2D涉及项目:Cocos+2D.Game Kit蓝牙数据处理等咨询QQ:1840215592 iOS开发入门教程详细查看:http://www.ibeifeng.com/goods-471.html1.1.课程目标iOS开发入门教程内容的目标是初学者入门,让入门者提高,让所有人符合企业招聘的

iOS开发-博客导出工具开发教程(附带源码)

前言: 作为一名学生, 作为一名iOS开发学习者, 我个人浏览信息包括博客, 更多的选择移动终端.然而, csdn并没有现成的客户端(不过有个web版的). 之前曾经看到一款开源的导出工具, 但是它是基于Windows平台的.导出的也仅仅是PDF格式.而且, 对于文章的导出, 需要精确URL.无法做到边浏览别导出. 另外, 我想实现的是, 可以在没有网络的情况下, 浏览自己收藏的文章.并且, 对于自己收藏的文章, 可以分类管理. 最关键的是, 对于自己的文章, 可以做一个备份.我曾经遇到过这样一