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

一、先做一个比较

  • 使用系统自带的方法
    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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • 一、前言 关于苹果的布局一直是我比较纠结的问题,是写代码来控制布局,还是使用storyboard来控制布局呢?以前...
    iplaycodex阅读 2,335评论 0 1
  • (一)Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布...
    木易林1阅读 2,192评论 0 3
  • Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性...
    3dcc6cf93bb5阅读 1,669评论 0 1
  • iOS_autoLayout_Masonry 概述 Masonry是一个轻量级的布局框架与更好的包装AutoLay...
    指尖的跳动阅读 1,109评论 1 4
  • 一位朋友说你要记得乱语的限制,那是经验之谈也是初心,带领者要敏感你所带群组的能量 经过Amma的撬...
    猫秘阅读 527评论 0 0