masonry使用技巧

masonry git地址:https://github.com/SnapKit/Masonry

本文主要会讲到masonry英文文档(见上面的git地址)中提及到的使用说明,以及个人使用过程中的一些经验,仅适用一些刚使用masonry的新手,大牛可以忽略,当然也可以进来指点。

一、常用的属性与常量

1. MASViewAttribute 以对应的系统类型

MASViewAttribute NSLayoutAttribute
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

2.UIView

先来一波最为常用的使用方法,大家可以看一下大致语法,下面会细讲使用

//.分别设置各个相对边距(superview为view的父类视图,下同)
make.left.mas_equalTo(superView.mas_left).mas_offset(10);
make.right.mas_equalTo(superView.mas_right).mas_offset(-10);
make.top.mas_equalTo(superView.mas_top).mas_offset(10);
make.bottom.mas_equalTo(superView.mas_bottom).offset(-10);

//直接连接使用left大于等于每个值
make.left.mas_greaterThanOrEqualTo(10);

//设置宽和高
make.width.mas_equalTo(60);
make.height.mas_equalTo(60);

//.设置center和款高比
make.center.mas_equalTo(superView);
make.width.mas_equalTo(superView).multipliedBy(1.00/3);
make.height.mas_equalTo(superView).multipliedBy(0.25);

//.关于约束优先级,此处要注意约束冲突的问题,统一约束优先级大的生效
make.left.mas_equalTo(100);
make.left.mas_equalTo(view.superview.mas_left).offset(10);
make.left.mas_equalTo(20).priority(700);
make.left.mas_equalTo(40).priorityHigh();
make.left.mas_equalTo(60).priorityMedium();
make.left.mas_equalTo(80).priorityLow();

//.如果你想让view的(x坐标)左边大于等于label的左边,以下两个约束的写法效果一样
 make.left.greaterThanOrEqualTo(label);
 make.left.greaterThanOrEqualTo(label.mas_left);

注:约束的链式写法中,不包含其他相对的view时,默认为其superview,即make.left.mas_equalTo(100);等价于make.left.mas_equalTo(view.superview.mas_left).offset(10);make.left.mas_equalTo(view.superview).offset(10);

3. NSNumber

自动布局允许使用常量去设置宽或高,如果你想通过一个数字设置一个view的最小和最大的width,可以用equality blocks,如下:

//width >= 200 && width <= 400

make.width.greaterThanOrEqualTo(@200);

make.width.lessThanOrEqualTo(@400)

然而自动布局不允许对齐属性的约束(如:left,right,centerY等)设置为常量值,你可以使用NSNumber来设置相对于父类view这些约束属性,如:

// creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@10)

如果你不想使用NSNumber来设置,也可以用如下结构来创建你的约束,如:


make.top.mas_equalTo(42);

make.height.mas_equalTo(20);

make.size.mas_equalTo(CGSizeMake(50, 100));

make.edges.mas_equalTo(UIEdgeInsetsMake(10, 0, 10, 0));

make.left.mas_equalTo(view).mas_offset(UIEdgeInsetsMake(10, 0, 10, 0));

以上用法默认添加mas_前缀,如果你不想添加此前缀,但还想使用常量值设置约束,需要在导入Masonry头文件前,设置宏定义MAS_SHORTHAND_GLOBALS,至于为什么,去masonry代码中搜索一下MAS_SHORTHAND_GLOBALS便知。

4. NSArray

用数组添加集中不同类的约束,如:

make.height.equalTo(@[view1.mas_height, view2.mas_height]);

make.height.equalTo(@[view1, view2]);

make.left.equalTo(@[view1, @100, view3.right]);

二、约束的优先级属性

  • .priority允许你设置一个非常准确的的约束优先级(0-1000)

  • .priorityHigh 相当于系统的 UILayoutPriorityDefaultHigh

  • .priorityMedium 介于 high and low之间的优先级

  • .priorityLow 相当于系统的 UILayoutPriorityDefaultLow

注:默认通过mas_make添加的约束不设置优先级时,默认都是最高(1000)

优先级属性可以放在约束链的末端使用,如:

make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();
make.top.equalTo(label.mas_top).with.priority(600);

三、更加便利的约束方法

Masonry提供了一些便利的方法供我们同时创建多个不同的约束,他们被称为MASCompositeConstraints,如:

edges

// 使一个view的top, left, bottom, right 等于view2的

make.edges.equalTo(view2);

//相对于superviewde上左下右边距分别为5,10,15,20

make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))

size

// 使得宽度和高度大于等于 titleLabel

make.size.greaterThanOrEqualTo(titleLabel)

// 相对于superview宽度大100,高度小50

make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))

center

//中心与button1对齐

make.center.equalTo(button1)

//水平方向中心相对向左偏移5,竖直方向中心向下偏移10

make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))

你可以在约束链里添加相应的view来增加代码的可读性:

// 除了top,所有的边界与superview对齐

make.left.right.and.bottom.equalTo(superview);

make.top.equalTo(otherView);

