8.Masonry的使用方法

Masonry

• 使用步骤

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

    只要添加了这个宏'#define MAS_SHORTHAND'，就不用带mas_前缀
    只要添加了这个宏 '#define MAS_SHORTHAND_GLOBALS'，equalTo就等价于mas_equalTo
    这个头文件一定要放在上面两个宏的后面
    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
  

• 使用实例

  • 设置View粘着父控件右下角，间距是20

     // 蓝色控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 尺寸限制：100x100
    // 位置：粘着父控件右下角，间距是20
    
    // 这个方法只会添加新的约束
    // 1. [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    // 宽度约束
    //        make.width.equalTo(@100);
    //        // 高度约束
    //        make.height.equalTo(@100);
    //        // 右边
    //        make.right.equalTo(self.view.mas_right).offset(-20);
    //        // 顶部
    //        make.top.equalTo(self.view.mas_top).offset(20);
    //    }];
    
    //2.    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        // 宽度约束
    //        make.width.mas_equalTo(100);
    //        // 高度约束
    //        make.height.mas_equalTo(100);
    //        // 右边
    //        make.right.equalTo(self.view).offset(-20);
    //        // 顶部
    //        make.top.equalTo(self.view).offset(20);
    //    }];
    
    //3.    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        // 宽度高度约束
    //        make.width.height.mas_equalTo(100);
    //        // 右边
    //        make.right.equalTo(self.view).offset(-20);
    //        // 顶部
    //        make.top.equalTo(self.view).offset(20);
    //    }];
    
    //3.    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        // 宽度高度约束
            make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);
            make.size.mas_equalTo(CGSizeMake(100, 100));
    //        make.size.mas_equalTo(100);
    //        // 右边
    //        make.right.equalTo(self.view).offset(-20);
    //        // 顶部
    //        make.top.equalTo(self.view).offset(20);
    //    }];
    
    4.   [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        // 宽度高度约束
        make.height.mas_equalTo(self.view).multipliedBy(0.5).offset(-50);
        // 右边
        make.right.mas_equalTo(self.view).offset(-20);
        //        make.right.offset(-20);
        // 顶部
        make.top.mas_equalTo(self.view).offset(20);
        //        make.top.offset(20);
    }];
    
    /**
     mas_equalTo：这个方法会对参数进行包装
     equalTo：这个方法不会对参数进行包装
     mas_equalTo的功能强于 > equalTo
     */
    

  • 设置View居中

         // 蓝色控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 居中（水平+垂直）
    // 尺寸是父控件的一半
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.size.mas_equalTo(self.view).multipliedBy(0.5);
        make.center.mas_equalTo(self.view);
        //        make.centerX.mas_equalTo(self.view);
        //        make.centerY.mas_equalTo(self.view);
    }];
    

  • 设置View距离四周50间距

        // 蓝色控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 距离父控件四周都是50间距
    //1.    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        make.left.mas_equalTo(self.view.mas_left).offset(50);
    //        make.right.mas_equalTo(self.view.mas_right).offset(-50);
    //        make.top.mas_equalTo(self.view.mas_top).offset(50);
    //        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-50);
    //    }];
    
    //2.    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        make.left.mas_equalTo(self.view).offset(50);
    //        make.right.mas_equalTo(self.view).offset(-50);
    //        make.top.mas_equalTo(self.view).offset(50);
    //        make.bottom.mas_equalTo(self.view).offset(-50);
    //    }];
    
    // 3.   [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        make.left.offset(50);
    //        make.right.offset(-50);
    //        make.top.offset(50);
    //        make.bottom.offset(-50);
    //    }];
    
    //4.    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
    //        make.left.top.offset(50);
    //        make.right.bottom.offset(-50);
    //    }];
    
    5. [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        //        make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));
        make.center.mas_equalTo(self.view).insets(UIEdgeInsetsZero);
    }];
    

  • 设置两个View间距处理

        // 蓝色控件
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 红色控件
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    
    CGFloat margin = 20;
    CGFloat height = 50;
    [blueView makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.left).offset(margin);
        make.right.equalTo(redView.left).offset(-margin);
        make.bottom.equalTo(self.view.bottom).offset(-margin);
        make.height.equalTo(height);
        make.top.equalTo(redView.top);
        make.bottom.equalTo(redView.bottom);
        make.width.equalTo(redView.width);
    }];
    
    [redView makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.view.right).offset(-margin);
    }];