setNeedsLayout VS layoutIfNeeded

这篇文章主要讨论setNeedsLayoutlayoutIfNeeded的差异,在这个过程中我们将用动画(通过修改视图约束实现)来展示其不同之处。在此之前,首先了解下iOS应用程序的main run loop、Auto Layout

作为正常启动过程的一部分,iOS中的UIApplication在主线程上运行app的main run loop。主运行循环处理事件(如用户触摸)和基于视图的界面更新。当事件(如触摸、位置更新、多媒体控制、motion等)发生时,run loop会找到事件的相应处理程序,调用对应方法。在某一时刻,所有事件都已被处理,控制返回到run loop,将这一刻称为更新周期(update cycle),这也是Apple在文档中的做法。你也可以使用其他术语对其进行概念化,例如:动作中断(a break in the action)、重绘周期(redraw cycle)、空闲时刻(a free moment)。

当事件正在处理和分发时更改视图,这些操作并不会立即执行。相反,系统会记录更改,并将视图标记为需要重绘,在下一更新周期重新布局视图。因为所有这些发生的都很快,一般在用户看来并不需要等待重新绘制。知道处理事件和更新布局之间有时间间隔,有助于理解setNeedsLayoutlayoutIfNeeded

现在,可以通过引用上面的update cycle来查看这两种方法之间的区别。

  • setNeedsLayout:当需要调整UIView子视图布局时,需要在主线程调用该方法。该方法记录请求并立即返回(即异步执行),等待下一个更新周期更新视图。因此,可以将多个视图布局更新合并到一个update cycle,这样有助于提高性能。需要注意的是,我们无法知道下个update cycle在何时发生。
  • layoutIfNeeded:强制视图立即更新其布局,即同步执行。当使用Auto Layout时,布局引擎根据约束的变化更新视图的位置。该方法的接收者将作为根视图,布局时也将从视图树的根视图开始。如果没有待处理的布局更新,则此方法将直接退出,而不会修改布局,或调用任何与布局有关的方法。

在开始demo前,有一个关于Auto Layout和update cycle的概念。实际上布局和绘制视图时有三个阶段:

  1. 第一阶段更新约束(constraint pass),这发生在底部。
  2. 第二阶段布局视图和子视图(layout pass),其自上到下发生,且和约束设置有关。
  3. 第三阶段显示视图(display pass),根据布局信息(layout pass)重新绘制视图。

1. 创建demo

创建Single View Application模版的demo,在storyboard中添加一个UIView,设置其背景色为orangeColor,添加一个UIButton用来更新视图高度的约束。如下所示:

Storyboard.png

2. layoutIfNeeded

创建视图高度约束的IBOutlet;创建UIButton的响应方法,用来修改视图高度约束。这样当点击按钮时,视图高度将变大或变小。代码如下:

@interface ViewController ()

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *orangeViewHeight;  // 默认高度约束为30。

@end

@implementation ViewController

- (IBAction)buttonTapped:(UIButton *)sender {
    // 任何在等待update cycle中的更新现在都会被立即执行,Apple认为这是一个最佳实践。
    [self.view layoutIfNeeded];
    
    // 修改高度的约束。
    if (self.orangeViewHeight.constant == 30) {
        self.orangeViewHeight.constant = self.view.bounds.size.height - 100;
    } else {
        self.orangeViewHeight.constant = 30;
    }
    
    //
    [UIView animateWithDuration:2.0 animations:^{
        // view需要立即重新布局。
        [self.view layoutIfNeeded];
    }];
}

当修改高度约束后,会自动执行setNeedsLayout等价操作,其会自动在下一个update cycle更新视图,而不需要显式调用setNeedsLayout方法。但这一更新过程不是动画形式。在上面的代码中,使用了一个2秒钟的动画,在动画中使用layoutIfNeeded强制立即刷新。因为这一布局过程是同步执行,视图约束的变化会被动画捕捉到。

运行demo,效果如下:

layoutIfNeeded.gif

3. setNeedsLayout

在动画中,使用setNeedsLayout替换layoutIfNeeded方法。如下所示:

