iOS App开发中Masonry布局框架的基本用法解析

更新时间：2016年03月19日 09:18:30 作者：晓风沐晨

这篇文章主要介绍了iOS App开发中Masonry布局框架的基本用法解析,Masonry支持iOS和OSX的Auto Layout,在GitHub上的人气很高,需要的朋友可以参考下

Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了并具有高可读性，而且同时支持 iOS 和 Max OS X。Masonry是一个用代码写iOS或OS界面的库，可以代替Auto layout。Masonry的github地址：https://github.com/SnapKit/Masonry

Masonry使用讲解:

mas_makeConstraints 是给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。添加过约束后可以有修正，修正有offset（位移）修正和multipliedBy（倍率）修正。

语法一般是 make.equalTo or make.greaterThanOrEqualTo or make.lessThanOrEqualTo + 倍数和位移修正。

注意点1：使用 mas_makeConstraints方法的元素必须事先添加到父元素的中，例如[self.view addSubview:view];

注意点2： masequalTo 和 equalTo 区别：masequalTo 比equalTo多了类型转换操作，一般来说，大多数时候两个方法都是通用的，但是对于数值元素使用mas_equalTo。对于对象或是多个属性的处理，使用equalTo。特别是多个属性时，必须使用equalTo,例如 make.left.and.right.equalTo(self.view);

注意点3: 注意到方法with和and,这连个方法其实没有做任何操作，方法只是返回对象本身，这这个方法的左右完全是为了方法写的时候的可读性。make.left.and.right.equalTo(self.view);和make.left.right.equalTo(self.view);是完全一样的，但是明显的加了and方法的语句可读性更好点。

下面带着例子来看一下基础用法，假设我们现在的需求是：

1.我们现在只能确定我们控件的宽高以及左右的边距，需要对上下进行自动适应。
2.假设我们现在有四个控件，需要布局的界面是这个样子的

竖屏效果：

201631991509026.jpg (459×773)

横屏效果：

201631991533698.jpg (751×481)

第一步：在我们的控制器中导入Masonry所需要的文件

复制代码代码如下:

#define MAS_SHORTHAND

#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

第二步：在控制器中添加以下三个占位视图并设置颜色

复制代码代码如下:

    //上面的占位视图

    UIView *topView = UIView.new;

    topView.backgroundColor = [UIColor redColor];

    [self.view addSubview:topView];

    //中间的占位视图

    UIView *centerView = UIView.new;

    centerView.backgroundColor = [UIColor grayColor];

    [self.view addSubview:centerView];

    //下面的占位视图

    UIView *bottomView = UIView.new;

    bottomView.backgroundColor = [UIColor blackColor];

    [self.view addSubview:bottomView];

第三步：开始分别给三个占位视图添加约束

复制代码代码如下:

    //给上面的占位视图添加约束
    [topView makeConstraints:^(MASConstraintMaker *make) {       //头部及左边距分别为0
        make.top.left.equalTo(self.view).offset(0);
        //三个占位视图的高度等高
        make.height.equalTo(@[centerView,bottomView]);
        //设置top视图的高度
        make.width.equalTo(100);
    }];
    //中间视图的需要添加以下约束，高度、左边以及与上方占位视图的关系
     [centerView makeConstraints:^(MASConstraintMaker *make) {
        //左边的约束
        make.left.equalTo(self.view).offset(0);
        //设置三个占位视图等高
        make.width.equalTo(@[topView,bottomView]);
        //设置中间占位视图与上方视图的关联约束
        make.top.equalTo(topView.bottom).offset(150);

    }];
    //下面的约束主要设置下面的与中间视图的约束以及本身左边距的约束
    [bottomView makeConstraints:^(MASConstraintMaker *make) {
        make.left.bottom.equalTo(self.view).offset(0);
        make.top.equalTo(centerView.bottom).offset(150);

}];

到了，这里。我们的三个占位视图已经基本完成了。那么让我们运行一下看下效果：

201631991554091.png (369×666)

由此我们发现中间空出的部分正好就是我们控件所需的位置了，那么下面我们就开始进行对控件的布局了。首先还是添加需要的左边的控件

复制代码代码如下:

     UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
    [self.view addSubview:imageView1];
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
    [self.view addSubview:imageView2];

