实现容器类ViewController

前言

为什么翻译这系列文章

概述

容器类ViewController可以将多个ViewController的内容结合在一起展示在一个用户界面上。容器类ViewController经常被用来促进导航和根据现有内容创建新的用户交互界面类型。UIKIt框架里包含的容器类ViewController有:UINavigationController, UITabBarController, 和 UISplitViewController,他们负责着你的用户界面中不同的部分间的导航。

设计一个自定义的容器类ViewController

在大多数情况下,容器类ViewController和其他内容型ViewController一样,它管理着一个根视图和其他内容。不同的是,容器类ViewController从其他ViewController中获取内容。它所获取的内容依赖于其他ViewController的视图,它嵌入在自己的视图层级结构中。容器类型ViewController设置被嵌入视图的尺寸和位置,但是原先的ViewController仍然管理着这些视图的内容。

当设计自己的容器类ViewController的时候,一定要理解容器ViewController和被容器包含的ViewController之间的关系。这个关系可以帮你确定他们的内容是应当在屏幕上展示成什么样和你怎样在容器内部管理他们。在设计的过程中,带着如下几个疑问:

  • 容器的角色是什么?它的子ViewController扮演者什么样的角色。
  • 多少个子ViewController同时展示。
  • 兄弟ViewController之间的关系。
  • 如何在容器中添加和移除子ViewController。
  • 子ViewController的尺寸和位置是否可以改变?在什么样的条件下这些改变会发生。
  • 容器是否提供任何装饰或者导航相关的视图。
  • 容器和它的子ViewController应该以何种方式沟通,除了UIViewController中定义的表中事件外,容器是否需要向它的子ViewController报告事件。
  • 容器类型的外观能否被定义成不同的方式,如果可以,该怎么做。

在你定义了各个对象的角色之后,容器类ViewController的实现非常简单。UIKit唯一要求你做的就是在容器ViewController和子ViewController之间建立父子关系。这个父子关系确保子ViewController接收相关的系统信息。除此之外,大多数工作花费在在布局和管理被包含的视图,这依据不同的容器而定。你可以将视图放置在容器中的任何位置,定义你想要的任何尺寸。你也可以添加一个自定义的视图到视图的层级结构上来提供装饰或者导航的作用。

举例:Navigation Controller

UINavgationController对象支持通过分层数据集方式进行导航。导航界面一次显示一个子视图控制器界面。界面顶部的导航栏显示数据层次结构中的当前位置,并显示返回按钮以返回上一个层级。如果想要到下一层下一个数据层级可能需要涉及到使用tableview或者button。

视图控制器之间的导航是由导航控制器及其子女共同管理的。当用户与子视图控制器的按钮或者表格进行交互时,子视图会要求导航控制器将新的视图控制器推入界面。当前子视图处理新视图控制器内容配置,但导航控制器管理过渡动画。导航控制器还管理导航栏,该导航栏显示用于解除最顶层视图控制器的后退按钮。

下图显示了导航控制器及其视图结构。大多数内容区域由最顶层的子视图控制器填充,导航栏只占用了一小部分。

导航控制器

无论在compact还是regular环境下,导航控制器一次都只显示一个子视图。导航控制器调整子视图以适应可用的空间。

举例:Split View Controller

UISplitViewController对象以主要-细节布置两个视图控制器的内容。在这种安排下,一个视图控制器(主视图控制器)的内容决定了其他视图控制器显示的细节。两个视图控制器的可见性是可以配置的,但也受到当前环境的支配。在规则的水平环境下,UISplitViewController可以同时显示两个子视图控制器,也可以根据需要隐藏主视图。在compact环境下,UISplitViewController一次只能显示一个视图控制器。

下图展示了Split View在水平环境下的视图结构。UISplitViewController默认只包含它所容纳的视图。在这个例子中,两个子视图并排显示。子视图的显示区域是可配置的,主视图的可见性也是可配置的。

UISplitViewController

在Interface Builder中构建容器视图控制器

要在设计时创建父子容器关系,请将容器视图对象添加到storyboard中,如下图所示。容器视图对象是一个代表子视图控制器内容的占位符对象。使用该视图根据容器中的其他视图定位其在子根视图中的位置。

