#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のサブクラスを使い、以下の4つのステップで実行する。
- 事前準備
- Cellのカスタムクラスを作成
- Xib(Nib)ファイルの準備
- カスタマイズの実装
##1. 事前準備
Storyboard上にTableViewControllerを配置して、UITableViewControllerのサブクラスを紐づける。
##2. Cellのカスタムクラスを作成
UITableViewCellのサブクラスを作成する。
この際、ファイル名を決める画面で”Also create XIB file”にチェックを入れることで、作成するクラスに紐付けられたXibファイルを同時に作成できる。
##3. Xib(Nib)ファイルの準備
ステップ2でXibファイルを作成した場合は、ここをスキップして次のステップへ。
そうでない場合は、Xibファイルを作成、ほかから持ち込むなどしてプロジェクト内に配置して、XibにTable View Cellを配置してそれをステップ2のUITableViewCellのサブクラスと紐づける。
##4. カスタマイズの実装
- 作成したXib上のCellにReuseIdentifierを設定する。
- Xibファイル上でLabelを置くなどレイアウトをカスタマイズし、Cellのカスタムクラスに紐づける。
- その他カスタムクラスに独自に実装したい項目を実装。
#III TableViewControllerへの実装
前章で作成した再利用可能なレイアウトとクラスは、Storyboard上とUITableViewControllerサブクラスのコードで設定を行うことで実装できる。
任意の複数のTableViewControllerへ実装できるので、再利用が容易である。
##Storyboard
使用するTableViewController上のCellにステップ2で作成したCellのカスタムクラスを指定。
CellのReuseIdentifierは空欄のままでOK
##UITableViewController
viewDidLoadとcellForRowAtIndexPathに必要なコードを書き込む。
###viewDidLoad
使用するXibとCellのReuseIdentifierを登録する以下のコードviewDidLoad内へ書く
override func viewDidLoad() {
super.viewDidLoad()
// nibNameへはステップ2や3で作成したXibファイルの名前を拡張子抜きで指定。
// forCellReuseIdentifierへはステップ4で設定したReuseIdentifierを指定。
self.tableView.registerNib(UINib(nibName: "SnowboardCell", bundle: nil), forCellReuseIdentifier: "CustomX")
}
###cellForRowAtIndexPath
cellの生成コードを改変し、CustomCellの初期化に必要なコードを実装する。
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