不管是是界面创建约束还是代码创建约束,苹果官方提供的方式都比较繁琐。所以出现了第三方框架。
Masonry 在github地址如下:
https://github.com/SnapKit/Masonry
如果需要通过代码手动添加约束,Masonry真的是一个不错的选择,大大增加开发效率,何乐而不为呢。
Autolayout - Masonry
-
使用步骤
- 添加Masonry文件夹的所有源代码到项目中
- 添加2个宏、导入主头文件
1 // 只要添加了这个宏,就不用带mas_前缀 2 #define MAS_SHORTHAND 3 // 只要添加了这个宏,equalTo就等价于mas_equalTo 4 #define MAS_SHORTHAND_GLOBALS 5 // 这个头文件一定要放在上面两个宏的后面 6 #import "Masonry.h"
-
添加约束的方法
1 // 这个方法只会添加新的约束 2 [view makeConstraints:^(MASConstraintMaker *make) { 3 4 }]; 5 6 // 这个方法会将以前的所有约束删掉,添加新的约束 7 [view remakeConstraints:^(MASConstraintMaker *make) { 8 9 }]; 10 11 // 这个方法将会覆盖以前的某些特定的约束 12 [view updateConstraints:^(MASConstraintMaker *make) { 13 14 }];
-
约束的类型
1.尺寸:width\height\size 2.边界:left\leading\right\trailing\top\bottom 3.中心点:center\centerX\centerY 4.边界:edges
-
示例代码1:
居中显示
1 // 居中显示 2 UIView *redView = [[UIView alloc] init]; 3 redView.backgroundColor = [UIColor redColor]; 4 [self.view addSubview:redView]; 5 6 // 可以使用三个方法来添加约束。 7 [redView mas_makeConstraints:^(MASConstraintMaker *make) { 8 make.centerX.equalTo(self.view); 9 make.centerY.equalTo(self.view); 10 make.height.equalTo(100); 11 make.width.equalTo(200); 12 }];
-
示例代码2:
并排位于底部,间距20
1 //并排位于底部,间距20 2 3 UIView *redView = [[UIView alloc] init]; 4 redView.backgroundColor = [UIColor redColor]; 5 [self.view addSubview:redView]; 6 7 UIView *blueView= [[UIView alloc] init]; 8 blueView.backgroundColor = [UIColor blueColor]; 9 [self.view addSubview:blueView]; 10 11 // 添加约束 12 [redView makeConstraints:^(MASConstraintMaker *make) { 13 make.left.equalTo(self.view.left).offset(20); // 左边间距20 14 make.right.equalTo(blueView.left).offset(-20); // 右边和blueView间距20 15 make.bottom.equalTo(self.view.bottom).offset(-20); // 底部间距20 16 17 make.height.equalTo(200); // 高度200 18 19 }]; 20 21 [blueView makeConstraints:^(MASConstraintMaker *make) { 22 make.right.equalTo(self.view.right).offset(-20); // 右边间距20 23 make.bottom.equalTo(redView.bottom); // 和redView底部间距相同 24 25 make.height.equalTo(redView); // 等宽 26 make.width.equalTo(redView); // 等高 27 }];
-
示例代码3:
四个View,平分整个屏幕
1 //四个View,平分整个屏幕
2 //红色
3 UIView *redView = [[UIView alloc] init];
4 redView.backgroundColor = [UIColor redColor];
5 [self.view addSubview:redView];
6 // 蓝色
7 UIView *blueView= [[UIView alloc] init];
8 blueView.backgroundColor = [UIColor blueColor];
9 [self.view addSubview:blueView];
10 // 黑色
11 UIView *blackView = [[UIView alloc] init];
12 blackView.backgroundColor = [UIColor blackColor];
13 [self.view addSubview:blackView];
14 // 绿色
15 UIView *greenView= [[UIView alloc] init];
16 greenView.backgroundColor = [UIColor greenColor];
17 [self.view addSubview:greenView];
18
19
20 // autolayout
21 [redView makeConstraints:^(MASConstraintMaker *make) {
22 make.left.and.top.equalTo(self.view);
23 make.right.equalTo(self.view.centerX);
24 make.bottom.equalTo(self.view.centerY);
25 }];
26
27 [blueView makeConstraints:^(MASConstraintMaker *make) {
28 make.left.equalTo(redView.right);
29 make.right.equalTo(self.view);
30 make.height.equalTo(redView);
31
32 }];
33
34 [blackView makeConstraints:^(MASConstraintMaker *make) {
35 make.top.equalTo(redView.bottom);
36 make.height.equalTo(redView);
37 make.width.equalTo(redView);
38 }];
39
40 [greenView makeConstraints:^(MASConstraintMaker *make) {
41 make.top.equalTo(blueView.bottom);
42 make.left.equalTo(blackView.right);
43 make.height.equalTo(blueView);
44 make.width.equalTo(blueView);
45 }];
46
47 // 红色View内部
48 UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"010.png"]];
49 UILabel *name = [[UILabel alloc] init];
50 name.text = @"红色";
51 name.textAlignment = NSTextAlignmentCenter;
52 name.backgroundColor = [UIColor purpleColor];
53 [redView addSubview:image];
54 [redView addSubview:name];
55 [image makeConstraints:^(MASConstraintMaker *make) {
56 make.center.equalTo(redView.center).offset(-20);
57 }];
58 [name makeConstraints:^(MASConstraintMaker *make) {
59 make.left.right.equalTo(redView.left);
60 make.bottom.equalTo(redView.bottom);
61 make.height.equalTo(40);
62 }];
代码示例4:其他方法使用
1 // masonry 自动布局
2 UIView *redView = [[UIView alloc] init];
3 redView.backgroundColor = [UIColor redColor];
4 [self.view addSubview:redView];
5
6 UIView *blueView= [[UIView alloc] init];
7 blueView.backgroundColor = [UIColor blueColor];
8 [self.view addSubview:blueView];
9
10
11 [redView makeConstraints:^(MASConstraintMaker *make) {
12 // 大小100*100,居中显示
13 //make.size.equalTo(100);
14 //make.center.equalTo(self.view);
15
16 //居中显示,直接设置距离四面的距离
17 UIEdgeInsets eda = {100,100,100,100};
18 make.edges.insets(eda);
19 //
20 }];
21
22 // blueView位于redView中间
23 [blueView makeConstraints:^(MASConstraintMaker *make) {
24 make.center.equalTo(redView);
25 make.height.equalTo(redView.height).multipliedBy(0.5); // 乘法
26 make.width.equalTo(redView.width).dividedBy(3).offset(20); // 除法+偏移量
27 }];