浅谈Autolayout-04Masonry

Masonry介绍

• 目前最流行的Autolayout第三方框架
• 用优雅的代码方式编写Autolayout
• 省去了苹果官方恶心的Autolayout代码
• 大大提高了开发效率
• 框架地址：https://github.com/SnapKit/Masonry

mas_equalTo和equalTo

• 默认情况下
  
  • mas_equalTo有自动包装功能，比如自动将20包装为@20
  • equalTo没有自动包装功能
• 如果添加了下面的宏，那么mas_equalTo和equalTo就没有区别

#define MAS_SHORTHAND_GLOBALS

• 注意：这个宏一定要添加到 #import “Masonry.h”前面

mas_width和width

• 默认情况下

  • width是make对象的一个属性，用来添加宽度约束用的，表示对宽度进行约束
  • mas_width是一个属性值，用来当做equalTo的参数，表示某个控件的宽度属性

• 如果添加了下面的宏，mas_width也可以写成width

#define MAS_SHORTHAND

• mas_height、mas_centerX以此类推

可有可无的用法

• 以下方法都仅仅是为了提高可读性，可有可无

- (MASConstraint *)with {    return self;}- (MASConstraint *)and {    return self;}

Masonry的使用方法

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

    // 只要添加了这个宏，width就不用带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\size2.边界：left\leading\right\trailing\top\bottom3.中心点：center\centerX\centerY4.边界：edges

实现如下界面

• ViewController.m源文件

////  ViewController.m//  Masonry-kavee-test1////  Created by Kavee DJ on 16/5/12.//  Copyright © 2016年 Kavee DJ. All rights reserved.//#import "ViewController.h"//define this constant if you want to use Masonry without the 'mas_' prefix#define MAS_SHORTHAND//define this constant if you want to enable auto-boxing for default syntax#define MAS_SHORTHAND_GLOBALS#import "Masonry.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // 添加两个控件    // 蓝色控件    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);    }];}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}- (void)test1{    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    [self.view addSubview:blueView];    // 尺寸限制：100x100    // 位置：粘着父控件右下角，间距是20    // 这个方法只会添加新的约束    //    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {    //        // 宽度约束    //        make.width.equalTo(@100);    //        // 高度约束    //        make.height.equalTo(@100);    //        // 右边    //        make.right.equalTo(self.view.right).offset(-20);    //        // 顶部    //        make.top.equalTo(self.view.top).offset(20);    //    //    }];    //    [blueView makeConstraints:^(MASConstraintMaker *make) {    //        // 宽度约束    //        make.width.equalTo(100);    //        // 高度约束    //        make.height.equalTo(100);    //        // 右边    //        make.right.equalTo(self.view).offset(-20);    //        // 顶部    //        make.top.equalTo(self.view).offset(20);    //    }];    //    [blueView makeConstraints:^(MASConstraintMaker *make) {    //        // 宽度高度同时约束    //        make.width.height.equalTo(100);    //        // 右边    //        make.right.equalTo(self.view).offset(-20);    //        // 顶部    //        make.top.equalTo(self.view).offset(20);    //    }];    [blueView makeConstraints:^(MASConstraintMaker *make) {        // 宽度高度约束        make.width.height.equalTo(self.view).multipliedBy(0.5).offset(-50);        // 右边        make.right.equalTo(self.view).offset(-20);        // 顶部        make.top.equalTo(self.view).offset(20);    }];}- (void)test2{    // 蓝色控件    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    [self.view addSubview:blueView];    // 居中 (水平+垂直)    // 尺寸是父控件的一半    [blueView makeConstraints:^(MASConstraintMaker *make) {        make.size.equalTo(self.view).multipliedBy(0.5);        make.center.equalTo(self.view);    }];}- (void)test3{    // 蓝色控件    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    [self.view addSubview:blueView];    // 距离父控件四周都是50间距    //    [blueView makeConstraints:^(MASConstraintMaker *make) {    //        make.left.equalTo(self.view.left).offset(50);    //        make.right.equalTo(self.view.right).offset(-50);    //        make.top.equalTo(self.view.top).offset(50);    //        make.bottom.equalTo(self.view.bottom).offset(-50);    //    }];    //    [blueView makeConstraints:^(MASConstraintMaker *make) {    //        make.left.offset(50);    //        make.right.offset(-50);    //        make.top.offset(50);    //        make.bottom.offset(-50);    //    }];    //    [blueView makeConstraints:^(MASConstraintMaker *make) {    //        make.left.top.offset(50);    //        make.right.bottom.offset(-50);    //    }];    [blueView makeConstraints:^(MASConstraintMaker *make) {        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(50, 50, 50, 50));    }];}- (void)test4{    // 蓝色控件    UIView *blueView = [[UIView alloc] init];    blueView.backgroundColor = [UIColor blueColor];    [self.view addSubview:blueView];    // 添加约束    [blueView makeConstraints:^(MASConstraintMaker *make) {        //        make.width.equalTo(self.view.width).multipliedBy(0.5);        //        make.height.equalTo(self.view.height).multipliedBy(0.5).offset(-100);        make.width.equalTo(100);        make.height.equalTo(100);        make.centerX.equalTo(self.view.centerX);        make.centerY.equalTo(self.view.centerY);    }];}@end