美文网首页
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

相关文章

  • Masonry源码分析与链式编程

    在ios开发中,Masonry是最常用的第三方开发布局框架。Masonry是基于自动布局技术实现的,所以说Maso...

  • Third Party

    A:推荐使用 B:修改使用 C:参考使用 自动布局Masonry(A)iOS自动布局框架-Masonry详解SDA...

  • 适配

    Masonry iOS自动布局框架-Masonry详解

  • iOS常用第三方框架

    iOS常用第三方框架 自动布局框架Masonry // Objective-C https://github....

  • Masonry源码分析

    iOS 源代码分析 --- Masonry Masonry 是 Objective-C 中用于自动布局的第三方框架...

  • Masonry布局框架简单的介绍和使用。

    Masonry(自动布局)的基本使用 Masonry的基本介绍 在iOS开发中,为了满足开发者对苹果手机屏幕进行一...

  • ##iOS开发之ReactiveCocoa(基础)

    iOS开发之ReactiveCocoa(一) 前言 前段时间在看Masonry这个全新的第三方的布局框架的时候,开...

  • iOS开发探索-链式编程实践与分析

    我们经常使用的开源框架 Masonry 就是使用这样的编程思想,Masonry是一个OC开发中,非常好用的自动布局...

  • 探究 Masonry 源码

    Masonry 是一个轻量级自动布局框架,开发者可以使用更简洁的链式语法为控件进行布局。Masonry 的使用可以...

  • Masonry源码解析

    Masonry简介 Masonry是用于自动布局的第三方框架,对苹果的自动布局框架进行了一层封装,其接口比起官方的...

网友评论

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

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