iOS9 Day-by-Day :: Day 3 :: Storyboard References

原文地址

这是一个系列文章,查看更多请移步目录页

如果你曾经使用 interface builder 创建过一个复杂、界面非常多的应用,你就会明白最后那些Storyboards 文件变的有多大。他会迅速变的无法管理,阻碍你的进度。自从引入 Storyboard 以来,其实是可以把你的应用的不同模块切开到不同的 Storyboard 中的。在过去,这要手动创建多个 Storyboard 文件,并且要写大量的代码。

为了解决这个问题,在 iOS 9 中苹果介绍了 Storyboard References 这个概念。Storyboard References 允许你从 segue 中引用其他 storyboard 中的 viewController。这意味中你可以保持不同功能模块化,同时 Storyboard 的体积变小并易与管理。不仅容易理解了,和团队一起工作时,合并(工作成果)也变的简单了。

简化 Storyboard

为了演示Storyboard References是如何工作的,让我们拿一个创建好的应用,并试着简化一下他的结构。这个有问题的应用已经上传到了 Github 上,如果你希望跟着做,并且看到最后的结果。以 OldMain.Storyboard 命名的文件是我们的最初文件。在这个项目中仅仅是被引用进来,我们并没有用它。如果你想从头开始跟着做,删除所有其他的 storyboard,然后把 OldMain.Storyboard 文件改为 Main.Storyboard.

下面的截图,是原来的 Storyboard 的样子。


OldStoryboard

正如你们看到的,我们使用了 TabBarController 作为初始的 viewController.这个 TabBarController 拥有三个 navigationController,每个对应一个不同的根 viewController。第一个是个 tableViewController,有一个联系人列表,第二个也是一个 tableViewController,是收藏的联系人列表。这两个都链接到一个详细页的 viewController 上。第三个 navigationController,包括了更多的信息,一个账户详细页,一个反馈页和一个关于页。

尽管应用还远称不上复杂,但是这个 Storyboard 已经非常大了。我们至少看到10个以上的 viewController,我们明白,很快就会变的难以管理。现在我们可以拆开他们了,那么从哪里开始呢?这个例子中,我们有三个不同的模块。我们可以清楚地在 tabBarController 上辨别出他们来。

我们从最简单的开始,在 Main.storyboard 的右手边,你可以看到这个给应用提供更多信息的 viewController,他是单独的,不和其他的 viewController 有链接。

我们要做的是,通过拖动选中他们(高亮显示),然后点击 Xcode 的菜单栏,选择"Editor->Refactor to Storyboard"。


Refactor Menu

给这个 storyboard  起个名字叫 More.storyboard 然后点击保存。More.storyboard 就会自动添加到应用中,并且处于打开状态。


More Storyboard

你可以看到 storyboard 已经创建成功了。这个时候,如果你返回到 Main.storyboard 你可以看到tabBarController 其中的一个 viewController 已经变了,变成了一个指向 storyboard 的引用。


Main Reference

太棒了。我们把整个一部分的 UI 划分到了另外一个 storyboard 中。不仅分割开了模块,并且能够在其他地方复用。虽然在我们这个例子中用不着,但他是非常有用,有价值的新特性。

现在我们要把其他的模块也分拆开,这要比前面一步复杂一点儿,因为事实上这两部分链接了同一个viewController。两个 TableView 都通过一个 segue 展示联系人详细信息页。你可以选择怎么做?

保持 viewController 在 Main.storyboard

重构 viewController到自己的 storyboard

两种选择都可以,我个人倾向于把他们分开。所以选中详细页 viewController 然后点击 Xcode 的菜单“Editor->Refactor to Storyboard”. 给新的 storyboard 取个名字,并保存。这会创建并打开一个新的 storyboard。他会链接到联系人页和收藏的联系人页的 tableViewController 中。

现在回到 Main.storyboard 去,选中 navigation 和联系人的 tableViewController,把他们创建为新的 storyboard 引用。同样的方法把收藏的 viewController 也操作一遍。下面是操作后的结果。


result

我们在项目中把 Main.storyboard 拆分为了5个 storyboard。

Main.storyboard 包含一个 tabBarController 和三个链接到其他 storyboard 的 controller

Contacts.storyboard 一个导航栏和一个tableViewController,当点击一行时,链接到ContactDetails.storyboard

Favorites.storyboard 一个导航栏和一个tableViewController,当点击一行时,链接到ContactDetails.storyboard

ContactDetail.storyboard  单独的viewController展示联系人的详细信息,并且可以链接到 Contact 和 favorite 的 storyboard 中

More.storyboard 包括一个viewController,展示关于 app 的更多信息。

这个重构让我们的 storyboard 变的更加的模块化、组件化。可以帮助我们后面更好的开发这个应用。

从 Storyboard Reference 中打开一个特定的 viewController

到现在为止,我们只是分享了怎么从 storyboard 的 segue 中创建和展示 storyboard reference,还没有展示不用重构工具的情况下,如何手动添加 storyboard。

假设,我们要在联系人页的右上角添加一个“account”按钮,点击这个按钮可以快速的到达账户页查看更多信息,而无需去到设置页面里点击。

打开 Contacts.Storyboard, 拖拽一个 UIBarButtonItem 到 tableViewController 的导航栏上,把 title 设置为 “Account”。然后,找到“Storyboard Reference”控件,拖拽一个到 Contacts Storyboard上来。并且打开 attributes inspector 面板。

把 Storyboard 属性选为“more”,把 Referenced ID 属性设置为“accountViewController”。这允许我们引用账号信息页的 viewController,而不是链接到 more storyboard 的初始 view controller上。


accountViewController

选中“account”的按钮,按住 Control 健和鼠标左键,拖拽到 storyboard reference上,这样就创建了一个 segue。


accountSegue

最后一步是,设置 accountViewController 的 identifier。打开 More.storyboard 选中 accountViewController,打开 identity inspector 设置 Storyboard ID 为 “accountViewController”。这样,当你点击 account 按钮时,就会转到账号的详细页面去。

如果所见,添加 Storyboard Reference,无论是通过重构工具还是手动添加都非常简单、直接、有效。他允许你创建更加组件化、可复用化、模块化的应用。最后,这个指南的最终结果可以在Github 上查看。

延伸阅读

查看更多关于 Xcode 7 的 Storyboard References 的内容,可以观看 WWDC 2015 的 session 215. What's New in Storyboards。前20分钟讲的正是 Storyboard References 的内容。

这是一个系列文章,查看更多请移步目录页

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

推荐阅读更多精彩内容