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

iPhone 6／6 PlusアプリをSwift言語で作成してみたいという初心者向けにiOS 8の新機能を使ったアプリの作り方を一から解説する入門連載。最終回は、これまでの連載を振り返り、これまで作成したPhotoKitを使ったサンプルアプリの仕上げとしてセグエを使った画面遷移を実装の仕方や、プロパティオブザーバーとwillSetの基本的な使い方を解説する。

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

詳細画面上のセルを実装

セルとセルの子要素を追加

　TableViewで使用するセルを追加していきます。

　Storyboard上の「Asset View Controller」（一つ前の手順でAssetViewControllerクラスに関連付けたTableViewController）には元から1つのセルが配置されていました。AssetViewControllerでは2種類のセルを使用するので、もう1つセルを追加します。

　「ユーティリティエリア」下半分のリスト内の「Table View Cell」を選択し、既存のセルの下までドラッグしてください（図20）。

図20　「Asset View Controller」に「Table View Cell」を追加

　また、一つ目のセルにはカスタムクラスとしてImageCellクラスを関連付けます（図21）。

図21　一つ目のセルにカスタムクラスを設定

　このセルには写真を表示したいので、セルの子要素としてUIImageViewを追加します。

　「ユーティリティエリア」下半分のリスト内の「Image View」を選択し、既存の「Image Cell」の真ん中辺りにドラッグしてください（図22）。

図22　「Image Cell」（一つ目のセル）にUIImageViewを追加

　「Image Cell」のView階層が図23の通りになれば完了です。

図23　UIImageViewの追加を確認

「Image Cell」にAutoLayoutの制約を追加

　「Image Cell」で表示する写真は以下の条件を満たすようにします。

• 写真の横幅：画面の横幅と等しい
• 表示される写真のアスペクト比：写真のオリジナルのアスペクト比と等しい表示されるようにする

　正方形、縦長の写真の場合は図24のような表示になります。

図24　「Image Cell」の写真表示の仕様

　以下のように実装することで図24のような表示にすることができます。

1. UIImageViewがImageCellのサイズ内で目いっぱい広がるように設定する
2. 写真のオリジナルのアスペクト比と等しくなるようにAssetViewController側でImageCellの幅と高さを制御する

　「2」はAssetViewController側で実装するので、ImageCell側は「1」を満たすように実装します。

　図23でも示しましたが、ImageCellの子要素は以下のようになっています。

• ImageCell
  • ContentView
    • UIImageView

　UIImageViewとContentViewとの間にAutoLayoutの制約を適切に追加することで、「1」を満たすようにすることができます（図25）。

図25　UIImageViewとContentViewとの間に追加する制約

　Storyboard上の「Image View」に制約を追加しましょう。「Image View」を選択した状態で、［エディターエリア］右下の［Pin］メニューをクリックし、AutoLayoutの制約（Constraints）を追加するポップアップ画面を表示します（図26）。

図26　「Image View」に制約を追加（手順1/3）

　「Constrain to margins」横のチェックボックスのチェックを外し、上部の4個所の線をそれぞれクリックして赤い線になるようにします（図27）。

　これで「Image View」と隣り合うView（ここではContentView）との間の距離の制約が有効になります（次へ続きますので、ポップアップ画面は閉じないでください）。

図27　「Image View」に制約を追加（手順2/3）

　そして、上部の4箇所のテキストボックスに「0」を入力して、下部の「Add 4 Constraints」をクリックします（図28）。

　ポップアップ画面が閉じて、実際に制約が追加されます。

図28　「Image View」に制約を追加（手順3/3）

　StoryboardでViewの階層を確認すると、制約が追加されているのを確認できます。また、ユーティリティエリアで、サイズインスペクターを選択しても制約を確認できます（図29）。

　ImageCellのレイアウトに関する設定は以上です。

図29　追加した制約を確認

Storyboard上の「ImageCell」と「ImageCellクラスのプロパティ」をアウトレットで接続

　ImageCellクラスのソースコード上からUIImageViewを扱えるように、Storyboardファイルから「アウトレット」を接続します。

　アウトレットを接続する手順は、本連載の第3回目の記事「Swiftでの変数の定義、Xcodeでのアウトレット接続、iOSシミュレーターへの画像素材追加]でViewControllerクラスとMapViewを接続した手順と同様です。

　［control］キーを押しながら、Storyboard上の「Image View」を「ImageCell.swift」のawakeFromNibメソッドの上までドラッグし、ドロップします（図30）。

図30　アウトレットの接続

　アウトレットの設定内容を聞かれるので、Name項目に「assetImageView」と入力し、「Connect」ボタンをクリックします（図31）。

図31　アウトレットの設定

　アウトレット接続直後のImageCell.swiftファイルのコードは以下の通りです。

import UIKit
 
class ImageCell: UITableViewCell {
    @IBOutlet weak var assetImageView: UIImageView! // 追加されたプロパティ
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
 
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
 
        // Configure the view for the selected state
    }
}

assetImageViewプロパティを修正する前の ImageCell.swiftファイルのコード

　assetImageViewプロパティはクラスの内部からしか使用しないので、以下のようにprivateを指定するように修正します（4行目を修正）。

import UIKit
 
class ImageCell: UITableViewCell {
    @IBOutlet private weak var assetImageView: UIImageView! // "private" を指定
    
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
 
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }
}

assetImageViewプロパティを修正した後のImageCell.swiftファイルのコード