【Swift】Split View Controllerの使い方。マスター部とディテール部に画面分割する。(Swift 2.1、XCode 7.2)

2020年6月16日

Split View Controllerとは

本記事ではSwiftで使える部品のSplit View Controller(以下、スプリットビューコントローラー)について説明する。

Split View Controller

 

スプリットビューコントロラーとは、画面を左(以下、マスター部)と右(以下、ディテール部)に分割し、マスター部の項目を選択するとディテール部に詳細が表示されるような仕組みを提供するコントローラーである。

iOS9の設定画面もスプリットビューが使われている。

 

スプリットビューコントローラーを使ってみる

では、スプリットビューコントローラーを使ってマスター部に画像ファイル名の一覧を表示し、ファイル名をタップするとディテール部に画像が表示されるものを実装してみよう。

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

事前準備ではプロジェクトに画像ファイル3つを追加したのと、マスター部のTable View Controllerに使うカスタムクラスのファイルを作成しておいた。

ストーリーボードにスプリットビューコントローラーを配置する(下図赤枠)。すると色々な部品がごそっと追加される。

最初からあったビューコントローラー(黄緑枠)を選択してDeleteキーで削除する。紫枠のスプリットビューコントローラーを選択、黄枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Is Initial View Controllerにチェックを入れる。これで、アプリを起動したときにスプリットビューコントローラーが起動されるようになった。

Split View Controllerをストーリーボードに配置する

 

ごそっと追加された部品は下図になる。

スプリットビューからマスター部とディテール部への接続線が引かれ、マスター部ではナビゲーションコントローラーを通してテーブルビューコントローラーが起動されるようになっている。

要するに、マスター部とディテールを別々で画面設計をするということだ。

Split View Controllerをストーリーボードに配置すると追加される部品

 

下図赤枠のセルを選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Identifierに「TestCell」を入力する。これはソースコードからセルにアクセスするための識別子である。

Ctrlキーを押しながらセルをビューコントローラーまで運んで吹き出しの設定画面を表示し、メニューから「Show Detail」を選択する(下図紫矢印)。これでセルをタップしたときにディテーブル部が画面遷移するようになった。

セルとView Controllerをセグエで接続する

 

下図赤枠のビューコントローラーを選択、黄緑枠のアイデンティティインスペクタボタンを押して設定画面を表示し、Classに「ViewController」を設定する。これでディテール部のビューコントローラーにカスタムクラスが使われるようになった。

View Controllerにカスタムクラスを設定する

 

ビューコントローラーにイメージビューを配置する(下図赤矢印)。黄緑枠のPinボタンを押して吹き出しの設定画面を表示し、Constrain to Marginsのチェックを外して、紫枠の上下左右の距離の制約にすべて「0」を入力する。これでイメージビューが画面いっぱいに表示されるようになった。

View ControllerにImage Viewを配置する

 

下図赤枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しならがイメージビューをドラック&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。

Connectionに「Outlet」、Nameに「testImageView」を入力し、Connectボタンを押す。これでソースコードからイメージビューを操作できるようになった。

Image Viewとソースコードのコネクションを確立する

 

下図赤枠のRoot View Controllerを選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Classに「TestTableViewController」を設定する。これでマスター部のテーブルビューコントローラーにカスタムクラスが使われるようになった。

Table View Controllerにカスタムクラスを設定する

ViewController.swifを以下のコードに変更する。

ディテール部が表示されるときに画像ファイル名が設定されていたらイメージビューにその画像を表示している。

 

TestTableViewController.swiftを以下のコードに変更する。

セルが選択されてセグエが実行される前に、遷移先ビューコントローラーのインスタンス変数(画像ファイル名)にセルのテキストを設定している。

 

以下が実際のプレイ動画。iPadの場合は画面幅の半分弱がマスター部になる。

 

iPhoneの場合はマスター部、ディテール部ともに画面全体に表示されるのでいつもの画面遷移とあまり変わらない。ただし2016年6月現在、iPhone6 PlusとiPhone6s Plusは横画面にしたときに画面幅の半分弱がマスター部になる。