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

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

詳細画面上のセルを実装

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

　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ファイルのコード