Masonry------轻量级的布局框架

Masonry是什么?

Masonry是一个轻量级的布局框架,拥有自身的描述性语法,采用更加优雅的链式语法封装了自动布局autolayout,简洁明了,可读性高,并且同时支持iOS和Mac OSXMasonry
Masonry在GitHub

Masonry怎么用?

首先我们看一下官方的示例代码:

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

Masonry的一些属性与NSLayoutAttribute对照

MASViewAttribute NSAutoLayout 说明
view.mas_left NSLayoutAttributeLeft 左侧
view.mas_right NSLayoutAttributeRight 右侧
view.mas_top NSLayoutAttributeTop 上侧
view.mas_bottom NSLayoutAttributeBottom 下侧
view.mas_leading NSLayoutAttributeLeading 首部
view.mas_trailing NSLayoutAttributeTrailing 尾部
view.mas_width NSLayoutAttributeWidth
view.mas_height NSLayoutAttributeHeight
view.mas_centerX NSLayoutAttributeCenterX 横向中点
view.mas_centerY NSLayoutAttributeCenterY 纵向中点
view.mas_baseline NSLayoutAttributeBaseline 文本基线

举例:

1. 居中显示一个View:

    UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor redColor];
    //2.使用Masonry约束之前,一定要将view加到superView上,否则会报错
    [self.view addSubview:view1];
    //用masonry函数对你添加的view进行约束
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        // 设置view1居中
        make.center.equalTo(self.view);
        // 设置view2宽高
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];
    /**
     *1.mas_makeConstraints 只负责添加新增约束,Autolayout中不能同时存在两条针对于同一对象的约束,否则会报错
     *2.mas_makeConstraints 针对上面的情况,会更新在block中出现的约束,确保不会出现两个相同的约束
     *3.mas_makeConstraints 会清除之前所有的约束,仅保留最新的约束
     */
    /**
     *mas_equal 除了支持NSNumber的数值类型外,就支持CGPoint CGSize UIEdgeInsets
     */

2.让一个view略小于其superView[边界15];

    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:view2];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        //1.第一种布局方法
        make.top.equalTo(self.view).with.offset(15);
        make.left.equalTo(self.view).with.offset(15);
        make.bottom.equalTo(self.view).with.offset(-15);
        make.right.equalTo(self.view).with.offset(-15);
        //2.第二种
//        make.top.left.bottom.and.right.equalTo(self.view).insets(UIEdgeInsetsMake(15, 15, 15, 15));
        //3.第三种
//        make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(15, 15, 15, 15));
    }];

3.让两个高度为150 的veiw垂直居中并且等宽等间隔排列 间隔(10) 宽度自动计算

    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor purpleColor];
    [self.view addSubview:view3];
    
    UIView *view4 = [[UIView alloc] init];
    view4.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:view4];
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(self.view.mas_centerY);
        make.left.equalTo(self.view.mas_left).with.offset(10);
        make.right.equalTo(view4.mas_left).with.offset(-10);
        make.height.mas_equalTo(@150);
        make.width.equalTo(view4);
    }];
    [view4 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.mas_equalTo(self.view.mas_centerY);
        make.left.equalTo(view3.mas_right).with.offset(10);
        make.right.equalTo(self.view.mas_right).with.offset(-10);
        make.height.equalTo(view3);
        make.width.equalTo(view3);
    }];

使用Masonry过程中可能出现的错误:

一.错误信息统计(width改为with)

reason: 'Attributes should be chained before defining the constraint relation'
崩溃到masonry内部的方法里面:

崩溃的提示信息:

直接上代码:(这是运行没有问题的代码)

     [self.GradientLabel mas_makeConstraints:^(MASConstraintMaker *make) {
           make.right.equalTo(self.CurrenPriceLabel.mas_right);
          make.left.equalTo(self.VariationLabel.mas_left).**with**.offset(30);**//更改的是此处的width变为with,否则会报错**
          make.**width**.equalTo(@60);**//此处的width不需要改动**
          make.height.mas_equalTo(@30);
     }];

注意:解决方法将width更改为with即可。并不是全部的width都要改变,注意看上面的代码部分。

二.错误信息统计(父子控件之间的关系没有建立好)

reason:couldn't find a common superview for<UIView: ...frame: ...layer: ...>

解决方法:查---好自己做约束的父子控件之间的关系是否建立起来了。

         UITextField *nameTextField = [UITextField new];
         nameTextField.font = [UIFont systemFontOfSize:14];
         nameTextField.placeholder = @"请再次输入密码";
***        //父子控件的建立好关系:self.testView为父控件,nameTextField为子控件***
         [self.testView **addSubview**:nameTextField];
         ***//开始约束***
        [lable mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.mas_equalTo(self.testView.mas_left).with.offset(20);
        make.top.mas_equalTo(self.testView.mas_top).with.mas_offset(0);
        make.height.mas_equalTo(30);
        make.width.mas_equalTo(50);
     }];

可能出现的错误章节摘于作者 Xcode8

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

推荐阅读更多精彩内容