Swift: CustomTableViewCellのレイアウトを独自Xib上で行うことで、Cellレイアウトの再利用性を高める

I はじめに

Xibを使ってレイアウトする理由

Storyboard上のUITableViewControllerに乗っているCellへは独自のレイアウトを実装することができる。Cellの独自レイアウトを再利用しない場合は、この方法は低コストで実用的である。

しかしStoryboard上でCellの独自レイアウトとTableViewControllerが一体化してしまうので、Cellのレイアウトを使いまわしたい場合は、この方法は合理的ではない。

Cellの独自レイアウトを専用に用意したXib上で行うことで、Cellの独自レイアウトの再利用性を高めることができる。

動作確認環境

XCode Version 7.0.1

必要な事前知識

XCodeの基本的な操作
UITableViewControllerの基本的な使用方法
UITaleViewCellの"ReuseIdentifier"への理解 etc.

II 再利用可能な部品の作成

まずは再利用可能なCellのカスタムレイアウトと、Cellのカスタムクラスを作成する。
これはXibとUITableViewCellのサブクラスを使い、以下の４つのステップで実行する。

1. 事前準備
2. Cellのカスタムクラスを作成
3. Xib(Nib)ファイルの準備
4. カスタマイズの実装

1. 事前準備

Storyboard上にTableViewControllerを配置して、UITableViewControllerのサブクラスを紐づける。

2. Cellのカスタムクラスを作成

UITableViewCellのサブクラスを作成する。

この際、ファイル名を決める画面で”Also create XIB file”にチェックを入れることで、作成するクラスに紐付けられたXibファイルを同時に作成できる。

3. Xib(Nib)ファイルの準備

ステップ２でXibファイルを作成した場合は、ここをスキップして次のステップへ。

そうでない場合は、Xibファイルを作成、ほかから持ち込むなどしてプロジェクト内に配置して、XibにTable View Cellを配置してそれをステップ２のUITableViewCellのサブクラスと紐づける。

4. カスタマイズの実装

1. 作成したXib上のCellにReuseIdentifierを設定する。
2. Xibファイル上でLabelを置くなどレイアウトをカスタマイズし、Cellのカスタムクラスに紐づける。
3. その他カスタムクラスに独自に実装したい項目を実装。

III TableViewControllerへの実装

前章で作成した再利用可能なレイアウトとクラスは、Storyboard上とUITableViewControllerサブクラスのコードで設定を行うことで実装できる。

任意の複数のTableViewControllerへ実装できるので、再利用が容易である。

Storyboard

使用するTableViewController上のCellにステップ２で作成したCellのカスタムクラスを指定。
CellのReuseIdentifierは空欄のままでOK

UITableViewController

viewDidLoadとcellForRowAtIndexPathに必要なコードを書き込む。

viewDidLoad

使用するXibとCellのReuseIdentifierを登録する以下のコードviewDidLoad内へ書く

RegisterXib.swift

override func viewDidLoad() {
        super.viewDidLoad()

        // nibNameへはステップ２や３で作成したXibファイルの名前を拡張子抜きで指定。
        // forCellReuseIdentifierへはステップ４で設定したReuseIdentifierを指定。
        self.tableView.registerNib(UINib(nibName: "SnowboardCell", bundle: nil), forCellReuseIdentifier: "CustomX")
    }

cellForRowAtIndexPath

cellの生成コードを改変し、CustomCellの初期化に必要なコードを実装する。

cellForRowAtIndexPath.swift

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        // 1. 生成するセルをカスタムクラスへダウンキャスト
        // 既存のCell生成コードの後に as! <Cellのカスタムクラス名> という記述を追加
        let cell = tableView.dequeueReusableCellWithIdentifier("CustomX", forIndexPath: indexPath) as! SnowboardCell

        // 2. CustomCellの初期化コードを記述
        cell.exampleLabel.text = self.exampleDataSource[indexPath.row]

        return cell
    }

IV 参考文献

Creating Custom UITableViewCell using Nib (.xib) files in XCode
Custom UITableViewCell from nib in Swift | Stack Overflow