Masonry框架的简单使用和介绍

-Masonry介绍

• /// 构建约束

  • mas_makeConstraints

• /// 更新约束 - 修改已经建立的约束，如果约束不存在，会在控制台输出错误

  • mas_updateConstraints

• /// 会删除已经建立的所有约束，然后重新生成约束

  • mas_remakeConstraints

• 等于函数

  • equalTo(参照对象) // 参照属性相同可以省略
  • equalTo(参照对象.mas_参照属性) // 参照属性

• 偏移函数

  • offset(CGFloat) // 偏移量
  • mas_offset(结构体) // 偏移结构题

• 添加框架

  • 将 Masonry-master 下的 Masonry 拖拽到项目中
  • 引入头文件
  • import “Masonry.h”

• 基本上所有的第三方框架如何找框架真正需要使用的类

  • 在master下面,
  • 有没有框架名字一样的文件夹
  • Classes
  • Source

-Masonry视图居中

• 需求:
  
  • 定义一个视图 200 * 50
  • 在任何设备上都摆放在屏幕的中心点
• make.xxx属性.equalTo(参照对象.mas_属性[如果相同，可以省略]).offset(常数)
• 如果是基本数据类型，需要转换成 NSNumber(int/float/double) NSValue(结构体)

// 基本语法
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view.mas_centerX);
        make.centerY.equalTo(self.view.mas_centerY);
        make.width.equalTo(@200);
        make.height.equalTo(@50);
    }];

// 进阶语法
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(200, 100)]);
    }];

// 装箱
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(100, 200));
    }];

-Masonry设置边界

• 需求:
  
  • 创建一个全屏的视图
  • 四周的边距都为 20

// 常规
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(self.view.mas_top).offset(20);
        make.left.equalTo(self.view.mas_left).offset(20);
        make.bottom.equalTo(self.view.mas_bottom).offset(-20);
        make.right.equalTo(self.view.mas_right).offset(-20);
    }];

// 简写
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.offset(20);
        make.left.offset(20);
        make.bottom.offset(-20);
        make.right.offset(-20);  
    }];

// 链式编程
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.mas_offset(20);
        make.bottom.right.mas_offset(-20);
    }];

-Masonry动画以及更新和重建约束

• 需求:
  
  • 一个红色的view在右下角
  • 使用动画让view从右边飘到左边

    [self.redView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.right.mas_offset(-200);
    }];

    [self.redView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_offset(20);
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.bottom.mas_offset(-20);
    }];

-Masonry的两个宏

• 这两个宏要写在导入头文件之前

• //define this constant if you want to use Masonry without the ‘mas_’ prefix

• // 如果不想使用 mas_ 前缀

• // #define MAS_SHORTHAND

• //define this constant if you want to enable auto-boxing for default syntax

• // enable auto-boxing 启用装箱
• // #define MAS_SHORTHAND_GLOBALS