四、关于如何修改约束

有时候,你为了实现动画或者移除替换一些约束时,你需要去修改一些已经存在的约束,Masonry提供了一些不同的方法去更新约束,你也可以将多个约束存在数组里

1. References

你可以持有某个特定的约束,让其成为成员变量或者属性
//设置为公共或私接口

@property (nonatomic, strong) MASConstraint *topConstraint;

...

// 添加约束

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {

self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);

make.left.equalTo(superview.mas_left).with.offset(padding.left);

}];

...

// 然后可以调用
//该约束移除
[self.topConstraint uninstall];
//重新设置value,最常用
self.topConstraint.mas_equalTo(20);
//该约束失效
[self.topConstraint deactivate];
//该约束生效
[self.topConstraint activate];

2. mas_updateConstraints

如果你只是想更新一下view对应的约束,可以使用 mas_updateConstraints 方法代替 mas_makeConstraints方法
//这是苹果推荐的添加或者更新约束的地方

// 在响应setNeedsUpdateConstraints方法时,这个方法会被调用多次

// 此方法会被UIKit内部调用,或者在你触发约束更新时调用

- (void)updateConstraints {

[self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {

make.center.equalTo(self);

make.width.equalTo(@(self.buttonSize.width)).priorityLow();

make.height.equalTo(@(self.buttonSize.height)).priorityLow();

make.width.lessThanOrEqualTo(self);

make.height.lessThanOrEqualTo(self);

}];

//调用super
[super updateConstraints];

}

3. mas_remakeConstraints

mas_updateConstraints只是去更新一些约束,然而有些时候修改一些约束值是没用的,这时候mas_remakeConstraints就可以派上用场了

mas_remakeConstraints某些程度相似于mas_updateConstraints,但不同于mas_updateConstraints去更新约束值,他会移除之前的view的所有约束,然后再去添加约束

- (void)changeButtonPosition {

      [self.button mas_remakeConstraints:^(MASConstraintMaker *make) {

      make.size.equalTo(self.buttonSize);

     if (topLeft) {

          make.top.and.left.offset(10);

     } else {

     make.bottom.and.right.offset(-10); 

   }

  }];

五、在哪创建我的约束

贴一个官方说明的例子:

@implementation DIYCustomView

- (id)init {

self = [super init];

if (!self) return nil;

// --- Create your views here ---

self.button = [[UIButton alloc] init];

return self;

}

// tell UIKit that you are using AutoLayout

+ (BOOL)requiresConstraintBasedLayout {

return YES;

}

// this is Apple's recommended place for adding/updating constraints

- (void)updateConstraints {

// --- remake/update constraints here

[self.button remakeConstraints:^(MASConstraintMaker *make) {

make.width.equalTo(@(self.buttonSize.width));

make.height.equalTo(@(self.buttonSize.height));

}];

//according to apple super should be called at end of method

[super updateConstraints];

}

- (void)didTapButton:(UIButton *)button {

// --- Do your changes ie change variables that affect your layout etc ---

self.buttonSize = CGSize(200, 200);

// tell constraints they need updating

[self setNeedsUpdateConstraints];

}

六、Layout必备知识

AutoLayout关于更新的几个方法的区别

  • setNeedsLayout:告知页面需要更新,但是不会立刻开始更新。执行后会立刻调用layoutSubviews。

  • layoutIfNeeded:告知页面布局立刻更新。所以一般都会和setNeedsLayout一起使用。如果希望立刻生成新的frame需要调用此方法,利用这点一般布局动画可以在更新布局后直接使用这个方法让动画生效。

  • layoutSubviews:系统重写布局

  • setNeedsUpdateConstraints:告知需要更新约束,但是不会立刻开始

  • updateConstraintsIfNeeded:告知立刻更新约束

  • updateConstraints:系统更新约束

七、使用tips

  • 给view添加约束时,必须已经添加到其superview上面
  • 不需要设置view.translatesAutoresizingMaskIntoConstraints = NO;,masonry内部已经帮我设置过了
  • 手写布局时,合理使用约束,尽量约束冲突问题
  • 因为iOS中原点在左上角所以注意使用offset时注意right和bottom用负数

推荐两个大牛写的关于Masonry源码解析的博客

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

推荐阅读更多精彩内容

  • 一、前言 关于苹果的布局一直是我比较纠结的问题,是写代码来控制布局,还是使用storyboard来控制布局呢?以前...
    iplaycodex阅读 2,437评论 0 1
  • Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使...
    丘比沙拉阅读 3,179评论 2 19
  • Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使...
    爱敲代码的果果阅读 1,873评论 0 2
  • Autolayout就像一个知情达理,善解人意的好姑娘,可惜长相有点不堪入目,所以追求者寥寥无几。所幸遇到了化妆大...
    小笨狼阅读 23,957评论 28 227
  • 今天又多看到了一篇夜行日记。 也许是因为他比较成熟,所以反而很多事都藏着放在心里。 当他还在发夜行日记的时候,我会...
    安褚阅读 288评论 0 0