UITableViewのセルをカスタムビューでカスタマイズ

UITableViewのセル(UITableViewCell)をカスタムビューを使ってカスタマイズする方法を説明します。デフォルトのセルではうまく表示できない情報をテーブルに表示したい場合、独自のxibファイルを持つビューをカスタマイズし、それをセルとして利用することもできます。

プロトタイプセルを使用する方法と比較すると、カスタマイズしたセルを再利用できる利点が存在します。

今回は上の画像のように各行に年齢と名前を表示するカスタムセルを作成します。

プロジェクトの作成と画面の準備

「File > New > Project」で「iOS > App」を選択します。Interfaceで「Storyboard」を、Languageで「Swift」を選択しておきましょう。

▲Main.storyboardにTable Viewをドロップします。オートレイアウトを利用して適切にレイアウトした後、アシスタントエディタを開き、Ctrl+ドラッグしてtableViewという名前をつけます。

ViewController.swiftのソースコードを次のように変更します。

import UIKit

class Person {
    var name: String
    var age: Int
    init(name: String, age:Int) {
        self.name = name
        self.age = age
    }
}

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var persons: [Person] = [
        Person(name: "山田", age: 24),
        Person(name: "田中", age: 25),
        Person(name: "小林", age: 26)
    ]

    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "myCell")
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        persons.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath as IndexPath)
        cell.textLabel?.text = persons[indexPath.row].name
        cell.backgroundColor = UIColor.lightGray
        return cell
    }
}

一旦実行します。

▲このような画面が表示されます。

カスタムセルの作成

次にカスタムセルを作成します。

「File > New > File」でiOSタブの中にある「Cocoa Touch Class」を選択します。

▲「Class」を「CuctomCell」に、「Subclass of」を「UITableTableViewCell」にします。「Also create XIB file」にチェックを入れます。

▲CustomCell.xibを選択します。コントロールライブラリからラベルを二つドロップします。オートレイアウトを利用して適切にレイアウトした後、アシスタントエディタを開き、ラベルをソースコードにCtrl+ドラッグして名前をつけます。今回はageおよびnameとしました。

カスタムセルの使用

ViewControllerを変更し、作成したCustomCellを使えるようにします。tableView.registerとtableView.dequeueReusableCellが変更した部分です。

import UIKit

class Person {
    var name: String
    var age: Int
    init(name: String, age:Int) {
        self.name = name
        self.age = age
    }
}

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var persons: [Person] = [
        Person(name: "山田", age: 24),
        Person(name: "田中", age: 25),
        Person(name: "小林", age: 26)
    ]

    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.dataSource = self
        tableView.delegate = self
        //変更
        tableView.register(UINib(nibName: "CustomCell", bundle: nil), forCellReuseIdentifier: "myCell")
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        persons.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //変更
        let cell = tableView.dequeueReusableCell(withIdentifier: "myCell", for: indexPath as IndexPath) as! CustomCell
        cell.age.text = String(persons[indexPath.row].age)
        cell.name.text = persons[indexPath.row].name
        cell.backgroundColor = UIColor.lightGray
        return cell
    }
}

実行します。

▲年齢と名前が各行に表示されました。

まとめ

UITableViewのセルをカスタムビューを用いてカスタマイズする方法を説明しました。カスタムしたセルを複数のテーブルで使い回したい場合、この方法が便利です。