2022/10/13

【Swift UIKit】UITableViewCellでカスタムセルビューの作り方!

この記事からわかること

SwiftのUIKitでリストを実装する方法
UITableViewCellとは？
カスタマイズできるセルの作り方

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

SwiftのUIKitでUITableViewを使ったリスト表示をする際にカスタマイズできるセルの作成方法をまとめていきます。UITableViewの基本的な使用方法はこの記事では解説しませんので、以下の記事を参考にしてください。

カスタムセルの作成の流れ

一番最初に今回の目的と流れを整理しておきます。

目的

自分でUI部品を配置できるセルの構築

流れ

UITableViewCellクラスの生成
StoryboardからTable Viewの追加
Table Viewの管理クラスを設定
Table Viewの設定(デリゲートなど)
StoryboardからTable View Cellの追加
Table View Cellの管理クラスを設定
Table View CellのIdentifierを設定
Table View Cellをカスタマイズ
UI部品の@IBOutletを作成
カスタマイズTableViewCellクラスの呼び出し

1.UITableViewCellクラスの生成

カスタマイズできるセルを作成するためにはまずUITableViewCellを継承したクラスを作成していきます。「File」＞「New」＞「File...」＞「CoCoa Touch Class」を選択し、subclassを「UITableViewCell」にして新規ファイルを作成します。すると以下のコードがあらかじめ記述された状態のTableViewCellクラスが出来上がります。

TableViewCell.swift
import UIKit

class TableViewCell: 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
    }
}

awakeFromNibメソッド

作成したTableViewCellクラスがロードされた直後に実行されるメソッド。

setSelected(_ selected: Bool, animated: Bool)メソッド

セルがタップにより選択された状態/通常の状態になった時に実行されるメソッド

2〜4.StoryboardからTable Viewの追加〜設定

ここではUITableViewでのリストビューの作成方法は省略しますので詳しくは以下記事をご覧ください。

Main.storyboardにTable Viewを追加
delegateとdatasourceを紐付け
表示させるデータの定義
UITableViewDataSourceとUITableViewDelegateプロトコルに準拠したViewControllerクラスの作成
セルの個数とセルを生成するメソッドの定義

Main.storyboardにTable Viewを追加

delegateとdatasourceを紐付け

表示させるデータの定義

UserModels.swift
import UIKit
struct UserModels {
    var name:String
    var age:Int
}

#if DEBUG
extension UserModels{
    static var sampleData = [
        UserModels(name: "John", age: 20),
        UserModels(name: "Michael", age: 15),
        UserModels(name: "Stephanie", age: 69),
        UserModels(name: "Lloyd", age: 27),
        UserModels(name: "Theodore", age: 42),
        UserModels(name: "Bagwell", age: 30),
    ]
}
#endif

UITableViewDataSourceとUITableViewDelegateプロトコルに準拠したViewControllerクラスの作成 & セルの個数とセルを生成するメソッドの定義

ViewController.swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    let userData = UserModels.sampleData

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    // セルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.userData.count;
    }

    // セルの生成
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      // 後述します
    }
}

5〜8.StoryboardからTable View Cellの追加〜設定

続いてStoryboardからTable View Cellを追加します。

Table View Cellの管理クラスを設定

追加したTable View Cellを管理するクラスを記述します。インスペクタの以下の場所に定義したクラス名を入力します。

Table View CellのIdentifierを設定

作成したTable View Cellを識別するための識別子(Identifier)を設定します。識別子は何でも良いですがクラス名と同じものにしておきます。

Table View Cellをカスタマイズ

最後にTable View CellにUI部品を追加しておきます。

9.UI部品の@IBOutletを作成

続いてSwiftファイル内からStoryboardに追加したUI部品を操作するために@IBOutletを使用して紐付けていきます。ViewController.swiftにはテーブルビュー自体をTableViewCell.swiftには追加したラベルを操作するように準備します。

以下のコードを追記したら、Storyboardに移動し以下画像のように「New Referencing Outlet」からドラッグして追加した対象の変数を選択して紐付けます。

ViewController.swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    let userData = UserModels.sampleData
    @IBOutlet  private weak var tableView: UITableView!
    // 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
}

TableViewCell側も同様に紐付けをしておきます。ついでに独自のcreateメソッドを追加しておきます。テーブルセルのラベルに値を格納するためのイニシャライザ的な役割を持たせています。

TableViewCell.swift
class TableViewCell: UITableViewCell {

    @IBOutlet  private weak var nameLabel: UILabel!
    @IBOutlet  private weak var ageLabel: UILabel!
    // 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
    func create(name: String, age: Int) {
        nameLabel.text = name
        ageLabel.text = String(age)
    }
}

10.カスタマイズTableViewCellクラスの呼び出し

最後にViewController.swift内でdequeueReusableCellメソッドを使用してカスタマイズTableViewCellクラスを指定して返却するセルを構築します。

ViewController.swift
// セルの生成
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell", for: indexPath) as! TableViewCell
    cell.create(name: self.userData[indexPath.row].name, age: self.userData[indexPath.row].age )
    cell.textLabel!.font = .systemFont(ofSize: 20)
    return cell
}