【Swift】Container Viewの使い方。画面を複数に分割する。(Swift 2.1、XCode 7.2)

2020年6月16日

Container Viewとは

本記事では、Swiftで使える部品のContainer View(以下、コンテナビュー)について説明する。

Container View

 

コンテナビューとは、自分専用のView Controller(以下、ビューコントローラー)を持っているビューである。ゆえに、複数のコンテナビューを画面に配置すれば、1つの画面を分割できる。

 

コンテナビューを試す

画面に2つのコンテナビューを配置し、それぞれのコンテナビューが独立して画面遷移を行うものを実装してみよう。

以降の手順を開始する前のXcodeプロジェクトをGitHubに置いたので、実装を試してみる人はご利用されたし。
⇒「テスト用プロジェクト

事前準備では、画面に1つのコンテナビューを配置し、コンテナビューの中のボタンを押すと画面遷移するところまでを実装した。この画面にもう1つのコンテナビューを配置する。

 

デバイス画面にコンテナビューを配置する(下図赤矢印)。黄緑枠のPinボタンを押して吹き出しの設定画面を表示する。Constrain to marginsのチェックを外し、上下左右の距離の制約に「0」を入力する(水色枠)。入力が終わったら「Add 4 Constraints」ボタンを押す。

デバイス画面にContainer Viewを配置する

 

Cmdキーを押しながら2つのコンテナビューを順番に選択したあと、下図紫枠のPinボタンを押して吹き出しの設定画面を表示させる。Equal Widthsにチェックを入れ、「Add 1 Constraint」ボタンを押す。これで2つのコンテナビューが画面左右に2等分されるようになった。

2つのContainer Viewの幅を揃える

 

コンテナビューをデバイス画面に配置したときに一緒に追加されたビューコントローラーにImage Viewを配置する(下図赤矢印)。

黄緑枠のPinボタンを押して吹き出しの設定画面を表示する。Constrain to Marginsのチェックを外し、上下左右の距離の制約に「0」を入力する(黄枠)。入力が終わったら「Add 4 Constraints」ボタンを押す。これで画像が画面いっぱいに表示されるようになった。

Container ViewのView ControllerにImage Viewを配置する

 

上記と同じビューコントローラーにボタンを配置する(下図赤矢印)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Titleに「前の画面に戻る」、Backgroundに白を設定する。

Container ViewのView Controllerにボタンを配置する

 

下図赤枠のビューコントローラーを選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Defines Contextにチェックを入れる。チェックを入れる理由は次の記事を参照。⇒「記事

defines contextにチェックを入れる

 

Ctrlキーを押しながらドラッグ&ドロップでボタンを夜画面まで運んで吹き出しのメニューを表示させ、「Present Modally」を選択する。これでボタンを押したときに夜画面に遷移するようになった。

遷移先画面とセグエで接続する

 

下図赤枠のセグエを選択、黄緑枠のアトリビュート画面を押して設定画面を表示し、Presentationに「Current Context」、Transitionに「Cross Dissolve」を設定する。

Segueのアトリビュートインスペクタを変更

 

以下は実際のプレイ動画。1つの画面が2つのコンテナビューによって二分され、別々に画面遷移できるようになった。