Masonry的使用

Masonry_下载地址
是什么?
Autolayout的第三方框架.
做什么用?
以简约的代码方式,对界面进行布局.
怎么用?

1. 将源码导入到项目里面.

• 一般第三方框架,都包含示例代码.也就是说,包含main.m文件.
  如果直接将整个文件夹,拖入项目中那么就会有冲突.会存在2个main.m文件
• 所以仅需拖入源码即可.一般跟"框架"名称相同.
  

• 删除有冲突的文件.

  
  

2. 使用时包含主头文件(因为"主头文件-Masonry.h"里面会包含其他类)
   

3. 代码示例
   第一个示例: (约束,设置红色View的4边的内边距.)

   
   

-(void)edges{
    UIView * redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    //万能公式: obj1.属性 = (obj2.属性 * 幂值) + 常量
//    //multipliedBy为1,可以不写
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        //redView的顶部 = (父控件.顶部*1)+20;
//        //redView的右边 = (父控件.右边*1)+-20;
//        make.top.equalTo(self.view.mas_top).multipliedBy(1).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);
//    }];
    
//    //代码优化1:如果父控件的属性 = 当前view的属性,可以省略.
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.top.equalTo(self.view).offset(40);
//        make.left.equalTo(self.view).offset(40);
//        make.bottom.equalTo(self.view).offset(-40);
//        make.right.equalTo(self.view).offset(-40);
//    }];
    
//    //代码优化2:当前View参照的为父控件,则父控件可以省略.
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.top.offset(80);
//        make.left.offset(80);
//        make.bottom.offset(-80);
//        make.right.offset(-80);
//    }];
    
//    //代码优化3:当多边间距为同个constant时,可以用and来连接.
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.top.and.left.offset(80);
//        make.bottom.and.right.offset(-80);
//    }];
    
//    //代码优化4:其实可以直接省略and.
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.top.left.offset(80);
//        make.bottom.right.offset(-80);
//    }];
    
//    //代码优化4:使用内边距的方式,指定对应的constant.
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(40, 80, 40, 80));
//    }];
    
    //代码优化5:使用内边距的方式,如果参照对象当前控件的view,则可以省略
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.insets(UIEdgeInsetsMake(40, 80, 20, 80));
    }];
}

---

第2个示例: (约束,红色View中心点垂直&水平居中,且固定红色View的宽和高)

-(void)center{
    UIView * redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
//    添加约束    
//    make,这里指的是redView.
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.centerX.equalTo(self.view.mas_centerX);
//        make.centerY.equalTo(self.view.mas_centerY);
//        make.width.equalTo(@100);
//        make.height.equalTo(@100);
//    }];
    
//    //代码优化1: equalTo(@100)更改为mas_equalTo(200);
//    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.centerX.equalTo(self.view.mas_centerX);
//        make.centerY.equalTo(self.view.mas_centerY);
//        make.width.mas_equalTo(200);
//        make.height.mas_equalTo(200);
//    }];
    
    //代码优化2: 中心点水平垂直方向居中,固定redView的大小为300.
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(self.view);
        make.size.mas_equalTo(300);
    }];
}

---

第3个示例:

1. 蓝色view和红色view等宽等高.
2. 蓝色view距离左边,下边为30,距离红色view的间距为30.
3. 红色view距离右边,下边为30.
4. 红色view高度40.

-(void)test{
    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];
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.offset(30);//左边间距30.
        //蓝色view.右边 = (redView.左边 *1) + -30;
        make.right.equalTo(redView.mas_left).offset(-30);
        make.bottom.offset(-30);
        //蓝色view.宽度 == 红色viewd.宽度
        make.width.equalTo(redView.mas_width);
        make.height.equalTo(redView.mas_height);
    }];
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.right.offset(-30);
        make.height.mas_equalTo(40);//红色view的高度 = 40;
//        //顶部对齐+底部对齐 = 等高
//        //make.height.equalTo(redView.mas_height);
//        make.top.equalTo(blueView.mas_top);//顶部对齐
//        make.bottom.equalTo(blueView.mas_bottom);//底部对齐
    }];  
}

---

//更新约束
 //updateConstraints会更新之前存在的约束,如果没有,会添加新的约束
 [redView mas_updateConstraints:^(MASConstraintMaker *make) {
 make.height.equalTo(@80);
 }];
 
 // 删除之前所有的约束,添加新的约束
 [redView mas_remakeConstraints:^(MASConstraintMaker *make) {
 make.size.mas_equalTo(100);
 make.center.mas_equalTo(self.view);
 }];

---

#define MAS_SHORTHAND // 可以省略前缀'mas_'
#define MAS_SHORTHAND_GLOBALS //可以让equalTo()跟mas_equalTo()一样,将基本类型转换为对象.

MAS_SHORTHAND

MAS_SHORTHAND_GLOBALS

---