CrossBridge Lab

技術ネタ、デバイスネタを...

ContainerView を使ってみる - Swift

はじめに

 本記事では ContainerView の簡単な使い方を解説します。

f:id:crossbridge-lab:20151210124408p:plain

ContainerView とは

 ContainerView とは一言で言うと「ViewController の中に ViewController を配置する」ことができるものです。ContainerView 登場以前は、1画面に付き1つの ViewController というルールでしたが、ContainerView を使うことで複数の ViewController を1つの画面内に存在させることが可能になります。

ContainerView を使うことで何が嬉しいか?

 ContainerView を使うことで何が嬉しいかですが、以下の様なメリットがあると考えます。特に画面が広い iPad で恩恵を受けやすいと思います。

  • 複数の画面で View (とロジック) の再利用がしやすくなる
  • 分散させることで1つの ViewController 内に大量のロジックが書かれるという事態を防ぐ
  • NavigationController を画面の一部に組み込むことができる

ContainerView を使ってみる

 Storyboard 上でデフォルトの ViewController に ContainerView を追加します。

f:id:crossbridge-lab:20151210124414p:plain

 ContainerView を追加すると自動で新たな ViewController が追加されて元の ViewController から Segue で接続されます。

f:id:crossbridge-lab:20151210124420p:plain

 ContainerView に constraints を設定します。Segue で接続された ViewController の View は ContainerView のサイズになります。

f:id:crossbridge-lab:20151210124428p:plain

 自動で追加された ViewController も表示されている領域が分かるように背景色を付けておきます。

f:id:crossbridge-lab:20151210124434p:plain

 実行してみます。ContainerView の領域に追加された ViewController の View が表示されていることを確認します。

f:id:crossbridge-lab:20151210124902p:plain

ContainerView を複数配置する

 次は ContainerView を2つ配置してみます。

f:id:crossbridge-lab:20151210125201p:plain

 実行すると2つの ViewController の View が1つの画面に表示されていることが分かります。

f:id:crossbridge-lab:20151210125242p:plain

まとめ

 ContainerView を使うことで1つの画面に複数の ViewController を配置することができるようになります。今回は単に表示をするだけなのでメリットが見えてこないですが、実際のアプリ開発になるとロジックをそれぞれの ViewController に分けるなどメリットを享受できるかと思います。