- (IBAction)buttonTapped:(UIButton *)sender {
    ...
    [UIView animateWithDuration:2.0 animations:^{
        // 标记view需要重新布局。
        [self.view setNeedsLayout];
    }];
}

动画中的setNeedsLayout只是标记视图需要重新布局,且标记后立即返回,即在block内视图没有变化,因此,也不会产生动画。

点击按钮,视图会根据约束迅速变化,但不会有动画。

setNeedsLayout.gif

注释掉动画部分代码,运行不会有变化。

动画是在自身线程执行,而非在update cycle所在的主线程。此外,动画在下一个update cycle时被触发。在动画过程中,进度更新会被发送到主线程,这些增量产生了动画。动画中的setNeedsLayout不会对视图进行更改,并发送更新以供显示。相反,一旦代码在IBAction中完成,并且没有更多事件需要处理,则会发生更新周期。此时,不通过任何动画立即更新布局。

更新代码如下所示,可以更清晰看出其区别:

- (IBAction)buttonTapped:(UIButton *)sender {
    // 任何在等待update cycle中的更新现在都会被立即执行,Apple认为这是一个最佳实践。
    [self.view layoutIfNeeded];
    
    // 修改高度的约束。
    if (self.orangeViewHeight.constant == 30) {
        self.orangeViewHeight.constant = self.view.bounds.size.height - 100;
    } else {
        self.orangeViewHeight.constant = 30;
    }
    
    // 立即更新布局。
    [self.view layoutIfNeeded];     // 该布局更新没有动画。
    
    //
    [UIView animateWithDuration:2.0 animations:^{
        // 修改约束,并立即重新布局。
        self.orangeViewHeight.constant = 200;
        [self.view layoutIfNeeded];     // 该布局更新会以动画形式呈现。
    }];
}

运行demo,如下所示:

setNeedsLayout VS layoutIfNeeded

4. layoutSubviews

在iOS 5.1之后,layoutSubviews默认使用你设置的约束来确定子视图的大小和位置。

子类根据需要重写此方法,以执行更为精确的子视图布局。只有在子视图的autoresizing和约束不能满足布局要求时,才应该重写layoutSubviews。重写该方法时,可以直接设置子视图的frame。

不要直接调用layoutSubviews方法。如果要强制更新布局,使用setNeedsLayout方法;如果需要立即更新布局,调用layoutIfNeeded方法。

layoutSubviews就像重新绘制中的drawRect:layoutSubviews用来布局,drawRect:用来绘制。

iOS中缓存视图用的非常多,通常视图只绘制一次,而不需要更新。

UIViewcontentMode属性被设置为UIViewContentModeRedraw常量时,修改bounds属性视图会进行重绘;contentMode属性设置为其他常量时,修改视图bounds,或者其他视图覆盖当前视图,视图只会进行重新布局,不会进行重绘。

参考资料:

  1. setNeedsLayout vs layoutIfNeeded Explained

  2. What is the relationship between UIView's setNeedsLayout, layoutIfNeeded and layoutSubviews?

欢迎更多指正:https://github.com/pro648/tips/wiki

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

推荐阅读更多精彩内容

  • 翻译自:Demystifying iOS Layout 在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和...
    Mr大喵喵阅读 400评论 0 3
  • 布局 layoutSubviews 不能显示调用这个方法,有许多可以在run loop 的不同时间点触发layou...
    _YZG_阅读 4,457评论 0 2
  • 目录 0、前言 一、Auto Layout前世今生 二、Auto Layout基础知识 1.Auto Layout...
    浮游lb阅读 24,302评论 3 89
  • 这医院就是为了挣钱,一点小毛病做了这么多检查,竟是折腾人!到医院看望做了小手术的一个亲戚,听到了家属和我妈大吐苦水...
    南方医科大学阅读 122评论 6 1
  • 最近的日子没有想象中匆忙好在也没有总是虚度时光,终于发现了适合自己的自习室,有大片拼合的桌子和可以透进阳光的窗。太...
    石头姑娘133阅读 480评论 0 1