黑马程序员技术交流社区

标题: 【iOS技术分享】Autolayout不用发愁：教你使用Masonry（一） [打印本页]

---

作者: Simpon    时间: 2016-5-6 17:43
标题: 【iOS技术分享】Autolayout不用发愁：教你使用Masonry（一）


前言
MagicNumber -> autoresizingMask -> autolayout
以上是纯手写代码所经历的关于页面布局的三个时期

iphone1-iphone3gs	window的size固定为(320,480)，我们只需要简单计算一下相对位置就好了。
iphone4-iphone4s	苹果推出了retina屏，但是给了码农们非常大的福利:window的size不变。
iphone5-iphone5s	window的size变了(320,568)，这时autoresizingMask派上了用场(为啥这时候不用Autolayout? 因为还要支持ios5呗)，简单的适配一下即可。
iphone6+	window的width也发生了变化(相对5和5s的屏幕比例没有变化) ，终于是时候抛弃autoresizingMask改用autolayout了。(不用支持ios5了，相对于屏幕适配的多样性来说autoresizingMask也已经过时了)

那如何快速的上手autolayout呢？说实话，当年ios6推出的同时新增了autolayout的特性，我看了一下官方文档和demo，就立马抛弃到一边了，因为实在过于的繁琐和啰嗦。(有过经验的朋友肯定有同感)
直到iPhone6发布之后，我知道使用autolayout势在必行了，这时想起了以前在浏览Github看到过的一个第三方库Masonry 在花了几个小时的研究使用后，我就将autolayout掌握了(重点是我并没有学习任何的官方文档或者其他的关于autolayout的知识)，这就是我为什么要写下这篇文章来推荐它的原因。
介绍
Masonry是一个轻量级的布局框架，拥有自己的描述语法，采用更优雅的链式语法封装自动布局，简洁明了，并具有高可读性，而且同时支持 iOS 和 Max OS X。
我们先来看一段官方的sample code来认识一下Masonry。

1. [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
   
2.      make.edges.equalTo(superview).with.insets(padding);
   
3. }];

复制代码

看到block里面的那句话: make edges equalTo superview with insets
通过链式的自然语言 就把view1给autolayout好了 是不是简单易懂?
使用
看一下Masonry支持哪一些属性

1. @property (nonatomic, strong, readonly) MASConstraint *left;
   
2. @property (nonatomic, strong, readonly) MASConstraint *top;
   
3. @property (nonatomic, strong, readonly) MASConstraint *right;
   
4. @property (nonatomic, strong, readonly) MASConstraint *bottom;
   
5. @property (nonatomic, strong, readonly) MASConstraint *leading;
   
6. @property (nonatomic, strong, readonly) MASConstraint *trailing;
   
7. @property (nonatomic, strong, readonly) MASConstraint *width;
   
8. @property (nonatomic, strong, readonly) MASConstraint *height;
   
9. @property (nonatomic, strong, readonly) MASConstraint *centerX;
   
10. @property (nonatomic, strong, readonly) MASConstraint *centerY;
    
11. @property (nonatomic, strong, readonly) MASConstraint *baseline;

复制代码

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

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了
在ios8发布后 又新增了一堆奇奇怪怪的属性(有兴趣的朋友可以去瞅瞅) Masonry暂时还不支持(不过你要支持ios6,ios7 就没必要去管那么多了)
在讲实例之前 先介绍一个MACRO
#define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self;
快速的定义一个weakSelf 当然是用于block里面啦 下面进入正题(为了方便 我们测试的superView都是一个size为(300,300)的UIView)
下面 通过一些简单的实例来简单介绍如何轻松愉快的使用Masonry:
1. [基础] 居中显示一个view

1. - (void)viewDidLoad
   
2. {
   
3.     [super viewDidLoad];
   
4.     // Do any additional setup after loading the view.
   
5.      
   
6.     WS(ws);
   
7.      
   
8.     UIView *sv = [UIView new];
   
9.     [sv showPlaceHolder];
   
10.     sv.backgroundColor = [UIColor blackColor];
    
11.     [self.view addSubview:sv];
    
12.     [sv mas_makeConstraints:^(MASConstraintMaker *make) {
    
13.         make.center.equalTo(ws.view);
    
14.         make.size.mas_equalTo(CGSizeMake(300, 300));
    
15.     }];
    
16.      
    
17. }

复制代码

代码效果


使用我之间写的MMPlaceHolder 可以看到superview已经按照我们预期居中并且设置成了适当的大小
那么先看看这几行代码

1. //从此以后基本可以抛弃CGRectMake了
   
2. UIView *sv = [UIView new];
   
3. //在做autoLayout之前 一定要先将view添加到superview上 否则会报错
   
4. [self.view addSubview:sv];
   
5. //mas_makeConstraints就是Masonry的autolayout添加函数 将所需的约束添加到block中行了
   
6. [sv mas_makeConstraints:^(MASConstraintMaker *make) {
   
7. //将sv居中(很容易理解吧?)
   
8.     make.center.equalTo(ws.view);
   
9.      
   
10.     //将size设置成(300,300)
    
11.     make.size.mas_equalTo(CGSizeMake(300, 300));
    
12. }];

