回归初心 —— iOS 之原生 Frame 布局

前言: 不知道从何时起,Frame 布局开始渐渐淡出 iOS 开发的舞台,越来越的多的小伙伴开始使用 xib、storyboard、swiftUI 及第三方 SDK 来进行布局。然而,Frame 布局始终是我心目中的 iOS 布局之王。

BY:一位不愿透露姓名的靓仔

iOS 布局的前世今生:

1.原始:Frame

iOS 开发中最古老、最简陋的布局方式,由开发人员手动设置各个视图的原点(origin)及大小(size)从而确定整个视图在父视图的位置。

在最初的 iOS 开发中,由于针对机型有限,适配简单,这种古老的布局方式显得游刃有余。然而在资本主义利益熏心的驱使下,千奇百怪的 iOS 设备不断进入人们的日常生活,程序猿们不得不一一适配这些新设备,渐渐地, Frame 布局显得越来越力不从心,革命的声音就此出现……

2. 抛砖引玉:AutoLayout

在 Apple 赚得盆满钵满之后,终于没忘记体恤一下其生态圈的各位工程师,为我们在 iOS6 中带来了新的局部方案:Autolayout,此套方案核心为“参照”及“约束”,开发人员只需要从这两个角度将视图的呈现方式使用代码描述出来,后续的工作即可交给系统自动处理。

然而理想都是丰满的,现实总是残酷的,AutoLayout 提供的 API 过于冗长,而要将视图的“参照”及“约束”描述清楚,需要从多个维度调用多条 API 才能达到,而且 AutoLayout 的脾气也不太好,一旦缺少必要的”参照“或者”约束“,就可能会导致整个程序挂掉,此时的 Autolayout,更像是一个半成品,没几个程序员愿意为它举牌,大家宁愿继续被 Frame 约束压榨,也不愿意使用 Autolayout ……

3. 曙光:Masonry

Autolayout 无人问津,究其根源是因为其 API 设计问题。但大家都明白,Autolayout 的核心思维正是解决 iOS 布局之痛的关键,此时陆续有第三方开始尝试封装对 Autolayout 进行封装,简化其 API,提高易用性。 Masonry 在众多第三方布局 SDK 中脱颖而出,其简练的语法及函数式调用深得广大开发者的青睐。

古人云:凡是都有其两面性。autolayout 在 masonry 的光环加持下大行其道,成为 iOS 程序员对付 UI 布局问题的一道利剑,然而 autolayout 也有其先天弱势 —— 。

Autolayout 的性能问题:

Autolayout 会将约束条件转换成线性规划问题,在通过 Cassowary 算法求解线性规划问题得到 frame。对 autolayout 底层原理及 Cassowary 算法感兴趣的同学可以自行 google,在这里讲可能篇幅不够。可以简单的理解为 AutoLayout 在界面需要布局的时候会把我们设定好的约束条件转换成 X 个 N 元 N 次方程,然后扔给系统,让系统计算出最终视图上各个元素的 frame,如果你对 N 元 N 次方程的求解复杂度还没有个概念的话,可以尝试自己写一个程序来求解 N 元 N 次方程……

Autolayout Frame 性能分析

借用 Draveness 大佬的分析图,可以看到 Autolayout 的性能明显低于 Frame 布局,所谓出来混的总要还的,我们在代码上偷的懒,在性能上可一分都没少还(遮脸哭)。我们知道当渲染时间大于1/60秒(16.67毫秒)时,程序即会出现肉眼可察觉的卡顿。上图中,Frame 布局可以保持在500个 View 同时渲染时间低于16毫秒,而使用 autolayout 时,仅仅 100 个 view 的渲染时间就达到了 55.11 毫秒。

回归初心:

我做了7年 iOS 开发,我写了7年 Frame 布局。对我来说,Frame 布局有其独有的魅力与吸引力,我喜欢把视图中每个元素掌握在自己手中的感觉,喜欢在使用 Frame 布局时,每个元素随着代码在我脑海中逐渐拼接成整个视图的感觉。

也许你会认为这是我的偏激与顽固,在实际工作中,我也使用 xib, storyboard,使用 autolayout 和 masonry,学习并汲取其精华将其应用到 Frame 布局中。既然我们可以为 autolayout 封装 SDK 提高其 API 的易用性,那为什么不能封装最原始的 Frame 布局来提高其通用性呢?这样既可以优雅的使用 Frame 布局,又可以得到最佳的新能表现。

现在我使用一套自己不断改进后的 Frame 布局方式,在 API 简洁度、易用性、代码复杂度上我都认为比目前的第三方布局用起来更加得心应手。

让我们使用一个稍微复杂一点的界面看看我现在如何使用 Frame 布局,在屏幕控制器中央显示一个抢购信息,涉及到了多个子视图的布局:

布局示例-竖屏
布局示例-横屏
我的布局代码

界面一共13个元素,以上布局代码共14行,就目前来说比其他任何一种布局方式更加简短明了,目前这套布局方案在 Frame 的基础上,大量使用了 autolayout 中 ”参照“ 和 ”约束“ 等思维,将核心思路集中在视图与视图的空间关系上,并使用链式调用最大程度减少冗余代码并保持清晰的代码可读性。

由于布局中均使用相对关系,所以无论在任何尺寸手机上或者屏幕改变旋转方向,均可以正常布局。而在上述代码运行完毕之后,所有视图的 frame 信息均已计算完成,系统没有额外的计算负担。

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

推荐阅读更多精彩内容