ios开发之autolayout 第三方框架Masonry

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

Masonry 在github地址如下：

https://github.com/SnapKit/Masonry

如果需要通过代码手动添加约束，Masonry真的是一个不错的选择，大大增加开发效率，何乐而不为呢。

Autolayout - Masonry

• 使用步骤

  • 添加Masonry文件夹的所有源代码到项目中
  • 添加2个宏、导入主头文件

    1 // 只要添加了这个宏，就不用带mas_前缀2 #define MAS_SHORTHAND3 // 只要添加了这个宏，equalTo就等价于mas_equalTo4 #define MAS_SHORTHAND_GLOBALS5 // 这个头文件一定要放在上面两个宏的后面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\size2.边界：left\leading\right\trailing\top\bottom3.中心点：center\centerX\centerY4.边界：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); // 左边间距2014       make.right.equalTo(blueView.left).offset(-20); // 右边和blueView间距2015       make.bottom.equalTo(self.view.bottom).offset(-20); // 底部间距2016 17       make.height.equalTo(200); // 高度20018 19   }];20 21   [blueView makeConstraints:^(MASConstraintMaker *make) {22       make.right.equalTo(self.view.right).offset(-20); // 右边间距2023       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     // autolayout21     [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     }];

总结：

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