【Swift】TableView 複数列を表示する

この記事では、TableView 内に複数列を表示する方法について紹介します。
TableView では 1 つの列を表示することはできますが、複数列は少し工夫が必要です。
プロジェクト作成から紹介していますが、複数列の方法のみ知りたい方は TableView に複数列を表示する からご覧ください。

環境

• macOS Big Sur(11.0.1)
• Xcode 12.3
• Swift 5.3.2
• Simulater iPhone 11

プロジェクト作成

Xcode を起動します。
File>New>Project を選択します。

iOS の中の App を選択して、Next をクリックします。
※以前は SinglePageApplication でしたが、変わったようです。

Product Name は今回「TableViewSample」としました。
Organization Identifier は任意に入力します。
Interface は「Storyboard」を選択します。

プロジェクトフォルダの保存先は任意のフォルダを選択します。

TableView に複数列を表示する

TableView と TableViewCell 配置

まずは TableView と TableViewCell を配置します。
TableView や TableViewCell などのパーツは画面上部の＋アイコンをクリックするとポップアップが表示されます。
その中からパーツを選択して配置していきます。

Main.storyboard を開き、TableView を追加します。
下の画像では真ん中に配置していますが、使いやすいよう画面全体に広げておきましょう。

dataSource と delegate を View Controller に紐付けます。
※ここで誤って View に紐付けると起動時にエラーとなりますので、Outlets で「View Controller」に紐付いていることを確認しましょう。

TableViewCell を追加します。

identify に cell とつけておきます。

複数列を表示するために Label を配置

単一の項目を表示する場合は TableViewCell だけでよいですが、複数列を表示したい場合は、TableViewCell 内に Label を配置します。
今回は 2 つの Label を配置して動かしてみます。

コードから Label を操作するため、Tag を 1 から順番に設定しておきます。

ViewController.swift に表示データを定義

本来は WebAPI 等でデータを取得すると思いますが、今回はダミーの値を使用して動作を確認します。
ViewController.swift を以下のように修正します。
※「追加 ①」や「追加 ②」などがもともとの記述に追加する内容です。

import UIKit

// 追加①：UITableViewDelegate, UITableViewDataSourceを追加
class ViewController: UIViewController , UITableViewDelegate, UITableViewDataSource {

    // 追加②：セルに表示するデータ
    var data = [
        ["日付","祝・休日"],
        ["2021/01/01","元日"],
        ["2021/01/11","成人の日"],
        ["2021/02/11","建国記念の日"],
        ["2021/02/23","天皇誕生日"],
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    // 追加③：セルの個数を指定するデリゲートメソッド（必須）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count;
    }
    // 追加④：セルに値を設定するデータソースメソッド（必須）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

        // TableViewCellの中に配置したLabelを取得する
        let label1 = cell.contentView.viewWithTag(1) as! UILabel
        let label2 = cell.contentView.viewWithTag(2) as! UILabel

        // Labelにテキストを設定する
        label1.text = data[indexPath.row][0]
        label2.text = data[indexPath.row][1]

        return cell
    }
}

動作確認

実行すると以下のような画面が表示され、複数列が表示されていると思います。

補足：１行ごとに背景色を変える

TableViewCell の backgroundColor に色を指定することで背景色を変更することができます。
偶数行かどうかを判断することで１行ごとに背景色を変えることができます。
TableView のデータソースメソッドを以下のように書き換えます。

    // 追加④：セルに値を設定するデータソースメソッド（必須）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // セルを取得する
        let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)

        // TableViewCellの中に配置したLabelを取得する
        let label1 = cell.contentView.viewWithTag(1) as! UILabel
        let label2 = cell.contentView.viewWithTag(2) as! UILabel

        // Labelにテキストを設定する
        label1.text = data[indexPath.row][0]
        label2.text = data[indexPath.row][1]

        // 補足：セルの背景色を変更
        if indexPath.row % 2 == 0 {
            // 偶数行の場合、色を変える
            cell.backgroundColor = UIColor(red: 217/255, green: 209/255, blue: 173/255, alpha: 1)
        } else {
            // 奇数行の場合、通常色（白）に戻す
            cell.backgroundColor = UIColor.white
        }

        return cell
    }

実行すると以下のようになります。

補足：データ更新時に TableView を更新する

TableView はデータソースメソッド実行時に表示データが決まるため、データを更新した場合には TableView のリロードが必要です。
TableView のアウトレットを追加し、表示対象のデータ定義に didSet を追加します。
didSet はデータ変更時に呼び出されるため、そのタイミングで TableView の reloadData()を呼び出すことで画面表示を更新できます。

    @IBOutlet weak var tableview: UITableView!

    // 追加②：セルに表示するデータ
    var data = [
        ["日付","祝・休日"],
        ["2021/01/01","元日"],
        ["2021/01/11","成人の日"],
        ["2021/02/11","建国記念の日"],
        ["2021/02/23","天皇誕生日"],
    ] {
        didSet {
            tableview?.reloadData()
        }
    }

まとめ

今回は TableView で複数列を表示する方法を紹介しました。
一手間かかりますが、 TableViewCell に Label を設定することで複数列を表示することができます。
複数列の表示を検討している方はぜひお試しください。