Adding a container view in Interface Builder

当你使用容器视图加载一个或者多个视图控制器时,Interface Builder同时加载与这些视图相关的试图控制器。子视图控制器必须与父视图控制器同时初始化以便于创建合适的父子关系。

如果你不使用Interface Builder构建父子容器关系,你需要通过编写代码添加每个子视图控制器到容器试图控制中,如Adding a Child View Controller to Your Content文档中所表述的一样。

实现一个自定义的容器视图控制器

为了实现容器类视图控制器,你需要建议你的容器视图控制器与其子视图控制器之间的父子关系。在你管理子视图控制器的视图之前,建立这种父子关系是必要的。这些操作让UIKit知道你的视图控制器管理着子视图控制器的位置和大小。你可以通过xib或者手写代码方法建立这种父子关系。当你使用编码的方式建立这种关系时,你明确的将添加和移除子视图控制器作为你的视图控制器的一部分设置。

向你的容器中添加一个子视图控制器

要通过编码的方式将子视图控制器添加你的内容中,可以通过以下几个步骤来完成:

  1. 通过你的容器视图控制器调用addChildViewController:方法

    该方法告知UIKit你的容器视图控制器管理子视图控制器的视图。

  2. 将子视图控制器的根视图添加到视图层级。

    同时需要设定子视图控制器的根视图在容器中位置和大小。

  3. 添加一些约束来管理子试图控制器根视图的大小和位置。

  4. 调用子视图控制的didMoveToParentViewController方法。

下面的代码展示了如何将子视图控制器嵌入到容器中。在建立父子关系之后,容器试图控制器设置子视图控制器的frame,并将子视图控制的根视图添加到自己的层级结构中。设置子视图的frame非常重要,并确保视图在容器中正确显示。在添加视图之后,容器调用子视图控制器的didMoveToParentViewController:方法,以使得子视图控制器有机会响应视图所有权的更改。

- (void)displayContentController:(UIViewController *)content {
    [self addChildViewController:content];
    content.view.frame = [self frameForContentController];
    [self.view addSubView:self.currentClientView];
    [content didMoveToParentViewController:self];
}

在前面的例子中,请注意你只调用了子视图控制器的didMoveToParentViewController方法。这是因为addChildViewController: 方法会调用子视图控制的willMoveToParentViewController:方法。需要你主动调用didMoveToParentViewController:的原因是:该方法只能在你将子视图嵌入到容器的层级结构之后才能调用。

当你使用自动布局的时候,在你将子视图添加到容器的层级结构之后设置容器与子视图的约束。该约束只能影响子视图控制器的根视图的大小和位置。不要更改子视图层次结构中根视图或者契合其他视图的内容。

移除子视图控制器

要从内容中删除子视图控制器,请通过执行以下操作来删除视图控制器之间的父子关系:

  1. 调用子视图控制的willMoveToParentViewController: 方法,参数为nil。
  2. 删除子视图控制器的根视图的所有约束。
  3. 将子视图控制器的根视图从容器的层级结构中移除。
  4. 调用子视图控制器的removeFromParentViewController方法来结束父子关系。

删除子视图控制器将永久切断父子关系。仅当您不再需要引用子视图控制器时,才可以删除它。例如,当新导航控制器被推入导航堆栈时,导航控制器不会移除其当前的子视图控制器。只有当它们从堆栈中弹出时才会删除它们。

下面代码展示了如何从容器中移除子视图控制器。调用willMoveToParentViewController方法并传入参数nil使得子视图控制器有机会准备改变。removeFromParentViewController方法会调用子视图控制器的didMoveToParentViewController:方法,并传递nil参数。设置父视图控制器为nil最终将子视图控制器从容器中移除。

- (void)hideContentController: (UIViewController *)content {
    [content willMoveToParentViewController:nil];
    [content.view removeFromSuperView];
    [content removeFromParentViewController];
}

子视图之间的转场

当你想使用一个动画来替换子视图被另一个子视图替换的操作时,将子视图控制器的添加和移除操作合并在一个动画过程中。在动画执行之前,确保所有的子视图控制器是你的内容的一部分,并且让当前子视图知道它将如何离场。在动画执行期间,将新视图移动到指定的位置并将旧视图移除,在动画执行完成之后,完全删除子视图控制器。

