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

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

Masonry 在github地址如下：

　　https://github.com/SnapKit/Masonry

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

Autolayout - Masonry

• 使用步骤

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

     // 只要添加了这个宏，就不用带mas_前缀
     #define MAS_SHORTHAND
     // 只要添加了这个宏，equalTo就等价于mas_equalTo
     #define MAS_SHORTHAND_GLOBALS
     // 这个头文件一定要放在上面两个宏的后面
     #import "Masonry.h"

• 添加约束的方法

 // 这个方法只会添加新的约束
  [view makeConstraints:^(MASConstraintMaker *make) {

  }];

 // 这个方法会将以前的所有约束删掉，添加新的约束
  [view remakeConstraints:^(MASConstraintMaker *make) {

  }];

  // 这个方法将会覆盖以前的某些特定的约束
  [view updateConstraints:^(MASConstraintMaker *make) {

  }];

• 约束的类型

  1.尺寸：width\height\size
  2.边界：left\leading\right\trailing\top\bottom
  3.中心点：center\centerX\centerY
  4.边界：edges

• 示例代码1：居中显示

     // 居中显示
     UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];
     [self.view addSubview:redView];
  
     // 可以使用三个方法来添加约束。
     [redView mas_makeConstraints:^(MASConstraintMaker *make) {
         make.centerX.equalTo(self.view);
         make.centerY.equalTo(self.view);
         make.height.equalTo();
         make.width.equalTo();
     }];

• 示例代码2：并排位于底部，间距20

    //并排位于底部，间距20
  
     UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];
     [self.view addSubview:redView];
  
     UIView *blueView= [[UIView alloc] init];
     blueView.backgroundColor = [UIColor blueColor];
     [self.view addSubview:blueView];
  
     // 添加约束
     [redView makeConstraints:^(MASConstraintMaker *make) {
         make.left.equalTo(self.view.left).offset(); // 左边间距20
         make.right.equalTo(blueView.left).offset(-); // 右边和blueView间距20
         make.bottom.equalTo(self.view.bottom).offset(-); // 底部间距20
  
         make.height.equalTo(); // 高度200
  
     }];
  
     [blueView makeConstraints:^(MASConstraintMaker *make) {
         make.right.equalTo(self.view.right).offset(-); // 右边间距20
         make.bottom.equalTo(redView.bottom); // 和redView底部间距相同
  
         make.height.equalTo(redView); // 等宽
         make.width.equalTo(redView); // 等高
     }];

• 示例代码3：四个View，平分整个屏幕

 //四个View，平分整个屏幕
     //红色
     UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];
     [self.view addSubview:redView];
     // 蓝色
     UIView *blueView= [[UIView alloc] init];
     blueView.backgroundColor = [UIColor blueColor];
     [self.view addSubview:blueView];
     // 黑色
     UIView *blackView = [[UIView alloc] init];
     blackView.backgroundColor = [UIColor blackColor];
     [self.view addSubview:blackView];
     // 绿色
     UIView *greenView= [[UIView alloc] init];
     greenView.backgroundColor = [UIColor greenColor];
     [self.view addSubview:greenView];

     // autolayout
     [redView makeConstraints:^(MASConstraintMaker *make) {
         make.left.and.top.equalTo(self.view);
         make.right.equalTo(self.view.centerX);
         make.bottom.equalTo(self.view.centerY);
     }];

     [blueView makeConstraints:^(MASConstraintMaker *make) {
         make.left.equalTo(redView.right);
         make.right.equalTo(self.view);
         make.height.equalTo(redView);

     }];

     [blackView makeConstraints:^(MASConstraintMaker *make) {
         make.top.equalTo(redView.bottom);
         make.height.equalTo(redView);
         make.width.equalTo(redView);
     }];

     [greenView makeConstraints:^(MASConstraintMaker *make) {
         make.top.equalTo(blueView.bottom);
         make.left.equalTo(blackView.right);
         make.height.equalTo(blueView);
         make.width.equalTo(blueView);
     }];

     // 红色View内部
     UIImageView *image = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"010.png"]];
     UILabel *name = [[UILabel alloc] init];
     name.text = @"红色";
     name.textAlignment = NSTextAlignmentCenter;
     name.backgroundColor = [UIColor purpleColor];
     [redView addSubview:image];
     [redView addSubview:name];
     [image makeConstraints:^(MASConstraintMaker *make) {
         make.center.equalTo(redView.center).offset(-);
     }];
     [name makeConstraints:^(MASConstraintMaker *make) {
         make.left.right.equalTo(redView.left);
         make.bottom.equalTo(redView.bottom);
         make.height.equalTo();
     }];

代码示例4：其他方法使用

  // masonry 自动布局
     UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];
     [self.view addSubview:redView];

     UIView *blueView= [[UIView alloc] init];
     blueView.backgroundColor = [UIColor blueColor];
     [self.view addSubview:blueView];

     [redView makeConstraints:^(MASConstraintMaker *make) {
         // 大小100*100，居中显示
         //make.size.equalTo(100);
         //make.center.equalTo(self.view);

         //居中显示，直接设置距离四面的距离
         UIEdgeInsets eda = {,,,};
         make.edges.insets(eda);
         //
     }];

     // blueView位于redView中间
     [blueView makeConstraints:^(MASConstraintMaker *make) {
         make.center.equalTo(redView);
         make.height.equalTo(redView.height).multipliedBy(0.5); // 乘法
         make.width.equalTo(redView.width).dividedBy().offset(); // 除法+偏移量
     }];

总结：

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

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