Masonry自动布局使用
Masonry是一个轻量级的布局框架,采用更好的语法封装自动布局,它有自己的布局DSL。简洁明了并具有高可读性 而且同时支持 iOS 和 Max OS X。
NSLayoutConstraints的缺点
NSLayoutConstraints是一个强大且灵活的自动布局架构,可是通过代码创建的约束是十分冗余,下面我们通过一段代码来实现你想要一个视图铺满它的父视图。但是边距为10
UIView *superview = self; UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1]; UIEdgeInsets padding = UIEdgeInsetsMake(, , , ); [superview addConstraints:@[ //view1 constraints
[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:
constant:-padding.right], ]];
即使一个简单的例子所需的代码都相当冗长,当你有超过 2 或 3 视图时变得不可读,另一种选择是使用可视化格式语言 (VFL),有点不太冗长。然而,ASCII 类型语法上有它自己的陷阱并且作为 NSLayoutConstraint constraintsWithVisualFormat: 添加动画效果 返回一个数组也有点难。
Masonry的优点
下面是使用MASConstraintMaker创建同样的约束
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[self.subview mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_top).with.offset(padding.top);
make.left.equalTo(self.view.mas_left).with.offset(padding.left);
make.bottom.equalTo(self.view.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(self.view.mas_right).with.offset(-padding.right);
}];
更短代码实现
[self.subview mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view).with.insets(padding);
}];
此外还需注意使用NSLayoutConstraints时调用了[superview addConstraints:... ] 方法,在Masonry库中是自动向当前视图添加约束的,我们也可以通过self.subview.translatesAutoresizingMaskIntoConstraints = NO来手动设置。
并不是所有创建都一样
.equalTo 等价于 NSLayoutRelationEqual
.lessThanOrEqualTo 等价于 NSLayoutRelationLessThanOrEqual
.greaterThanOrEqualTo 等价于 NSLayoutRelationGreaterThanOrEqual
这些三个等式约束可以是下列任一操作作为一个参数
1. MASViewAttribute
MASViewAttribute | NSLayoutAttribute |
---|---|
view.mas_left | NSLayoutAttributeLeft |
view.mas_right | NSLayoutAttributeRight |
view.mas_top | NSLayoutAttributeTop |
view.mas_bottom | NSLayoutAttributeBottom |
view.mas_leading | NSLayoutAttributeLeading |
view.mas_trailing | NSLayoutAttributeTrailing |
view.mas_width | NSLayoutAttributeWidth |
view.mas_height | NSLayoutAttributeHeight |
view.mas_centerX | NSLayoutAttributeCenterX |
view.mas_centerY | NSLayoutAttributeCenterY |
view.mas_baseline | NSLayoutAttributeBaseline |
2. UIView/NSView
如果你想要view.left大于或等于label.left可以
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);
3. NSNumber
自动布局允许宽度和高度设置为常量值。如果你想要将视图具有最小值和最大宽度设置你可以
//width >= 200 && width <= 400
make.width.greaterThanOrEqualTo(@);
make.width.lessThanOrEqualTo(@)
然而自动布局不允许对齐属性如左对齐、 右对齐,centerY等将设置为常量值
//creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@)
make.top.mas_equalTo();
make.height.mas_equalTo();
make.size.mas_equalTo(CGSizeMake(, ));
make.edges.mas_equalTo(UIEdgeInsetsMake(, , , ));
make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(, , , ));
您可以使用基元和结构打造你的约束替代 NSNumber。默认情况下,支持自动装箱的宏均以 mas_ 作为前缀。没有前缀的版本均可通过导入之前定义 MAS_SHORTHAND_GLOBALS。
4. NSArray
make.height.equalTo(@[view1.mas_height, view2.mas_height]);
make.height.equalTo(@[view1, view2]);
make.left.equalTo(@[view1, @, view3.right]);
优先原则
.priority 允许你指定优先级
.priorityHigh等价于 UILayoutPriorityDefaultHigh高优先级
.priorityMedium 中等优先级
.priorityLow 等价于 UILayoutPriorityDefaultLow
make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow(); make.top.equalTo(label.mas_top).with.priority();
组成
Masonry也提供了几个方便的方法,同时创建多个约束,被称为 MASCompositeConstraints。
edges
// make top, left, bottom, right equal view2
make.edges.equalTo(view2); // make top = superview.top + 5, left = superview.left + 10,
// bottom = superview.bottom - 15, right = superview.right - 20
make.edges.equalTo(superview).insets(UIEdgeInsetsMake(, , , ))
center
// make centerX and centerY = button1
make.center.equalTo(button1) // make centerX = superview.centerX - 5, centerY = superview.centerY + 10
make.center.equalTo(superview).centerOffset(CGPointMake(-, ))
// All edges but the top should equal those of the superview
make.left.right.and.bottom.equalTo(superview);
make.top.equalTo(otherView);
Masonry自动布局使用的更多相关文章
- Masonry自动布局
介绍,入门: http://www.cocoachina.com/ios/20141219/10702.html 下载: http://code.cocoachina.com/detail/30114 ...
- Masonry自动布局与UIScrolView适配
Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X.可以通过cocoa ...
- Masonry自动布局:复合约束
前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...
- IOS Masonry自动布局
之前项目用Frame布局,这个项目登录用了VFL,后来觉得用Masonry,前天布局TableViewCell时用了下 ,觉得还不错. #import "Masonry.h" #i ...
- 【iOS】Masonry 自动布局 MASViewConstraint.m:207 错误
问题详情: Assertion failure 报错原因: make.right.equalTo([_imageView superview]).right.with.offset(-); make. ...
- Coding源码学习第四部分(Masonry介绍与使用(三))
接上篇继续进行Masonry 的学习. (12)tableViewCell 布局 #import "TableViewController.h" #import "Tes ...
- masonry使用问题
2015年11月3日 coreData的学习练习中复习使用masonry自动布局 masonry自动布局发现问题: 两个控件的相对布局: 如果被参考对象用这个带anchor的属性,就会报这样一个错误: ...
- iOS masonry 不规则tagView布局 并自适应高度
在搜索页面经常会有不规则的tag出现,这种tagView要有点击事件,单个tagView可以设置文字颜色,宽度不固定根据内容自适应,高度固定,数量不固定.总高度就不固定.最近对于masonry的使用又 ...
- Masonry学习札记
Masnory学习札记 在之前的文章里有草草提到过Masonry自动布局,可这么重要第三方布局框架的怎么可以怎么随便带过呢!昨天在完成页面的时候刚好遇到了被Masorny功能惊叹的部分,所以趁热打铁写 ...
随机推荐
- 零宽断言 -- Lookahead/Lookahead Positive/Negative
http://www.vaikan.com/regular-expression-to-match-string-not-containing-a-word/ 经常我们会遇到想找出不包含某个字符串的文 ...
- javascript UI框架
http://www.jianshu.com/p/709e8d6c03c9 http://www.cnblogs.com/kingboy2008/p/5261771.html jQuery uiboo ...
- Python yield使用
https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ 您可能听说过,带有 yield 的函数在 Python 中被称 ...
- Java Deadlock Example and How to analyze deadlock situation
source:http://www.journaldev.com/1058/java-deadlock-example-and-how-to-analyze-deadlock-situation De ...
- iOS-Xcode必备插件XAlign:瞬间优化你的代码
今天向大家介绍一个非常好用的Xcode代码编辑插件,这个插件可以很快速地使代码对齐,有3种模式:“=”对齐.宏定义对齐和属性对齐 XAlign效果图 1.“=”对齐 2.宏定义对齐 3.属 ...
- ASP.NET MVC:Cookie 的过期时间在服务器端是获取不到的
现状 一旦 Cookie 在服务器端设置后,在后续的请求中是获取不到过期时间的,因为:Cookie 是存储和过期处理都是由客户端管理的,在后续的请求中,浏览器向服务器发送 Cookie 的时候就不包含 ...
- Kubernetes中StatefulSet介绍
StatefulSet 是Kubernetes1.9版本中稳定的特性,本文使用的环境为 Kubernetes 1.11.如何搭建环境可以参考kubeadm安装kubernetes V1.11.1 集群 ...
- html效果增强
1:提示框 http://keleyi.com/keleyi/phtml/jqplug/ 2:loading效果 <script>function showPage(){ $('#d ...
- 浅谈Java Future接口
Java项目编程中,为了充分利用计算机CPU资源,一般开启多个线程来执行异步任务.但不管是继承Thread类还是实现Runnable接口,都无法获取任务执行的结果.JDK 5中引入了Callable和 ...
- JAVAWEB开发之HttpServletResponse和HttpServletRequest详解(下)(各种乱码、验证码、重定向和转发)
HttpServletRequest获取请求头信息 (1)获取客户机请求头 String getHeader(String name) Enumeration<String> getHe ...