复制代码

这里有两个问题要分解一下
首先在Masonry中能够添加autolayout约束有三个函数

1. - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;
   
2. - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;
   
3. - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;
   
4. /*
   
5. mas_makeConstraints 只负责新增约束 Autolayout不能同时存在两条针对于同一对象的约束 否则会报错
   
6. mas_updateConstraints 针对上面的情况 会更新在block中出现的约束 不会导致出现两个相同约束的情况
   
7. mas_remakeConstraints 则会清除之前的所有约束 仅保留最新的约束
   
8. 三种函数善加利用 就可以应对各种情况了
   
9. */

复制代码

其次 equalTo 和 mas_equalTo的区别在哪里呢? 其实 mas_equalTo是一个MACRO

1. #define mas_equalTo(...)                 equalTo(MASBoxValue((__VA_ARGS__)))
   
2. #define mas_greaterThanOrEqualTo(...)    greaterThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
   
3. #define mas_lessThanOrEqualTo(...)       lessThanOrEqualTo(MASBoxValue((__VA_ARGS__)))
   
4. #define mas_offset(...)                  valueOffset(MASBoxValue((__VA_ARGS__)))

复制代码

可以看到 mas_equalTo只是对其参数进行了一个BOX操作(装箱) MASBoxValue的定义具体可以看看源代码 太长就不贴出来了
所支持的类型 除了NSNumber支持的那些数值类型之外 就只支持CGPoint CGSize UIEdgeInsets
介绍完这几个问题 我们就继续往下了 PS:刚才定义的sv会成为我们接下来所有sample的superView
2. [初级] 让一个view略小于其superView(边距为10)

1. UIView *sv1 = [UIView new];
   
2. [sv1 showPlaceHolder];
   
3. sv1.backgroundColor = [UIColor redColor];
   
4. [sv addSubview:sv1];
   
5. [sv1 mas_makeConstraints:^(MASConstraintMaker *make) {
   
6.     make.edges.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
   
7.      
   
8.     /* 等价于
   
9.     make.top.equalTo(sv).with.offset(10);
   
10.     make.left.equalTo(sv).with.offset(10);
    
11.     make.bottom.equalTo(sv).with.offset(-10);
    
12.     make.right.equalTo(sv).with.offset(-10);
    
13.     */
    
14.      
    
15.     /* 也等价于
    
16.     make.top.left.bottom.and.right.equalTo(sv).with.insets(UIEdgeInsetsMake(10, 10, 10, 10));
    
17.     */
    
18. }];

复制代码

代码效果：


可以看到 edges 其实就是top,left,bottom,right的一个简化，分开写也可以，一句话更省事。
那么为什么bottom和right里的offset是负数呢? 因为这里计算的是绝对的数值 计算的bottom需要小鱼sv的底部高度，所以要-10，同理用于right。
这里有意思的地方是and和with，其实这两个函数什么事情都没做。

1. - (MASConstraint *)with {
   
2.     return self;
   
3. }
   
4. - (MASConstraint *)and {
   
5.     return self;
   
6. }

复制代码

但是用在这种链式语法中，就非常的巧妙和易懂 不得不佩服作者的心思(虽然我现在基本都会省略)。
Masonry 源码下载：

精华推荐:

黑马程序员：为苹果与iOS开发者的前景正名

与君共勉 --- 记黑马22期同学成长经验。

【持续更新】2016年最全最新的iOS视频+软件+源码+面试/技术

关于iOS 10最新的课程视频及demo第三弹，火速发布了

---

作者: heima_heimahaha    时间: 2016-5-20 21:02
Autolayout不用发愁

---

作者: 云飘雾散    时间: 2016-7-17 00:28
Masonry使用第三方实现约束

---

作者: 有无相生    时间: 2016-11-4 14:17
好吧 看看

---

作者: 哇哈哈ly    时间: 2016-11-10 10:07
很有用处, 刚好正在研究这个

---

作者: oweimeio@qq.com    时间: 2016-12-5 19:35
212323232342432

---

作者: wsyangyang34    时间: 2016-12-6 14:13
受教了Autolayout

---

作者: 金红日    时间: 2017-1-3 01:53
...哈哈哈哈啊

---

作者: 金红日    时间: 2017-1-3 01:53
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

---

作者: 金红日    时间: 2017-1-3 01:54
谢谢楼主介绍 现在对 Masonry 也有一定的了解了

---

作者: 金红日    时间: 2017-1-3 01:56
感谢  非常感谢教Masonry

---

作者: 爱文字的青春    时间: 2017-3-7 14:54
学一下啦66666

---

作者: 18150091472    时间: 2017-5-11 16:44
66666666666

---

作者: べ戀￠豬そ☆    时间: 2017-5-16 23:26
看看看看扩扩扩扩

---

作者: yvenshane    时间: 2017-8-3 08:53
ewrwrwerwerewrewrwe

---

作者: li010    时间: 2017-9-6 20:20
降价佳佳军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军军

---

作者: Charlin    时间: 2017-12-29 11:59
在项目中遇到手写代码的autolayout,特来查看

---

作者: baby14    时间: 2018-7-5 07:24
多谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2