Autolayout-Masonry框架

作者: Mitchell | 来源:发表于2015-08-02 21:00 被阅读1191次
    作者:Mitchell 
    

    一、Masonry简介###

    Masonry框架是一个使用了优雅语法封装的轻量级layout框架。Masonry有它自己的一套框架用来描述NSLayoutConstraints布局的DSL,提高了约束代码的简洁性与可读性。


    二、Masonry约束添加步骤###

    • 创建控件
    • 将控件添加到父控件之中
    • 禁用autoresizing
    • 设置约束

    三、Masonry的引入###

    • 第一步:在Masonry链接下载库,用CocoaPod的方式,或者直接拖拽的方式引入文件夹。
    • 第二步:在需要的类中引入头文件#import "Masonry.h",先编译运行一下,如果没错那么就引入成功。

    四、Masonry的具体使用###

    • 主要方法:
    • 创建约束:
       - (NSArray*)makeConstraints:(void(^)(MASConstraintMaker *))block {
        return [self mas_makeConstraints:block];
    }
    
    • 更新约束:(如果没有约束的时候会自动添加)
         - (NSArray*)updateConstraints:(void(^)(MASConstraintMaker *))block {
        return [self mas_updateConstraints:block];
    }
    
    • 删除约束
         - (NSArray*)remakeConstraints:(void(^)(MASConstraintMaker *))block {
        return [self mas_remakeConstraints:block];
    }
    
    • 具体使用:
    • 代码:
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {     
            make.top.equalTo(self.view.mas_top).offset(20);
            make.left.equalTo(self.view.mas_left).offset(20);
            make.right.equalTo(self.view.mas_right).offset(-20);
            make.height.equalTo([NSNumber numberWithFloat:50]);
        }];
    
    • 说明:
      显而易见,代码的意思就是让blueView距离self.view的上下左右各位20。
    • 使用技巧:
    • 为了增加代码的可读性这里有两个简化代码的宏:#define MAS_SHORTHAND#define MAS_SHORTHAND_GLOBALS
    • MAS_SHORTHAND:只要在导入Masonry主头文件之前定义这个宏, 那么以后在使用Masonry框架中的属性和方法的时候, 就可以省略mas_前缀
    • MAS_SHORTHAND_GLOBALS:只要在导入Masonry主头文件之前定义这个宏,那么就可以让equalTo函数接收基本数据类型, 内部会对基本数据类型进行包装
    • 注意:这两个宏如果想有效使用,必须要再添加Masonry头文件之前导入进去
    • 简化后的代码:
    [blueView makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(self.view.top).offset(20); // y
            make.left.equalTo(self.view.left).offset(20); // x
            make.right.equalTo(self.view.right).offset(-20); // w
            make.height.equalTo(50);
        }];
    
    • Masonry当然也支持乘除法,例如:
    [redView makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(blueView.bottom).offset(20);
            make.right.equalTo(blueView.right);
            make.height.equalTo(blueView.height);
            make.width.equalTo(blueView.width).multipliedBy(0.5);
        }];
    

    五、总结###

    • Masonry是一个非常棒的编写Autolayout的第三方库,以及其优雅的语言以及极佳的可读性征服了工程师们。

    相关文章

      网友评论

      • 舒马赫:Masory写的很棒,但是不喜欢纯代码写界面,太慢了。推荐使用xml的布局库FlexLib,采用前端布局标准flexbox(不使用autolayout),支持热刷新,自动计算高度等。可以到这里了解详细信息:

        https://github.com/zhenglibao/FlexLib
      • 尼古拉斯骄傲:为啥用cocoapods导入的 然后找不到头文件

      本文标题:Autolayout-Masonry框架

      本文链接:https://www.haomeiwen.com/subject/zldvqttx.html