もちゅろぐ
iOS
UITableView
【初心者向け】UITableViewCellをカスタマイズする

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

2019-9-26

Table of Contents

UITableViewCellを継承したセルクラスを用意する
- func awakeFromNib(): Storyboardまたはnibファイルからロードされた直後に呼ばれる
- func setSelected(, animated:): 選択状態と通常状態の状態アニメーション処理
StoryboardのUITableViewに直接UITableViewCellを追加する
セルと制御クラスを紐付ける
セルをレイアウトする
制御クラスに実装する
- 注意：UITableViewCellが定義した名前は使えない
Identifierを定義する
カスタムセルを使う
- struc User: テーブル表示したいデータ構造
- セル参照の実装
応用編
さいごに

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

UITableViewCellを継承したセルクラスを用意する

Xcodeのファイル作成でCoCoa Touch Classを選び、Subclass ofにUITableViewCellを選んで作成すると、次のようなコードが生成されます。

class UserTableViewCell: UITableViewCell {
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }
}

`func awakeFromNib()`: Storyboardまたはnibファイルからロードされた直後に呼ばれる

初期化などUserTableViewCellがロードされた直後に１度だけ実行したい処理をここに実装します。

`func setSelected(, animated:)`: 選択状態と通常状態の状態アニメーション処理

セルがタップにより選択状態/通常状態の切り替わり処理をするときに呼ばれる処理です。特になくても状態アニメーションは行われます。

ここを確実に使う場面は少なく、セル内の色付きビューや画像の選択処理がうまく動かない場合に使います。詳しくはこちらの記事をどうぞ。

UITableViewCell(セル)のサブビュー背景色が消える原因と解決法

UITableViewのUITableViewCell(セル)をカスタマイズでサブビューに背景色をつけることがありますが、そのセルをタップしてハイライト状態(Highlighted)や選択状態(Selected)にしたときに、サブビューの背景色が消える現象に遭遇した人は多いと思います。そんなバグの直し方を説明します。

StoryboardのUITableViewに直接UITableViewCellを追加する

下記画像のようにUITableViewCellをテーブルに追加します。

セルと制御クラスを紐付ける

動画のようにStoryboard上のセルを選択してIdentity Inspectorタブ > CustomClass > Classに制御クラスを入力します。
今回は UserTableViewCell と入力します。動画のようにサジェストで入力補完されるのであっていればエンターを押してください。
このとき下のModuleが変わることを確認してください。ここも正しいModuleじゃないと見つけられずランタイムエラーになります。

セルをレイアウトする

追加方法は、通常のビュー追加と同じです。特に注意することはないと思います。

今回は次のようなレイアウトにしました。

制御クラスに実装する

制御したいビューは

イメージ
ラベル(左)
ラベル(右)

の3つになります。

コードだと次のようになります。

@IBOutlet private weak var iconImageView: UIImageView!
@IBOutlet private weak var nameLabel: UILabel!
@IBOutlet private weak var ageLabel: UILabel!

func setup(icon: UIImage, name: String, age: Int) {
    iconImageView.image = icon
    nameLabel.text = name
    ageLabel.text = String(age)
}

と名付けて前述したUserTableViewCellに追記します。

setup(icon:name:age:)メソッドは、決められたものではなく自分で用意したものです。制御クラスからビュープロパティを出さずに目的を提供することで、使い手側の内部依存をなくすことが目的です。
セルのカスタマイズには不要で、public化して直接外からビュー設定をすることも出来ますが、
だからといって逸脱しすぎた実装をするのは好きではないので、このようなメソッドを用意しています。

注意：UITableViewCellが定義した名前は使えない

単純に imageView: UIImageView と名付けたくなりますが、 UITableViewCellには予め定義されているため使うことができません。

UItableViewCell抜粋

// Content.  These properties provide direct access to the internal label and image views used by the table view cell.  These should be used instead of the content properties below.
@available(iOS 3.0, *)
open var imageView: UIImageView? { get } // default is nil.  image view will be created if necessary.

@available(iOS 3.0, *)
open var textLabel: UILabel? { get } // default is nil.  label will be created if necessary.

@available(iOS 3.0, *)
open var detailTextLabel: UILabel? { get } // default is nil.  label will be created if necessary (and the current style supports a detail label).

Identifierを定義する

Identifierとは次の画像の箇所を指します。

これはカスタムセル自体のIDを指します。

ユニークであれば何でもいいのですが、制御クラス名にするのが慣習です。
今回もUserTableViewCellにしてます。

ここのIDとコード側の指定が間違うと次のようなランタイムエラーが発生します。

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'unable to dequeue a cell with identifier UserTableViewCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

カスタムセルを使う

カスタムセルのビューを用意し、制御クラス(UserTableViewCell)も用意しそれらの紐付けも行いました。
次は、それを実際に使います。主に見るべき場所は func tableView(tableView:cellForRowAt:) -> UITableViewCell内になります。

struct User {
    let icon: UIImage?
    let name: String
    let age: Int
}

class ViewController: UIViewController {
    @IBOutlet private weak var tableView: UITableView!

    private let users: [User] = [
        User(icon: #imageLiteral(resourceName: "icon") , name: "Angel", age: 20),
        User(icon: #imageLiteral(resourceName: "icon") , name: "Bob", age: 21),
        User(icon: #imageLiteral(resourceName: "icon") , name: "Chirs", age: 22),
        User(icon: #imageLiteral(resourceName: "icon") , name: "David", age: 23),
        User(icon: #imageLiteral(resourceName: "icon") , name: "Elly", age: 24)
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return users.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "UserTableViewCell", for: indexPath) as! UserTableViewCell

        let user = users[indexPath.row]
        cell.setup(icon: user.icon ?? #imageLiteral(resourceName: "icon2"), name: user.name, age: user.age)

        return cell
    }
}

もしUITableViewの使い方がわからない場合は次の記事を確認してください。

【初心者向け】UITableViewの基本的な使い方を極める【入門】

初心者向けにiOSのUITableViewの基本的な使い方について説明します。この記事を一通り読むことでほとんどの部分を極めれることを目標にしています。

`struc User`: テーブル表示したいデータ構造

今回はユーザー情報を表示するので、それを表すモデルとして用意しました。
本来の開発であれば、データモデルにUIKitデータとなるUIImageをオリジナルとして直接持つことはないのですが、
今回の記事はそこを正すとコード量が増えて、目的を正しく伝えれずブレてしまうので、このような形にしてあります。

ViewController.usersにデータ元を用意してます。
#imageLiteral(resourceName: "icon") は、Assets.xcassets 内のリソースを指定してあります。

xcassetsについては詳しくはこちらの記事をどうぞ。

【初心者向け】Assets.xcassetsを理解して使う

## 登場以前プロジェクトファイルに直接画像ファイルを登録していたため、チーム開発するとプロジェクトファイルの衝突が多発してた。

セル参照の実装

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "UserTableViewCell", for: indexPath) as! UserTableViewCell

    let user = users[indexPath.row]
    cell.setup(icon: user.icon ?? #imageLiteral(resourceName: "icon2"), name: user.name, age: user.age)

    return cell
}