关于UI构建的思考:Storyboards、XIBs与纯代码

相信大部分iOS开发者都提过这样一个问题:应当如何构建应用界面?
对于这个问题衍生出两大阵营:一方热衷于使用Interface Builder构建界面;另一方选择使用纯代码(custom code)来实现界面布局。
本文的目的就是总结各种方法的优劣,帮助开发者做出更好地选择。

在iOS中创建用户界面通常有三种方法:

  1. Storyboards——可视化工具,用于布局多个应用程序视图和它们之间的转换关系(segue)。
  2. XIB(或NIBs)——每个XIB文件对应一个单独的视图,可以在Interface Builder中进行布局,使其可以直观展示。(以前是.nib,现在是. XIB)。
  3. 自定义代码(custom code)——不使用可视化工具,通过编程方式处理所有的位置、动画、页面创建等。

Storyboards

Storyboards在最初添加到iOS UI开发工具包的时候被认为是未来的趋势,将会取代XIB与纯代码,Storyboards确实作用巨大,但它并无法适应所有的UI开发情况,XIB与纯代码依然有其优势所在。

Storyboards非常适合初学者上手使用,可以方便的看到整个设计,容易修改。但伴随着应用程序的增长,Storyboards难免出现庞大,加载缓慢,修改也十分麻烦的问题。Storyboards最后很可能变成下面这样:

令人抓狂的Storyboards

应用程序应该根据逻辑单元(stories)进行划分,不应当把所有不相关的逻辑单元混合到一起。例如,用户列表及其相关功能(添加、点评等)可以组成一个逻辑单元。这样就可以得到一个条理清晰的Storyboards:

逻辑清楚的Storyboards

何时使用Storyboards

  • 当我们想在不构建应用就看到流程时,Storyboards是很好的选择。
  • 当我们使用静态表视图(static table views)或多个单元格模板,也可以选择Storyboards。
  • 如果我们希望减少代码量,可以选择Storyboards,这可以节省大量页面分配、初始化代码。(Storyboards中这些可以自动完成)

Storyboards的优点

Storyboards的最大优势是可视化,一眼就能看出页面关系、操作流程。另外一个优点是快速原型化,可以快速模拟应用程序的设计、导航(navigation)、转换(transitions)。
另外使用Storyboards或XIB创建UI可以方便的使用自动布局。

Storyboards的缺点

第一个缺点是可重用性。Storyboards难以完成复制或移动图形元素,此时往往需要移动所有的依赖项(dependencies)。如果多位开发者共同在同一项目下工作,Storyboards经常会出现合并冲突,而Storyboards生成的是一个难以阅读的巨大的XML文件,会使冲突变得难以解决。
Storyboards中的视图控制器需要使用segues进行数据传递,所以容易导致带有许多if/else语句的大型prepareForSegue()方法

有些人在使用Storyboards时也会遇到Xcode的bug。比如,出现不一致错误,必须频繁刷新DerivedData

XIBs

一种古老的UI开发方式,但不代表它是过时且不好用的。只包含一个特定视图元素(view,table cell等),每个视图都有自己的.xib文件。 XIB的有点:组件独立,更容易开发、测试和调试。

何时使用XIBs?

可以用于模态视图(modal views)、登录/注册、可重用视图(如模板、表格单元格等)。对于具有动态内容的复杂视图,应当避免使用XIBs。

XIB的优点

主要优势之一是可重用性。换句话说,“一次实现,随处可用”。可以在多个类中使用相同的布局以节省开发时间。

另一个优点是像Storyboards一样,Interface Builder可以让你看到你在做什么、方便的使用自动布局。

XIB的缺点

像Storyboards,与同一XIB上的其他同事一起编辑可能会产生很多冲突;此外,高度动态的视图很难使用XIB实现;另一个缺点是调试比较麻烦,例如,如果忘记在Interface Builder中建立连接、删除了内容、添加了错误的内容,等等,在XIB中不容易方便的调试。

