ios开发学习笔记040-autolayout 第三方框架Masonry

不管是是界面创建约束还是代码创建约束，苹果官方提供的方式都比较繁琐。所以出现了第三方框架。

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     }];

 

总结：

　　和苹果自带的约束添加方法相比，苹果的约束方法简直无法直视啊。这样给控件添加约束简单快捷，主要是条理清晰，言简意赅。





今日如此，明日依旧。
2015-06-04


posted @ 2015-06-04 09:03  struggle_time  阅读(2113)  评论(5)  编辑  收藏  举报