XIBでUITableViewCellをカスタムして利用する方法
こんにちは。hollymoto@anthrgrnwrld です。
TableViewで表示しているセルをカスタマイズしたく無いですか？？そうですよね？したいに決まってます。
そこで今回はXIBで作成したカスタムUITableViewCellを利用する方法を残しておきます。
え？Storyboardだけでもカスタム出来るって？？いや、その通りなんですが、XIBで作った方が何かと流用出来たりするので便利かなーっと思いまして。
今回のカスタムはBackgroud Colorを変更するだけです。
「それだけ？」と思うことなかれ。凝ったカスタムも全てこれの応用です。基本大事。
では行きます。
目次 TableViewを表示する簡単なアプリを作って置いて下さい。 XcodeのFile→New→File...選択し、Cocoa Touchクラスを新規追加します。Subclassは勿論 作成したXIBのListViewCellのセルのIdentifierを入力してあげる必要があります。通常のTableViewの時もどのセルを呼び出すか指定しますよね（この記事の2-5. Delegateメソッドの実装 - その3 tableView:cellForRowAt:を参照）。
ここでXIBを自由にカスタマイズします。 ListViewCell (UITableViewCell) 今回はListViewCellをオレンジ色にカスタムしました。 今回は簡単なセル色の変更をしたのみですが、Viewを足したりLabelを足したり、それらをswiftファイルと紐付けしてコード（今回の場合だとListViewCell.swift）と連携することも勿論可能です。この辺りはStoryboardを用いた時と感覚は変わりません。また色々試してみましょう。 TableViewと紐付けされているSwiftファイル（恐らくUIViewControllerやUITableViewControllerのはず）の ここで注意しなければいけないのは、一つ目の引数はXIBのファイル名であること。Web上がっている例などはXIBファイル名のカスタムセルのIdentifierを共通にしている場合が多く、たまたま同じ文字列が入っているケースが多く混乱しますが、同じ文字列でも意味合いが異なりますので注意が必要です。 https://developer.apple.com/documentation/uikit/uiviewcontroller/1621359-init そしてTableViewを動かしているならば実装済みだと思われる
0. 前提
この記事ではここで紹介したListViewControllerを元にして変更していますが、本当に何でも構いません。1. 手順1 XIBファイルとswiftファイルの追加
UITableViewCell。「Also create XIB file」にチェックを入れて下さい。チェックを入れておくとswiftファイルとXIBファイルが同時に生成されます。チェックを入れてなくても後で追加出来ますが、その場合少しだけ追加で記載必要な箇所が出てきますので、今回は同時生成の方法で進めますね。
UITableViewCellを継承したクラスをListViewCellとしました。2. 手順2 XIBのセルのIdentifierを入力
指定するIdentifierはCustomCellとしました。3. 手順3 XIBでセルをカスタマイズ
ListViewCellはUITableViewCellを継承していますが、デフォルトでは以下のような構成になっています。
4. 手順4 UITableViewCellのXIBをTableViewで使用するセルとして登録する
viewDidLoadで、XIBをTableViewで使用するセルとして登録してあげる必要があります。
コードは以下です。コード中のtableViewという箇所は状況により異なる（SotryboardのTableViewをコードと紐付けて新たな名前にしてるケースなどがある）為、適切なものに置き換えお願いします。tableView.register(UINib(nibName: "ListViewCell", bundle: nil), forCellReuseIdentifier: "CustomCell")
詳しくはリファレンスを見てね。tableView:numberOfRowsInSection:内で設定しているセルの指定をCustomCellに変更します。//各セルの要素を設定する
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
(省略)
let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath)
(省略)
return cell
}
