1.1　ContainerViewについての確認

　ContainerViewは、その名の通り「ViewControllerを表示するための入れ物となるView」です。

　InterfaceBuilderからContainerと書いてあるView要素を引っ張って来たときに、UIViewControllerが「Embed Segue」でつながれたViewが表示されます。ここで大事のは、Embed Segueで繋がっているViewControllerと、ContainerViewを配置したViewControllerは親子関係を持つことです。

　この親子関係をうまく活用することで、任意のViewController内で親子関係を持つ別のViewControllerを表示したり、親子関係を利用した処理を組み立てることができます（※Notificationを活用するという方針も考えられますが、画面遷移やアプリの動き方が複雑な場合、実装時の考慮漏れが起きやすくなります）。

　もちろん、ContainerViewだけをあらかじめ配置し、その中に表示したいViewControllerをコードやInterfaceBuilderから接続したり、Segueの名前からContainerViewに繋がるViewControllerのインスタンスを取得することもできます。そのためStoryboardと相性がよく、画面遷移を直感的に作成できたり、それぞれの画面ごとにViewControllerを分割・整理できる点は大きなメリットです。

　ContainerViewの特性を活用したUIを考えていく上のポイントは次の３点です。

　１．全体的な画面遷移やContaierViewで、Embed Segueで紐付けされているViewControllerの関係

　２．異なるController間でプロトコルを用いて処理や値を橋渡しをする部分

　３．親ないしは子のViewControllerのインスタンスを活用する部分

　これらに留意した上で実装を行えば、良い実装になるでしょう。

1.2　ContainerViewの活用ポイント

　前述したとおり、ContainerViewをInterfaceBuilderで表示した際には、すでにViewControllerがつながった状態で表示されます。ここからは、ContainerViewの性質に関するポイントをいくつか紹介します。

　図1.1は、InterfaceBuilderでの見え方です。今回紹介するサンプルでは、LayoutをStoryboardないしはXibを活用しているためにGUIとの連携している部分が多くなっています。サンプルを見て、設定している場所を確認しながら進めばより理解が深まるでしょう。

　またEmbed Segueについては普通のViewControllerだけでなく、NavigationControllerやStoryboard Referenceとつなぐことも可能です。作成したいiOSアプリの構造やUIに合わせて活用してみてください。

　次にContainerViewを取り扱う上でポイントとなる、配置されているViewControllerとの親子関係について解説します。親子間での処理の受け渡しについては、次のふたつの方針が考えられます。

　１．親ないしは子のViewControllerのインスタンスを作成して、任意の処理を実行する

　２．親ないしは子のViewControllerにプロトコルを定義して、任意の処理を実行する

　これらを実行したい処理に応じて使い分けますが、ここでは1.の手法を紹介します。

　リスト1.1は、ContainerViewを配置したViewControllerで、親子関係を利用して子のViewControllerで親のクラスのインスタンスを取得するコードの例です。

リスト1.1: 子のViewControllerから親側の処理を実行する

 1: // ※ 任意の親のさらに親をたどる場合は self.parent?.parent ... となる
 2: if let vc = self.parent {
 3:     let parentViewController = vc as! ParentViewController
 4:     parentViewController.doSomething()
 5: }

　逆にリスト1.2は、親のViewControllerから子のViewControllerで親のクラスのインスタンスを取得するコードの例です。

リスト1.2: 親のViewControllerから子側の処理を実行する

 1: // ※ 子のViewController達は[ViewController]型で格納されているので、indexはその順番の値
 2: let childViewController = self.childViewControllers[index] as! ChildViewController
 3: childViewController.doSomething()
 4:
 5: // ※ 次のようなログを出力して該当のインデックス値を調べるのも方法の一つ
 6: self.childViewControllers.forEach { vc in
 7:     print(vc)
 8: }

リスト1.3: デバッグコンソール出力結果

 1: <プロジェクト名.indexが0のコントローラー名: xxxx…>
 2: <プロジェクト名.indexが1のコントローラー名: xxxx…>
 3: <プロジェクト名.indexが2のコントローラー名: xxxx…>
 4: ...

　配置した任意のContainerViewに、Enbed Segueで接続されているViewControllerのインスタンスをSegue Identifierから取得する方法も紹介します。ここでは、従来のSegueでの画面遷移に置いて遷移先に何かしら値を引き渡す際と同様に、リスト1.4」の様にprepareメソッドを利用します。

リスト1.4: Embed Segue名からつないでいるViewControllerを取得

 1: // 接続されている「Segue Identifier」から該当のViewControllerを取得します
 2: // MEMO: SideNavigationViewControllerの名前をこのようにする
 3: // →「Embed Segue: connectSideNavigationContainer」
 4: override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
 5:     if segue.identifier == "connectSideNavigationContainer" {
 6:         let sideNavigationViewController
 7:             = segue.destination as! SideNavigationViewController
 8:         sideNavigationViewController.delegate = self
 9:     }
10: }

　InterfaceBuilderとコードの合わせ技でのContainerViewを活用したUI実装は、アプリレイアウトの基盤部分に関わるものになる事もあります。実装をマスターしておくと助かる事が多いのではないでしょうか。

1.3　スライドするメニュー表示の概要と実装

　今回のサンプルでは、まずナビゲーションバーの左上部にあるボタンをタップする、ないしは画面の左端からドラッグした際に、コンテンツの下部に隠れているサイドナビゲーションを表示します。同時に、メインのコンテンツ表示部分をタップできなくして、逆向きにドラッグするか移動したコンテンツ表示部分に触れるとサイドナビゲーションを隠します。この一連の動きをContainerViewを用いて実装しました。

　様々なアプリでよく見かける、今や定番となっている動きですが、今回はこの動きをライブラリーに任せてしまうのではなく、GestureRecognizerやTouchEventを用いて実現する事例を解説します。

　今回の実装にあたって、ContainerViewの特性やプロトコルを活用することで、単純に適切なタイミングでのコンテンツ切り替えを動作させるだけでなく、より一層動きに彩りを添えるためにアニメーションも加えました。

　この手のGestureRecognizerやTouchEventを伴い、画面の状態が意図通りのタイミングで処理がなされているかを検証する際は、正常な動作だけではなく、次のような意図しない動作や行動に関する検証も忘れないようにしてください。

　・例1. 1本指でドラッグするのが期待される動作だが、2本指での操作でも不具合がないか

　・例2. 開く途中の状態で、さらにもう一方の手でドラッグをした際に不具合がないか

　実際に触ってのUI検証はなかなか面倒ですが、これを怠ることで意図しない動作をした際にフリーズしたり、最悪の場合クラッシュを引き起こしやすいので注意しましょう。