//然后对这两个控件进行布局

    [imageView1 makeConstraints:^(MASConstraintMaker *make) {
        //分别设置起宽高
       make.width.height.equalTo(150);
        //左边的边距
       make.left.equalTo(self.view).offset(0);
       //设置其与上面占位视图和下面占位视图的间距
       make.top.equalTo(topView.bottom).offset(0);
       make.bottom.equalTo(centerView.top).offset(0);
    //控件2同上。
    [imageView2 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.left.equalTo(self.view).offset(0);
        make.top.equalTo(centerView.bottom).offset(0);
        make.bottom.equalTo(bottomView.top).offset(0);

}];

代码到了这里左边的控件约束基本布局完成了，让我们来看一下运行的效果吧。

201631991611343.png (374×666)

到了这里我们就可以对右边的控件进行布局了。基于之前的经验我们就会发现右边的约束只需要添加本身的宽、高和右边边距以及基于左边控件的centerY值就足够了。好了，我们开始吧。

复制代码代码如下:

    UIImageView *imageView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"a"]];
    [self.view addSubview:imageView3];
    UIImageView *imageView4 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"b"]];
    [self.view addSubview:imageView4];

    //该控件与左边的控件的关联
    [imageView3 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.right.equalTo(self.view).offset(0);
        make.centerY.equalTo(imageView1);

    }];
    //同上
    [imageView4 makeConstraints:^(MASConstraintMaker *make) {
        make.width.height.equalTo(150);
        make.right.equalTo(self.view).offset(0);
        make.centerY.equalTo(imageView2);

}];

到了这里基本上是大功告成了，到了这里只需要要把三个占位视图的背景颜色设置为透明就好了。

复制代码代码如下:

    //另外两个也是

  bottomView.backgroundColor = [UIColor clearColor];

运行效果如图：

201631991629336.gif (445×457)

到了这里我们基本上就把基本的占位视图的介绍了联系完了。通过联系你可能会发现，无论是在StoryBoary上添加约束还是通过编码进行的智能布局都是基于对父控件或者对其他控件进行的关联。当然了如果你对AutoLayout的编码布局的话就可能就会觉得Masonry真的是好用的爆了。当然了，这么强大的Masonry，提供的功能也是很多的，这些就要靠大家来探索了，嘿嘿。

您可能感兴趣的文章:

iOS
Layout

iOS开发支付宝支付成功返回字符串的处理操作
很多朋友在做ios开发项目时，遇到支付宝支付成功返回字符串的处理操作不知道该怎么办，今天小编给大家分享实例代码，需要的朋友参考下
2017-02-02
IOS与网页JS交互详解及实例
这篇文章主要介绍了 IOS与网页JS交互详解及实例的相关资料,需要的朋友可以参考下
2016-12-12
iOS实现对不同分辨率设备的字号大小适配方法
下面小编就为大家分享一篇iOS实现对不同分辨率设备的字号大小适配方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
iOS UITextField、UITextView只限输入中文、英文、数字及实时限制字符个数的封装实现代码
这篇文章主要介绍了 iOS UITextField、UITextView只限输入中文、英文、数字及实时限制字符个数封装实现的相关资料,需要的朋友可以参考下
2016-12-12
ios使用AVFoundation读取二维码的方法
这篇文章主要介绍了ios使用AVFoundation读取二维码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
利用iOS开发实现翻转扑克牌动画的方法
这篇文章主要给大家介绍了关于利用iOS开发实现翻扑克牌动画的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。
2017-07-07
iOS给密码进行加密的方法
这篇文章主要介绍了iOS给密码进行加密的方法,需要的朋友可以参考下
2017-06-06
XCODE Debug模式资料整理
这篇文章主要介绍了XCODE Debug模式资料整理的相关资料,开发APP应用肯定会用到Debug来调试程序，这里就细致的讲解下debug资料，需要的朋友可以参考下
2016-11-11
iOS实现动态的开屏广告示例代码
启动图是在iOS开发过程中必不可少的一个部分，很多app在启动图之后会有一张自定义的开屏广告图，但是有的时候需要让启动图看起来就是一个广告，而且还要这个广告里面会动，iOS的启动图只能是静态的，而且固定，为了实现看起来的动画效果，只能进行伪造了。下面来一起看看
2016-09-09
iOS9开放的新API--Spotlight使用指南
作为苹果iOS9的重要特性之一，Spotlight搜索如今重新回到主界面最左侧（同样支持主界面下滑呼出），通过API的支持，还带来了全新的Universal Search通用搜索功能，除了网络以及系统本身内容之外，还能直接搜索第三方应用内的相关内容。下面我们就来详细研究下Spotlight
2015-11-11

iOS App开发中Masonry布局框架的基本用法解析

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具