はじめに
SwiftUI全盛期ですが、たまたまカスタムセルの作り方についてアドバイスする機会がありましたので、せっかくなのでQiitaに残したいと思います。
カスタムセルとは
正式には、UITableViewCellクラスを派生してオリジナルのセルを作ることを指します。
UITableViewCellは、iOSのUIKitフレームワーク内でテーブルビュー(UITableView)の１行を表現するためのクラスです。
テーブルビュー(UITableView)は、リスト表示するコンポーネントです。リストのそれぞれの行はUITableViewCellインスタンスによって表現されます。
サンプルプロジェクトを通してカスタムセルの作り方を紹介
Githubに公開しているカスタムセルのプロジェクトを例に作り方とポイントを紹介します。
詳しい手順は参考になりそうなサイトがありましたのでリンクしておきますのでそちらを確認してください。
カスタムセルを作るためのファイルをXcodeに追加する
私もカスタムセルに必要なファイルの追加の仕方を忘れていたのでご紹介します。
まずはProject Navigatorで右クリックしてNew Fileを選択します。
次にCocoaTouchClassを選択します。
最後に、SubClassをUITableViewCellを選択し、Also create XIB fileをチェックしてファイルを追加します。
カスタムセルを作る上でのポイント
テーブルビューへの登録
UITableViewで使えるようにするためには、register(_:forCellReuseIdentifier:)を実行してカスタムセルを登録する必要があります。
この時に、Xibのロードとカスタムセルの識別子が必要となります。ViewControllerにそのまま書いてもよいのですが、複数ViewControllerがあると表記ブレなどが発生しやすくなります。
そこでカスタムセルのコード上に記述することによって解決しています。
/// UITableViewCellの識別子
static let identifier = "CustomTableViewCell"
/// xibをロードするための関数
static func nib() -> UINib {
return UINib(nibName: "CustomTableViewCell", bundle: nil)
}
上記のようにstaticをつけることによってインスタンス化せずに取得、実行できるようにします。
識別子はカスタムセルのクラス名にすると重複しないのでいいと思います。
// TableViewにカスタムセルを登録する
tableView.register(CustomTableViewCell.nib(), forCellReuseIdentifier: CustomTableViewCell.identifier)
ViewControllerでは上記のようにTableViewに登録するように書けます。
カスタムセルの高さ
/// UITableViewCellの高さ
static let height: CGFloat = 60
こちらも同じように高さをカスタムセルの中に記述するようにするといいと思います。
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return CustomTableViewCell.height
}
ViewControllerでは上記のようにします。
ViewControllerでは上記のようにTableViewに登録するように書けます。
最後に
昔にどこかのブログを参考にしてこのようにしたのですが、どこか今となってはわからなくなってしまいました。
１つのカスタムセルを複数のViewControllerで利用する場合にこの方法は有効だと思います。
ぜひ活用してみてください。