【Swift5】カスタムセルの使い方

【Swift5】カスタムセルの使い方

カスタムセルについて

TableViewを作成する際に、複数のUILabelなどを操作する方法は、
下記の3つのやり方があるのかなと思います。

1, tagを利用する
2, xibを利用する
3, カスタムセルを利用する

本記事は、
3つ目のカスタムセルを利用した方法を自分のメモ程度に書き残します。
LabelやButton等を配置する際にスッキリとしたコードで記述することができるのが特徴です。

完成例

下のようなTableViewを、カスタムセルを利用して作成しました。

自分のPCで動かしたい方は、下記のGitHubリンクから是非是非クローンして下さい。
https://github.com/MaedaKouta/MiniApp23-CustomCell

ソースコード

【1】新しくファイルを作成し、Subclassに「UITableViewCell」を選択する(今回はTableviewCell.swiftと命名)
【2】【1】のファイル内へUILabelやIUButtonを紐付ける
【3】CellのCustomCellClassに【1】で命名したファイル名を選択(ここではTableViewCell)
【4】Cellを「as! (【1】で命名したファイル名)」とダウンキャストする

上記の4ステップでできます。
全コードを下記に記述しておきます。

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 100
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell") as! TableViewCell
        cell.leftLabel.text = "\(indexPath.row)"
        cell.rightLabel.text = "\(indexPath.row)"
        
        return cell
    }
}
import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var leftLabel: UILabel!
    @IBOutlet weak var rightLabel: UILabel!

}


ということで、本記事はカスタムセルの使い方を自分のメモ程度にまとめました。
本記事を書いている僕自身は、まだSwift初学者のためコードに至らない点が多いと思います。参考程度にご活用下さい。
アドバイスやコードの改善などあれば本記事の最後の部分からコメントしてくださいね。
最後まで読んでいただきありがとうございました!

おすすめSwift書籍

Swiftを学ぶなら、間違いのない2冊はこちら

Xcodeを学ぶなら下の一冊



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です