もちゅろぐ
iOS
UITableView
【初心者向け】UITableViewCellをxibから使う

【初心者向け】UITableViewCellをxibから使う

2019-9-29

Table of Contents

UITableViewCell(セル)を用意する
- xibの作成
  - レイアウト
- 制御コードの実装
カスタムUITableViewCellの登録
UITableViewCellをxibから使うのは設計観点

この記事ではUITableViewCellをxib化して外部からセルを使う方法について説明します。

UITableViewCellをカスタマイズして多彩なテーブル実装はできますが、設計観点においてUITableView上に直接UITableViewCellを配置してカスタマイズするのは、ときとして完全ではありません。

例えば画面Aと画面Bで同じレイアウトのセルを必要になったときに、UITableViewに直接配置したセルでは、画面毎のstoryboardに同じレイアウトが存在してしまい、DRY原則違反になります。

xib化することで２つあった同じレイアウトが1つに集約し、DRYも守れるようになります。

UITableViewCell(セル)を用意する

まずはセルを用意から始めます。最初に制御クラスとxibファイルを作成します。

xibの作成

個別でファイル作るでもいいのですが、楽な方法を選びます。
ファイル作成で Cocoa Touch Class を選びます。

次にSubclass ofをUITableViewCellにしてください。

Also create XIB fileにチェックをいれてください。

あとは画面に従って進めばファイルを作成できます。
ファイルは制御クラスとxibファイルの２つが出来ているはずです。

レイアウト

xibファイルはstoryboardと基本操作は変わりません。
今回は次のようなレイアウトを作成しました。

制御クラスの紐付けとセルIDの設定も忘れずに行います。

もし制御クラスやセルIDの設定など、セルのカスタマイズに関する詳細こちらの記事をどうぞ。

【初心者向け】UITableViewCellをカスタマイズする

簡単なユーザー情報を表示するテーブルを題材に話を進めます。

制御コードの実装

class TableViewCell: UITableViewCell {
    @IBOutlet private weak var iconImageView: UIImageView!
    @IBOutlet private weak var nameLabel: UILabel!
    @IBOutlet private weak var descriptionLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }
    func setup(image: UIImage, name: String, description: String) {
      iconImageView.image = image
      nameLabel.text = name
      descriptionLabel.text = description
    }
}

といっても生成されたコードに対してOutletを結んだだけです。

今回の重要部分は、ロード処理になります。

カスタムUITableViewCellの登録

xibのセルを使いたいUITableViewに対してxibの存在を登録する必要があります。
でないと、テーブルはセルIDだけ言われても見つけることができません。

登録は UITableView.register(_,forCellReuseIdentifier:)を使います。
xibのロードは UINib(nibName:bundle:)を使います。

(なぜNIBなのか？に関しては歴史的経緯のすえこうなった。程度でとりあえず問題ありません。)

override func viewDidLoad() {
    super.viewDidLoad()
    // ...
    let nib = UINib(nibName: "TableViewCell", bundle: nil)
    tableView.register(nib, forCellReuseIdentifier: "TableViewCell")
    // ...
}