Masonry 使用总结 2018-08-22

转自:https://github.com/potato512/SYDemo_Masonry

#常用方法

1 添加约束 mas_makeConstraints

2 更新约束、也可以添加新约束 mas_updateConstraints

3 重置之前的约束 mas_remakeConstraints

#使用注意事项

1、使用autolayout之前,一定要将视图添加到父视图上,否则会报错。

2、使用autolayout时,不能同事对同一个视图使用mas_makeConstraints,否则会报错。

3、使用autolayout时,如果非要修改约束时,可使用mas_updateConstraints进行修改更新。

4、使用autolayout时,可使用mas_remakeConstraints清除之前的所有约束,仅保留最新的约束。

5、mas_equal支付的数据类型包括:NSNumber,CGPoint,CGSize,UIEdgeInsets。

6、equalTo与mas_equalTo的区别:equalTo比较的是view,而mas_equalTo比较的是值。

7、边界中顶部、左侧边界的数值为正整数;而底部、右侧边界的数值为负整数(原因在于计算的是绝对的数值,即计算的底部,或右侧边界的数值时,相对的视图底部高度,或右侧宽度,所以要负数)。

8、多个视图的父视图相同时,须先实例化多个视图,且多个视图都添加到视图后才进行约束设置。

9、更新约束后,需要刷新UI布局时,需要调用下面的方法

情况1:实例化UI后,先通过mas_makeConstraints添加约束,然后再通过mas_updateConstraints修改更新某一个约束,然后再调用layoutIfNeeded

情况2:实例化UI后,先通过mas_makeConstraints添加约束,然后再通过mas_remakeConstraints重置所有约束,然后再调用layoutIfNeeded

情况3:实例化UI后,暂不添加约束,后通过updateViewConstraints方法里添加约束mas_updateConstraints,然后再调用setNeedsUpdateConstraints、layoutIfNeeded

#使用设置

1、居中设置

垂直居中:make.centerY.mas_equalTo(self.window.mas_centerY)

水平居中:make.centerX.mas_equalTo(self.window.mas_centerX)

全屏居中:make.center.equalTo(self.window)

2、边界设置

上边界:make.top.equalTo(self.window).with.offset(15.0)

左边界:make.left.equalTo(self.window).with.offset(15.0)

下边界:make.bottom.equalTo(self.window).with.offset(-15.0)

右边界:make.right.equalTo(self.window).with.offset(-15.0)

或:

上边界:make.top.mas_equalTo(15.0)

左边界:make.left.mas_equalTo(15.0)

下边界:make.bottom.mas_equalTo(-15.0)

右边界:make.right.mas_equalTo(-15.0)

或:

上边界、左边界:make.top.left.mas_equalTo(15.0)

下边界、右边界:make.bottom.right.mas_equalTo(-15.0)

或:

make.top.left.bottom.and.right.equalTo(self.window).with.insets(UIEdgeInsetsMake(15.0,15.0,15.0,15.0))

或:

make.edges.equalTo(self.window).with.insets(UIEdgeInsetsMake(15.0,15.0,15.0,15.0))

与另一个视图的边界间距设置

与另一个视图右部边界间距:

make.right.mas_equalTo(currentView.mas_left).offset(10.0);

与另一个视图底部边界间距:

make.top.mas_equalTo(currentView.mas_bottom).offset(10.0);

3、equalTo与mas_equalTo有什么区别?

equalTo比较的是view

mas_equalTo比较的是数值

4、and和with?

什么事情都没做,只是增加代码可读性。

5、倍数设置

设置宽度为self.view的一半,multipliedBy是倍数的意思,也就是,使宽度等于self.view宽度的0.5倍

make.width.equalTo(self.view.mas_width).multipliedBy(0.5);

设置高度为self.view高度的一半

make.height.equalTo(self.view.mas_height).multipliedBy(0.5);

6、大小设置

(1)宽:

make.width.equalTo(self.view.mas_width).multipliedBy(0.5);

或:make.width. mas_equalTo(320.0).multipliedBy(0.5);

或:make.width. mas_equalTo(160.0);

(2)高:make.height.equalTo(self.view.mas_height).multipliedBy(0.5);

或:make.height. mas_equalTo(320.0).multipliedBy(0.5);

或:make.height. mas_equalTo(160.0);

(3)size:make.size. mas_equalTo(CGSizeMake(300.0,50.0));

或:make.size.equalTo(view);

或:make.size.mas_equalTo(CGSizeMake(150.0,50.0)).multipliedBy(0.5);

或:make.edges.equalTo(self.view);

#疑问:

1、UILable如何设置多行显示?

2、UITextView如何设置自适应多行显示? UITextView实始化时,设置的约束只能显示一行,随着输入内容的不断增多,可以在代理方法中实现高度自适应,即重新更新高度约束。

3、UISCrollView如何设置contentSize?

通过过渡视图设置。

(1)containerView为crollView的过渡子视图(垂直设置原理说明);

(2)containerView相对于crollView的约束为make.top.left.bottom.and.right.equalTo(crollView).with.insets(UIEdgeInsetsZero); make.width.equalTo(crollView);

(3)containerView的多个子视图label,且containerView的高度约束最终为最后一个子视图label:make.bottom.equalTo(label.mas_bottom);

(4)containerView的高度约束,即为crollView的垂直方向的高度约束。

4、UITableView如何设置UITableViewCell的高度?

在自自定义,或系统的UITableViewCell中,根据数据model显示,或隐藏UI子视图,以及UILabel的自适应显示(需要先设置多行自适应显示的属性)。同时,在代理方法中设置计算返回的高度。

5、如何处理动画效果?

实现动画效果,即修改更新UI的约束即可,可以使用mas_updateConstraints更新某个约束,也可以使用mas_remakeConstraints清除之前的约束,重新设置所有约束。但不管何种方式,都需要UI所有的父视图调用方法"- (void)layoutIfNeeded;"。

6、如何动态修改约束

使用mas_updateConstraints修改更新某一个约束

使用mas_remakeConstraints,清除之前的所有约束,重新添加约束

7、如何获取约束里设置的值,或是获取约束对象的frame

8、约束中edge、size设置的区别

设置某个子视图的大小与其父视图相同大小时,如frame中设置:label.frame = self.view.bounds;,可以使用size约束,也可以使用edges约束。 *(1)size约束(可能会出现约束异常):make.size.equalTo(self.view); *(2)edges约束(建议使用此方法):make.edges.equalTo(self.view);

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

推荐阅读更多精彩内容

  • (一)Masonry介绍 Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布...
    木易林1阅读 2,338评论 0 3
  • Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性...
    3dcc6cf93bb5阅读 1,768评论 0 1
  • Masonry是一个轻量级的布局框架,它拥有自己的描述语法(采用更优雅的链式语法封装)来自动布局,具有很好可读性且...
    AngeloD阅读 3,305评论 0 9
  • 因为之前开发时都是在xib文件中添加约束,或者代码中计算frame并没有接触过Masonry,现在写篇博客来归纳总...
    口子窖阅读 6,476评论 1 4
  • iOS_autoLayout_Masonry 概述 Masonry是一个轻量级的布局框架与更好的包装AutoLay...
    指尖的跳动阅读 1,165评论 1 4