下面代码展示了如何使用动画将子视图控制器切换到另一个子视图控制器。在这个例子中,新的视图控制器移动到当前视图控制器显示的矩形区域中,旧的视图控制器移动到屏幕外。在动画执行结束之后,完成的Block中将子视图控制器从容器中完全移除。在这个例子中,transitionFromViewController:toViewController:duration:options:animations:completion:方法自动更新容器的视图层级结构,所以你不需要自己添加和移除视图。

- (void)cycleFromViewController:(UIViewController *) oldVc
    toViewController:(UIViewController *)newVc {
        [oldVc willMoveToParentViewController:nil];
        [self addChildViewController:newVc];
        
        newVc.view.frame = [self newViewStartFrame];
        CGRect endFrame = [self oldViewEndFrame];
        
        [self transitionFromViewController:oldVc toViewController: newVc duration: 0.25 
         options:0 animations:^{
             newVc.view.frame = oldVc.view.frame;
             oldVc.view.frame = endFrame;
         } completion:^(BOOL finished){
             [oldVc removeFromeParentViewController];
             [newVc didMoveToParentViewController];
         }];
    }

管理子视图的显示更新

在容器添加了子视图控制器之后,容器自动将显示相关的消息转发给子视图控制器。这正是你所想要的,因为它确保了所有的事件正确的响应。然而,有时默认行为可能会对您的容器无意义的顺序发送这些事件。例如:如果多个子视图控制器同时修了他们的状态,你可能需要合并这些更改,以便外观回调都以更合理的顺序同时发送。

为了接管外观回调的责任,在容器视图控制器中重写shouldAutomaticallyForwardAppearanceMethods方法并返回NO,如下面代码所示。返回NO使得UIKIt知道你的容器视图控制器通知它的子视图控制关于外观的改变。

-(BOOL)shouldAutomaticallyForwardAppearanceMethods {
    return NO;
}

当一个外观的约束发送,在适当的时候调用子视图控制器的beginAppearanceTransition(_:animated:)endAppearanceTransition()方法。举例:如果你的容器只有一个子视图控制器,并被child所引用,你的容器需要转发这些消息给子视图控制器,如下所示:

- (void)viewWillAppear:(BOOL)animated {
    [self.child beginAppearanceTransition: YES animated: animated];
}

- (void)viewDidAppear:(BOOL)animated {
    self.child endAppearanceTransition();
}

- (void)viewWillDisappear:(BOOL)animated {
    [self.child beginAppearanceTransition: NO animated: animated];
}

- (void)viewDidDisappear:(BOOL)animated {
    [self.child endAppearanceTransition];
}

构建容器类型的ViewController的一些建议

设计、开发、测试一个新的容器类ViewController是需要花费一些时间的,虽然单个的功能实现起来非常简单,但Controller作为一个整体就十分复杂了,当你实现自己的容器类的时候,考虑下面几点提示:

  • 仅访问子ViewController的根视图。容器应该只访问每个子ViewController的根视图,也就是子ViewController的view属性。容器不应该访问子ViewController的其他视图。
  • 子ViewController应该知道容器类的最少信息。子ViewController应该关注自己的内容。如果容器允许它自己的行为响应子ViewController,应该使用代理模式来管理这些交互。
  • 首先使用常规的视图设计你的容器。使用常规的视图(而不是子ViewController里的View)让你在一个简单的环境中测试约束布局和动画转化。当常规视图符合期望的时候,再将它切换到子ViewController中。

将控制委派给子ViewController

容器类ViewController可以将一些影响它自身显示效果的操作代理给一个或者多个子ViewController。可以使用下面方式下发控制权:

  • 让子ViewController决定status bar 的类型。将status bar的显示委派给子ViewController,可以在子ViewController覆写一个或者所有childViewControllerForStatusBarStyle 和 childViewControllerForStatusBarHidden 方法。
  • 让子ViewController指定它自己的适合的尺寸。容器可以使用子perferredContentSize属性帮助您决定子ViewController的尺寸。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容