Masonry的层层进阶

作者: 非典型技术宅 | 来源:发表于2016-11-06 08:31 被阅读401次

    Masonry的官方是这么描述自己的。

    • Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.

    • However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API.
      Masonry : https://github.com/SnapKit/Masonry
      SnapKit: https://github.com/SnapKit/SnapKit

    2.1 Basic Grammar

    mas_makeConstraints
    mas_updateContraints
    mas_remakeContraints

    1 基础写法:

        [redView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self.view.mas_centerX);
            make.centerY.equalTo(self.view.mas_centerY);
    //equalTo 后面要求跟一个OC对象的数据,所以需要对数字进行包装。@将数字变成了NSNumber 类型。
            make.width.equalTo(@200);
            make.height.equalTo(@50);
        }];
    

    make.xxxx属性.equalTo(参照对象.mas_属性【如果相同,可以省略】).offset(常数)

    2 进阶写法

    • NSNumber只能装基本数据类型
    • NSValue可以装结构体等数据类型
    // 进阶语法
        [redView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.center.equalTo(self.view);
            make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(200, 100)]);
        }];
    

    3 自动装箱的写法

    • 装箱:把一个基本数据类型转换成为对象类型的过程叫做“装箱”,或者“包装”。
        [redView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.center.equalTo(self.view);
            make.size.mas_equalTo(CGSizeMake(100, 200));
        }];
    

    4 Masonry的练习

    4.1 设置居中

    
    // create a imageview in the center of scrollview UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"001"]]; [scrollView addSubview:imageView]; [imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.center.equalTo(scrollView); make.size.mas_equalTo(CGSizeMake(140, 140)); }];
    

    4.2 让一个view略小于其superView(边距为20)

    • 假设redView 是View 的子控件
    [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.equalTo(self.view).offset(20);
            make.left.equalTo(self.view).offset(20);
            make.bottom.equalTo(self.view).offset(-20);
            make.right.equalTo(self.view.).offset(-20);
        }];
    
    • 如果参照的是自己的父控件,参照控件也可以省略不写
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.top.offset(20); make.left.offset(20); make.bottom.offset(20); make.right.offset(20); }];
    
    • 如果多个属性的offset数值一样,属性也可以连写
        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.left.offset(20);
            make.bottom.right.offset(20);
        }];
    

    4.3 通过更简单的内边距形式修改控件的位置和大小

        [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.edges.mas_offset(UIEdgeInsetsMake(20, 20, 20, 20));
        }];
    

    5. 更新及重建约束

    • update是更新约束:如果之前已经添加过,那么就是更新约束。但是如果之前没有设置过,有可能会造成约束冲突。
    • 修改完约束之后,需要让子控件根据约束调整frame才能生效
    [imageView mas_updateConstraints:^(MASConstraintMaker *make) {
            make.right.offset(-50);
        }];
        
    //    播放两秒动画
        [UIView animateWithDuration:2 animations:^{
            //让这个控件立刻根据约束修改自己的frame
            [imageView layoutIfNeeded];
        }];
    

    6. Masonry的两个宏

    • 如果想在使用Masonry框架时,省略mas_的前缀,需要定义以下宏:

    • #define MAS_SHORTHAND

    • 让equalTo,offset都带有自动装箱功能,需要定义以下宏:

    • #define MAS_SHORTHAND_GLOBALS

    相关文章

      网友评论

        本文标题:Masonry的层层进阶

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