連載
» 2015年06月09日 05時00分 公開

iPhone 6/6 Plusアプリ開発入門(終):iOS 8アプリ開発のこれまで&Swift 1.2への対応、プロパティオブザーバーとwillSetの基本的な使い方、セグエを使った画面遷移 (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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。