tableViewのセルにxibを指定してカスタムビューを作るには

ブログメインビジュアル
こんにちは、エンジニアのきくたにです。
Swiftで開発している時にtableViewのセルをカスタマイズしたいことがよくあると思います。
そんなときの方法を解説していきます。
(Swift5を使用しています)

目次

1. 完成イメージ

完成イメージはこのような感じです。
tableViewの各セルにタイトルと詳細が入っていて、文字数によって高さが可変になっています。
完成イメージ

2. tableViewのセルをつくる

2-1. tableViewのセルをxibで追加する

下図のようにtableViewのセルをxibで追加します。
セルにはタイトルと詳細が入るような箇所を用意します。
Constraintsについては下図を参考にしてみてください。
tableViewのセルをxibで追加する

2-2. TableViewCell.swiftを追加する

swiftファイルを追加します。

import UIKit

final class TableViewCell: UITableViewCell {
}

クラス名を記述します。

2-3. xibとコードを紐付ける

xibのカスタムクラスにTableViewCellを指定してください。 xib上で設定したタイトルと詳細をTableViewCell.swiftと紐付けます。

2-4. コードを書く

TableViewCell.swiftにコードを書きます。
コードを書く

import UIKit

final class TableViewCell: UITableViewCell {
    static let reuseIdentifier = "TableViewCell"
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var detail: UILabel!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    static func nib() -> UINib {
        return UINib(nibName: TableViewCell.reuseIdentifier, bundle: nil)
    }

    func bind(title: String, detail: String) {
        self.title.text = title
        self.detail.text = detail
    }
}

関数のnibは指定しておくと、あとで便利なので書いておきましょう。
また、titleとdetailをセットできるようにbind関数を定義しておきましょう。

3. tableViewをつくる

3-1. StoryboardにtableViewを追加する

下図のようにtableViewをStoryboardに追加します。
Constraintsについては下図を参考にしてみてください。
StoryboardにtableViewを追加する

3-2. Storyboardとコードを紐付ける

Storyboardで作成したtableViewとViewController.swiftと紐付けます。

3-3. コードを書く

ViewController.swiftにコードを書きます。
コードを書く

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }

    private func setupTableView() {
        tableView.dataSource = self
        tableView.register(TableViewCell.nib(), forCellReuseIdentifier: TableViewCell.reuseIdentifier)
    }
    
}

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

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCell.reuseIdentifier, for: indexPath) as? TableViewCell else { return UITableViewCell() }
        cell.bind(title: cells[indexPath.row].title, detail: cells[indexPath.row].detail)
        return cell
    }
}

Cell.swiftを追加して下記を書きます。

struct Cell {
    let title: String
    let detail: String
}

let cells: [Cell] = [
    Cell(title: "タイトル1", detail: "詳細1"),
    Cell(title: "タイトル2", detail: "詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2詳細2"),
    Cell(title: "タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3タイトル3", detail: "詳細3"),
    Cell(title: "タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4タイトル4", detail: "詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4詳細4")
]

ViewController.swiftのregisterで使用するxibを登録しています。それをdequeueReusableCellで使用しています。

これで完成です。

3. おわりに

今回はtableViewのセルにxibを指定する方法について説明していきました。
最後まで読んでいただきありがとうございました!

この記事を書いた人 kikutani 2018年12月に中途入社したエンジニアです。最近はiOSを開発しています。
TOP