文档章节

Masonry布局框架的使用

SunGiantor
 SunGiantor
发布于 2015/01/27 11:59
字数 851
阅读 920
收藏 0

Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性。比我们使用自动布局,繁琐的约束条件,好用多了。下面我们来学学masonry的使用方法。

    首先我们要下载Masonry源码。源码地址如下:

https://github.com/Masonry/Masonry

将源码下载下来后,可以直接编译过使用的。

然后将源码中的Masonry和Headers目录下的文件拷贝到我们的工程中,并添加进项目中。并在项目的编译设置中的header search paths 选项中增加$(SRCROOT)/Headers 和$(SRCROOT)/Masonry

 

然后在我们的项目预编译文件中增加

#import "Masonry.h"

然后我们就可以使用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;

 

这些属性与NSLayoutAttrubute的对照表如下:

 

·       首先在Masonry中能够添加autolayout约束有三个函数

  • - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

  • - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;

  • - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;

  • mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错

  • mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况

  • mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束

 

  • 三种函数善加利用 就可以应对各种情况了

一个小例子:

    //从此以后基本可以抛弃CGRectMake

    UIView *sv = [UIView new];

    //在做autoLayout之前 一定要先将view添加到superview 否则会报错

    [self.view addSubview:sv];

    //mas_makeConstraints就是Masonryautolayout添加函数 将所需的约束添加到block中行了

    [sv mas_makeConstraints:^(MASConstraintMaker *make) {

  //sv居中(很容易理解吧?)

        make.center.equalTo(ws.view);

        //size设置成(300,300)

        make.size.mas_equalTo(CGSizeMake(300, 300));

}];

equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO,比较的是值,equalTo比较的是view。

小例子二:

    UIView *sv1 = [UIView new];

    sv1.backgroundColor = [UIColor redColor];

    [sv addSubview:sv1];

    [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));

    }];

 

    UIView *sv2 = [UIView new];

    UIView *sv3 = [UIView new];

    sv2.backgroundColor = [UIColor greenColor];

    sv3.backgroundColor = [UIColor blueColor];

    [sv addSubview:sv2];

    [sv addSubview:sv3];

    int padding1 = 10;

    [sv2 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerY.mas_equalTo(sv.mas_centerY);

        make.left.equalTo(sv.mas_left).with.offset(padding1);

        make.right.equalTo(sv3.mas_left).with.offset(-padding1);

        make.height.mas_equalTo(@150);

        make.width.equalTo(sv3);

    }];

    [sv3 mas_makeConstraints:^(MASConstraintMaker *make) {

        make.centerY.mas_equalTo(sv.mas_centerY);

        make.left.equalTo(sv2.mas_right).with.offset(padding1);

        make.right.equalTo(sv.mas_right).with.offset(-padding1);

        make.height.mas_equalTo(@150);

        make.width.equalTo(sv2);

    }];

效果如下:

例子三:

[self.mobileView mas_makeConstraints:^(MASConstraintMaker *make){

   

        make.left.equalTo(self.view.mas_left).with.offset(0);

        make.right.equalTo(self.view.mas_right).with.offset(0);

        make.top.equalTo(self.view.mas_top).with.offset(MobileView_To_Top);

        make.height.mas_equalTo(@Height_of_MobileView);

        make.width.equalTo(self.view);

     

    }];

   

   

    [self.tipLabel mas_makeConstraints:^(MASConstraintMaker *make){

       

        make.left.equalTo(self.view.mas_left).with.offset(0);

        make.right.equalTo(self.view.mas_right).with.offset(0);

        make.top.equalTo(self.view.mas_top).with.offset(Tiplabel_To_Top);

        make.height.mas_equalTo(@Height_of_TipLabel);

        make.width.equalTo(self.view);

       

    }];

   

    [self.nextButton mas_makeConstraints:^(MASConstraintMaker *make){

       

        make.left.equalTo(self.view.mas_left).with.offset(NextButton_To_Left);

        make.right.equalTo(self.view.mas_right).with.offset(-NextButton_To_Left);

        make.top.equalTo(self.view.mas_top).with.offset(NextButton_To_Top);

        make.height.mas_equalTo(@Height_of_NextButton);

    }];

 

注意在xib或者storyboard中使用masonry框架相关方法的时候要将use Auto layout选项去掉,否则会不起作用。


© 著作权归作者所有

SunGiantor
粉丝 15
博文 97
码字总数 40524
作品 0
长宁
高级程序员
私信 提问
IOS--Autolayout封装库Masonry介绍与使用实践

参考文档:http://adad184.com/2014/09/28/use-masonry-to-quick-solve-autolayout/ 介绍:Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了...

Mark_Jiang
2016/01/27
54
0
iOS界面布局之四——使用第三方库Masonry进行autolayout布局

iOS界面布局之四——使用第三方库Masonry进行autolayout布局 一、引言 在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中,我们会发现,无论是代码量还是结构的清...

珲少
2015/11/02
7.8K
5
iOS自动布局——Masonry详解

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环...

腾讯云加社区
2018/10/30
0
0
AutoLayout框架Masonry使用心得

我们组分享会上分享了页面布局的一些写法,中途提到了AutoLayout,会后我决定将很久前挖的一个坑给填起来(还有好多坑就不说了,说了不填更毁形象了)。 可使用的框架首推Masonry,关于为啥选...

北方人在上海
2016/05/25
95
0
学习笔记整理

写iOS 程序的时候往往需要很多第三方框架的支持,可以大大减少工作量,讲重点放在软件本身的逻辑实现上。 GitHub 里面有大量优秀的第三方框架,而且 License 对商业很友好。一下摘录一下几乎...

我是IT码农
2016/03/29
19
0

没有更多内容

加载失败,请刷新页面

加载更多

Flink Graph生成及Hash生成分析

222

MrPei
18分钟前
1
0
[译]Android Activity 和 Fragment 状态保存与恢复的最佳实践

https://blog.csdn.net/growing_tree/article/details/53759564 https://blog.csdn.net/u013588712/article/details/54691791...

shzwork
18分钟前
1
0
调用第三方快递鸟物流单号查询接口API代码示例

最近进行网站后台开发,需要实现物流的即时查询,发现之前集成的 快递100物流查询 API ——【PHP 快递查询源码资源】 已经不能正常使用了; 为了方便以后的业务需求,经过比较,最后选择使用...

程序的小猿
26分钟前
3
0
java Poi 操作执行excel 文件中函数问题

poi 读取excel 文件,当excel 有函数时,poi直接读取返回的是excel 函数,并不能返回函数计算结果: 解决步骤: sheet.setForceFormulaRecalculation(true); 判断该列格式是否为...

早a
33分钟前
4
0
js模拟实现输入框input事件

直接修改value值是无法触发对应元素的事件的。 通过发送输入框input事件了, 可以触发。 这里简单封装了一个方法. window.inputValue = function (dom, st) { var evt = new InputEvent('i...

開援带碼
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部