在使用XIBs时需要注意的一件事是:它们是惰性加载的(lazily loaded)。因此直真正使用到它们时才会加载使用内存。延迟加载过程会带来延迟,可能导致负面影响。

纯代码(Custom code)

有时故事板/ xib和接口生成器是不够的。当我们使用代码来创建一个UI时,我们可以理解它背后的含义。在开始阶段,我们需要知道任何可以用故事板和xib实现的UI也可以用原始代码实现。这是最后的选择和救援。它有很多优点,但也有一些不可忽视的缺点。
某些时候Storyboards/XIBs这些Interface Builder的方式并不能满足我们的需求。使用代码创建UI可以更好地理解编码细节。任何使用Storyboards/XIBs实现的UI都可以使用纯代码实现,是我们编写UI的终极方式。同时它也具有各种各样的优点缺点。

何时使用纯代码?

创建动态布局时,或布局必须可定制还包含一些特殊效果(阴影、边框、圆角等)时,我们需要使用这种方法。纯代码可能会是唯一的解决办法。

纯代码的优点

第一个优点是性能,Storyboards/XIBs需要转换成代码。纯代码会跳过这一步,构建时间更短。可以对布局有更多的控制,自定义元素。例如,如果想在应用当中更改颜色、字体大小/样式,纯代码可以方便的随时随地改动,错误发生时,调试也更容易。另一个优点是可重用性——如果一个应用使用一组在整个应用中样式相同的元素,可以在一个地方创建它们,然后在整个应用中进行使用。例如,文本字段、按钮、标签等。同时,如果使用纯代码,解决合并冲突也会容易得多,在一个大项目的工作团队中工作时,这是一个很大的优势。
纯代码几乎可以称之为创建UI的完美解决方案,但它也有些不容忽视的弊端。

纯代码的缺点

  1. 查看原型变得困难,不如Interface Builder来的方便,每次查看都需要经过编译/运行这样一个周期,调试会有一些不方便。
  2. 布局添加不直观且复杂。如下添加一个约束:
[NSLayoutConstraint constraintWithItem:self.button1 attribute: NSLayoutAttributeRight relatedBy: NSLayoutRelationEqual toItem: self.button2 attribute: NSLayoutAttributedLeft multiplier:1.0 constant: -12.0];
  1. 代码理解更加耗时,如果接收到的是一个新项目,需要花费更多的时间来理解其中的逻辑才能对其加以修改。

总结

每种方法都有其优缺点,熟悉它们并在项目中一起使用它们,可以帮助我们节省时间,构建更加优秀的应用程序,Storyboards/XIBs提供了直观的UI构建体验,纯代码则让我们操控UI的可能性更多。根据需求,选择合适的方法,让你的代码编写更加畅快,应用程序更加令人心动!
有什么问题大家可以在评论区留言,相互探讨解决问题!

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

推荐阅读更多精彩内容

  • Last memo:(068/100-5.28) : 1、forcast of May and Q3 of 201...
    Just_MM阅读 248评论 0 1
  • 今天老大刚放假,儿子跟爸爸去接的, 儿子说大姐来了就吃火锅。回来的路上买了火锅,到了晚上我们一起吃了一顿团圆饭。
    泰康_b56f阅读 278评论 0 0
  • 第149天差一点分手。 第150天见我父母。 商丘南站记错时间吃烩面疯狂赶车,我在外面等他取票。 他换铺陪我
    可爱的姑娘丫阅读 59评论 0 0
  • 《散落的钞票》主要写了国庆期间在一个地铁站,众人捡拾散落的钞票并物归原主的故事。赞美了人们拾金不昧的品质,歌...
    小霸王朱老师阅读 2,198评论 0 1
  • 今天凌晨,无意中读到了一篇去年的文章,关于咪蒙离婚的始末,顿时心生无力感。 同行不同步,曾经的默契出现了裂缝甚至断...
    于冰凌plus阅读 155评论 0 1