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

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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