Masonry 使用案例

如果说自动布局解救了多屏幕适配,那众多三方库的出现就解救了系统自动布局的写法。Masonry就是其中一个。在Github上,Masonry已经得到5000+个star,用法上也比较简单灵活,很大程度上替代了传统的NSLayoutConstraint布局方式。本文将利用几个案例来讲解Masonry的使用。

Masonry下载地址:

https://github.com/SnapKit/Masonry

本文Demo下载地址:

?https://github.com/saitjr/MasonryDemo.git


环境信息
Mac OS X 10.10.3
Xcode 6.3
iOS 8.3

正文:

前期准备:

  1. 下载Masonry并导入到工程中;
  2. 将Masonry.h导入当前控制器。

案例一:

要求:

无论在什么尺寸的设备上(包括横竖屏切换),红色view都居中显示。

实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 初始化view并设置背景
UIView *view = [UIView new];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];

// 使用mas_makeConstraints添加约束
[view mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加大小约束(make就是要添加约束的控件view)
make.size.mas_equalTo(CGSizeMake(100, 100));
// 添加居中约束(居中方式与self相同)
make.center.equalTo(self.view);
}];
}

@end</code></pre>

<h2>案例二:</h2>

<h4>要求:</h4>

<ol>
<li>无论在什么尺寸的设备上(包括横竖屏切换),黑色view的左、上边距、大小都不变;</p></li>
<li><p>灰色view的右边距不变</p></li>
<li><p>宽、高、上边距黑色view相等</p></li>
</ol>

<p>[caption id="" align="alignnone" width="202"]<img class="alignnone" src="http://7xlnnj.com1.z0.glb.clouddn.com/ios-autolayout-demo-7.png" alt="" width="202" height="337" /> 最终效果[/caption]

<h4>实现:</h4>

<pre><code class="objc">
#import "ViewController2.h"
#import "Masonry.h"

@interface ViewController2 ()

@end

@implementation ViewController2

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

// 初始化黑色view
UIView *blackView = [UIView new];
blackView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blackView];

// 给黑色view添加约束
[blackView mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加大小约束
make.size.mas_equalTo(CGSizeMake(100, 100));
// 添加左、上边距约束(左、上约束都是20)
make.left.and.top.mas_equalTo(20);
}];

// 初始化灰色view
UIView *grayView = [UIView new];
grayView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:grayView];

// 给灰色view添加约束
[grayView mas_makeConstraints:^(MASConstraintMaker *make) {

// 大小、上边距约束与黑色view相同
make.size.and.top.equalTo(blackView);
// 添加右边距约束(这里的间距是有方向性的,左、上边距约束为正数,右、下边距约束为负数)
make.right.mas_equalTo(-20);
}];
}

@end</code></pre>

在上面的案例中,涉及以下内容:

1.?<span class="s1">在</span><span class="s2">Masonry</span><span class="s1">中,</span><span class="s2">and,with</span><span class="s1">都没有具体操作,仅仅是为了提高程序的可读性</span>

<pre><code class="objc">
make.left.and.top.mas_equalTo(20);

等价于

1
2

make.left.top.mas_equalTo(20);

2.?equalTo与mas_equalTo

如果约束条件是数值或者结构体等类型,可以使用mas_equalTo进行包装。关于这个问题,我也不是很清楚,可以看看官方的解释:

Instead of using NSNumber, you can use primitives and structs to build your constraints.By default, macros which support autoboxing are prefixed with mas_. Unprefixed versions are available by defining MAS_SHORTHAND_GLOBALS before importing Masonry.

我一般将数值类型的约束用mas_equalTo,而相对于某个控件,或者某个控件的某个约束,我会使用equalTo,如:

1
2
3

make.size.mas_equalTo(CGSizeMake(100, 100));
make.center.equalTo(weakSelf.view);

 

案例三:

要求:

  1. 有两个view,黑色与灰色;
  2. 黑色view的左、上、右边距均为20,下边距灰色view 20,宽度自适应,高度与灰色view平分整个界面;
  3. 灰色view宽度为黑色view的一半(即左边以中线起始),右、下边距与黑色view相同,高度与黑色view相同。

实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

#import "ViewController3.h"
#import "Masonry.h"

@interface ViewController3 ()

@end

@implementation ViewController3

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.

__weak typeof(self) weakSelf = self;

// 初始化黑色view
UIView *blackView = [UIView new];
blackView.backgroundColor = [UIColor blackColor];
[self.view addSubview:blackView];

// 给黑色view添加约束
[blackView mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加左、上边距约束
make.left.and.top.mas_equalTo(20);
// 添加右边距约束
make.right.mas_equalTo(-20);
}];

// 初始化灰色view
UIView *grayView = [UIView new];
grayView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:grayView];

// 给灰色view添加约束
[grayView mas_makeConstraints:^(MASConstraintMaker *make) {

// 添加右、下边距约束
make.bottom.and.right.mas_equalTo(-20);
// 添加高度约束,让高度等于黑色view
make.height.equalTo(blackView);
// 添加上边距约束(上边距 = 黑色view的下边框 + 偏移量20)
make.top.equalTo(blackView.mas_bottom).offset(20);
// 添加左边距(左边距 = 父容器<del>纵轴</del>横轴中心 + 偏移量0)
make.left.equalTo(weakSelf.view.mas_centerX).offset(0);
}];
}

案例四:

要求:

当键盘挡住输入框时,输入框自动向上弹到键盘上方。

实现:

这里需要使用到Masonry的另外一个方法mas_updateConstraints。这个方法用于更新控件约束。

具体的实现方式可以下载Demo来看,这里只贴出键盘弹出时的处理代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

- (void)keyboardWillChangeFrameNotification:(NSNotification *)notification {

// 获取键盘基本信息(动画时长与键盘高度)
NSDictionary *userInfo = [notification userInfo];
CGRect rect = [userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue];
CGFloat keyboardHeight = CGRectGetHeight(rect);
CGFloat keyboardDuration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];

// 修改下边距约束
[_textField mas_updateConstraints:^(MASConstraintMaker *make) {

make.bottom.mas_equalTo(-keyboardHeight);
}];

// 更新约束
[UIView animateWithDuration:keyboardDuration animations:^{

[self.view layoutIfNeeded];
}];
}

总结:

  1. 可以给控件添加left/right/top/bottom/size/height/width/insert约束;
  2. 库提供了三个方法,mas_makeConstraints添加约束,mas_updateConstraints修改约束,mas_remakeConstraints清除以前约束并添加新约束;
  3. 可以通过view.mas_bottom获得view的某个约束;
  4. 在约束的block中,使用make来给当前控件添加约束。