美文网首页
iOS 开发中自动布局之 masonry 第三方框架的使用

iOS 开发中自动布局之 masonry 第三方框架的使用

作者: magic_pill | 来源:发表于2016-09-02 22:46 被阅读939次

    一、先做一个比较

    • 使用系统自带的方法
        UIView *superview = self.view;
    
        //创建一个 view1
        UIView *view1 = [[UIView alloc] init];
        view1.translatesAutoresizingMaskIntoConstraints = NO;
        view1.backgroundColor = [UIColor greenColor];
        [superview addSubview:view1];
        
        UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    
        [superview addConstraints:@[
                //view1 constraints
                [NSLayoutConstraint constraintWithItem:view1
                                             attribute:NSLayoutAttributeTop
                                             relatedBy:NSLayoutRelationEqual
                                                toItem:superview
                                             attribute:NSLayoutAttributeTop
                                            multiplier:1.0
                                              constant:padding.top],
                
                [NSLayoutConstraint constraintWithItem:view1
                                             attribute:NSLayoutAttributeLeft
                                             relatedBy:NSLayoutRelationEqual
                                                toItem:superview
                                             attribute:NSLayoutAttributeLeft
                                            multiplier:1.0
                                              constant:padding.left],
                
                [NSLayoutConstraint constraintWithItem:view1
                                             attribute:NSLayoutAttributeBottom
                                             relatedBy:NSLayoutRelationEqual
                                                toItem:superview
                                             attribute:NSLayoutAttributeBottom
                                            multiplier:1.0
                                              constant:-padding.bottom],
                
                [NSLayoutConstraint constraintWithItem:view1
                                             attribute:NSLayoutAttributeRight
                                             relatedBy:NSLayoutRelationEqual
                                                toItem:superview
                                             attribute:NSLayoutAttributeRight
                                            multiplier:1
                                              constant:-padding.right]
                ]];
    
    • 使用 masonry 实现同样效果,代码进行比较:
    • 第一种方法:
        UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    
        [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
        make.left.equalTo(superview.mas_left).with.offset(padding.left);
        make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
        make.right.equalTo(superview.mas_right).with.offset(-padding.right);
        }];
    
    • 第二种方法:
        UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
    
        [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(superview).with.insets(padding);
    }];
    

    二、masonry 的简单使用

    2.1.创建一个 size 为 (100,100) 大小,位置位于右下角的 view:
    • 首先创建一个 view:yellow
        UIView *yellow = [[UIView alloc]init];
        yellow.backgroundColor = [UIColor yellowColor];
        yellow.backgroundColor = [UIColor cyanColor];
        [self.view addSubview:yellow];
    

    注:创建完 view 控件之后就要加入父控件中,因为添加约束时候会参照父控件进行约束,如果不这样做运行时就会在约束处报错。

    • 添加约束方法一:
        [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.mas_equalTo(CGSizeMake(100, 100));
            make.bottom.mas_equalTo(self.view).offset(-20);
            make.right.mas_equalTo(self.view.mas_right).offset(-20);
        }];
    
    • 添加约束方法二:
        [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.mas_equalTo(CGSizeMake(100, 100));
            make.bottom.offset(-20);
            make.right.mas_equalTo(self.view).offset(-20);
        }];
    
    • 添加约束方法三:
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.equalTo(@(100));
            make.height.mas_equalTo(100);
            make.right.offset(-20);
            make.bottom.mas_equalTo(self.view).offset(-20);
        }];
    

    总结:①方法一和方法二所添加约束代码有所不同,通过仔细观察可以发现以下三句代码所起作用一样,系统会根据 make. 后面的关键词进行自动匹配后面的内容:

    make.bottom.mas_equalTo(self.view.mas_bottom).offset(-20);
    
    make.bottom.mas_equalTo(self.view).offset(-20);
    
    make.bottom.offset(-20);
    
    • 如果后面有 mas_equalTo 就进行匹配;
    • 如果句中没有 mas_equalTo 就会自动添加和 make. 后面的关键词对应的约束。

    ②方法三种 make.width.equalTo(@(100))make.width.equalTo 中传入的参数要是 id 类型的,所以必须要对基本数据类型进行封装;而 make.height.width.mas_equalTo(100) 中的 mas_equalTo 会对传入的参数进行自动封装,所以对传入的参数可以不封装。

    2.2.创建一个大小为父控件大小 0.3 倍的控件,并居中显示:
    • 方法一:
      [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.equalTo(self.view).multipliedBy(0.3);
            make.centerX.mas_equalTo(self.view.mas_centerX);
            make.centerY.mas_equalTo(self.view.mas_centerY);
      }];
    

    以上约束 X 和 Y 的语句中,都可以再进行更改,例如把 mas_equalTo(self.view.mas_centerY) 改成 mas_equalTo(self.view),效果一样。

    • 方法二:
      [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.equalTo(self.view).multipliedBy(0.3);
            make.center.mas_equalTo(self.view.center);
      }];
    

    同样:以上代码中的 mas_equalTo(self.view.center) 可以把参数中的 **.center **去掉。

    三、总结:

    • 一般的项目都很少使用系统提供的自动布局方法,转而使用 masonry 第三方框架;
    • mas_equalTo 和 equalTo 比较:
    • mas_equalTo:这个方法会对参数进行包装;
    • equalTo:这个方法不会对参数进行包装;
    • mas_equalTo 的功能强于 equalTo 。
    • 优化 mas_
    • 加入下面这句代码** #define MAS_SHORTHAND** ,在所有地方都可以把 mas_ 去掉,但是此句必须要加在 **#import "本类类名"; ** 之前(即导入本类头文件之前);
    • 但是有些 mas_ 不能去掉,比如:make.width.mas_equalTo(100);必须要进行包装,此时在 #import "本类类名" 之前加入以下一句即可:#define MAS_SHORTHAND_GLOBALS
    • 建议:
      • 在不确定的时候,所有地方都使用带有 mas_ 的关键字;
      • 在文件中引入 ** #define MAS_SHORTHAND** 和 #define MAS_SHORTHAND_GLOBALS 之后,就不需要在考虑任何 mas_
    • 约束的类型:
    • 尺寸:width/height/size
    • 边界:left/leading/right/trailing/top/bottom
    • 中心的:center/centerX/centerY
    • 边界:edges

    总之,masonry 的语法很灵活,勤加练习,找到规律,使用起来就会觉得很轻松了 O(∩_∩)O

    相关文章

      网友评论

          本文标题: iOS 开发中自动布局之 masonry 第三方框架的使用

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