UITableViewController のセルをカスタマイズする方法

ここでは、前回作成したテーブルビューサンプルプログラムを少し変更して、テーブルのセルをカスタマイズします。

ここではセルのフォントを変えるのと、背景を薄黄色にしています。

テーブルのセルをカスタマイズするには、テーブルセルを表す UITableViewCell クラスの派生クラスを作ります。

新規の Cocoa Touch クラスファイルを作成します。

UITableViewCell のサブクラスを作ります。名前はデータモデルクラスを Person という名前にしていたので、PersonTableViewCell という名前にしておきます。

このとき、Also create XIB file (XIB ファイルも作る) というオプションにチェックをつけておきます。

XIB ファイルというのは、GUI インターフェイスビルダーでビューを定義するためのファイルです。

さて、ファイルを作ったあと XIB ファイルをみてみると、作成した UITableViewCell クラスのサブクラスが、 XIB ファイルのビュークラスに設定されていることがわかります。

ここでは、単に背景色を薄黄色に設定して、UILabel をひとつ配置します。(変化がわかるように、フォントを適当に変えました)

アシスタントエディタを開き、PersonTableViewCell.swift が開いているのを確認したら、ラベルをアシスタントエディタに ⌃ control ドラッグすることで、アウトレットを作成します。

PersonTableViewCell.swift にアウトレットが作成されますが、このファイルの変更はこれだけで、あとは自動的にテンプレートが作成したままです。

import UIKit

class PersonTableViewCell: UITableViewCell {

    @IBOutlet weak var nameLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
    }

}

さて、テーブルビューコントローラの方での変更は次の通りです。

• カスタムのテーブルビューセルクラスの登録
• dequeueReusableCell でカスタムテーブルビューセルオブジェクトを受け取ったら値をセット

ViewController.swiftの全体は次の通りです。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    let cellIdentifier = "PersonTableViewCell"
    ...
    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.register(UINib(nibName: "PersonTableViewCell", bundle: nil), forCellReuseIdentifier: cellIdentifier)
        tableView.delegate = self
        tableView.dataSource = self
    }

    func tableView(
        _ tableView: UITableView,
        cellForRowAt indexPath: IndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCell(
            withIdentifier: cellIdentifier,
            for: indexPath) as! PersonTableViewCell
        let p = PersonStore.shared.get(index: indexPath.row)
        cell.nameLabel.text = p.name
        return cell
    }
    ...

UITableView クラスの register メソッドに、カスタムのテーブルビューセルクラスの NIB を渡して登録します。

すると、tableView(_:cellForRowAt:) メソッド内で、dequeueReusableCell メソッドを呼び出した時に、PersonTableViewCell オブジェクトが受け取れます。

ダウンキャストになりますが、ここでは型は決まっているので as! で問題なく PersonTableViewCell オブジェクトが受け取れます。

これでセルに値をセットすることができます。

以上で、UITableView でカスタムの UITableViewCell クラスを使う方法を紹介しました。