iOS 8アプリ開発のこれまで＆Swift 1.2への対応、プロパティオブザーバーとwillSetの基本的な使い方、セグエを使った画面遷移：iPhone 6／6 Plusアプリ開発入門（終）（3/6 ページ）

[平屋真吾，クラスメソッド株式会社]

サンプルアプリの詳細画面の構成を確認

　UITableViewControllerのサブクラスとして「AssetViewController」を追加して、詳細画面のViewを管理するようにします。「AssetViewController」が管理するViewの構成は図4の通りです。

図4　「AssetViewController」の構成

　AssetViewController管理下のUITableViewで使用するCellクラスは以下の通りです。

セルのID	クラス	要素	機能
ImageCell	ImageCell（UITableViewCellのサブクラス）	1つのUIImageView	写真を表示
AddressCell	UITableViewCell	2つのUILabel	住所を表示

Main.storyboardに「Navigation Controller」と「TableViewController」を追加

　Storyboard上に「Navigation Controller」と詳細画面用の「TableViewController」を追加します。

　「ナビゲーターエリア」上の「Main.storyboard」ファイルをクリックして選択して「Main.storyboard」ファイルを表示します。Storyboard上の空白部分をダブルクリックすると「100％表示」「50％表示」を切り替えられますので、作業内容に応じて切り替えながら進めてみてください（図5）。

図5　Main.storyboardファイルを選択

　まずは、これまでの連載の中で実装してきた「ViewController」をNavigationControllerの管理下になるように変更します。

　Storyboard上の「ViewController」を選択した後に、メニューバーの［Editor］→［Embed In］→［Navigation Controller］を選択して、NavigationControllerを追加します（図6）。

図6　「Navigation Controller」を追加

　NavigationControllerが追加されました（図7）。

図7　「Navigation Controller」追加後のStoryboard

　次に、Storyboard上に詳細画面用のTableViewControllerを追加します。

　「ユーティリティエリア」下半分のリスト内の「TableViewController」を選択し、「TableViewController」を「エディターエリア」の空白部分にドラッグします（図8）。

図8　「TableViewController」を追加

　TableViewControllerが追加されました（図9）。

図9　「TableViewController」追加後のStoryboard

AssetViewController.swiftファイルを追加

　詳細画面の機能を実装するために、AssetViewController.swiftファイルを追加します。AssetViewControllerクラスはUITableViewControllerのサブクラスとして作成します。

　プロジェクトに「AssetViewController.swift」ファイルを追加しましょう。［ナビゲーターエリア］上の［PhotoMap］項目を右クリックして、出てきたメニューの［New File］を選択します（図10）。

図10　コンテキストメニュー

　テンプレート選択画面が表示されるので、［Cocoa Touch Class］を選択し、［Next］をクリックします（図11）。

図11　テンプレート選択画面

　追加するクラスのオプションについて以下のように入力し、［Next］をクリックします（図12）。

図12　オプション選択画面

　ファイルの保存先を選択します。以前の記事で作成した「ViewController.swift」ファイルと同じフォルダーを選択し、［Create］をクリックします（図13）。

図13　保存先選択画面

　「AssetViewController.swift」ファイルがプロジェクトに追加されました（図14）。

図14　「AssetViewController.swift」ファイル追加後の「ナビゲーターエリア」

ImageCell.swiftファイルを追加

　AssetViewController.swiftファイルを追加したときと同様の手順で「ImageCell.swift」ファイルを追加してください。

　追加するクラスのオプションは以下のように入力します（図15）。

図15　オプション選択画面

　以下のように「ImageCell.swift」ファイルがプロジェクトに追加されれば完了です（図16）。

図16　「ImageCell.swift」ファイル追加後の「ナビゲーターエリア」

Main.storyboard上の詳細画面の設定を更新

　Main.storyboard上の詳細画面を仕上げていきます。Main.storyboardを表示させて、「Table View Controller」の「Table View」を選択し、「Style」項目を「Grouped」に変更します（図17）。

図17　TableViewのStyle設定を変更

　続いて、Storyboard上の「Table View Controller」にカスタムクラスとしてAssetViewControllerクラスを関連付けます（図18）。

図18　「Table View Controller」とAssetViewControllerクラスを関連付ける

　以下のように、これまで「Table View Controller」と表示されていた部分が「Asset View Controller」になれば完了です（図19）。

図19　クラスを関連付けした後のStoryboard