MENU

【UITableView】カスタムセルの使い方とデータ設計ポイント

UITableViewを使ったiOSアプリ開発では、標準のセルだけでなく、より複雑なUIを構築するためにカスタムセルを使用することがよくあります。この記事では、カスタムセルを活用し、ViewControllerとセル間でデータを効果的にやり取りする設計方法について解説します。

完成イメージ↓

目次

1. カスタムセルの作成

まず、セルに表示するデータ構造として、Personというモデルを定義します。このモデルは、名前と年齢を保持しています。

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

次に、CustomCellというUITableViewCellをカスタマイズし、Personデータを表示するためのUILabelを設置します。このカスタムセルには、applyWith(data:)というメソッドを用意して、セルにデータを適用できるようにします。

final class CustomCell: UITableViewCell {
    @IBOutlet weak var age: UILabel!
    @IBOutlet weak var name: UILabel!

    func applyWith(data: Person) {
        name.text = data.name
        age.text = String(data.age)
    }
}

2. データの受け渡し方法

UITableViewのデリゲートメソッドを使用して、ViewControllerからカスタムセルにデータを受け渡すのが基本的な設計です。

ViewControllerで、データのソースとなる配列 personsを用意し、それをTableViewに表示します。

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.applyWith(data: persons[indexPath.row])
        return cell
    }
}

3. データのやり取りのポイント

ここで重要なのが、ViewControllerとカスタムセルの責任を明確に分けることです。ViewControllerはデータソースとしての役割を持ち、カスタムセルはデータを受け取って表示するための器として動作します。

例えば、applyWith(data:)メソッドを介してカスタムセルにデータを適用することで、ViewController側が直接UILabelなどのUI要素に触れることを避け、データの流れをシンプルに保っています。これにより、UIが変更された場合でもCustomCell内の変更だけで対応でき、ViewControllerのコードを複雑にすることがありません。

この設計は、責任の分離(Separation of Concerns)の原則に基づいており、コードの保守性を高める上で非常に重要です。

まとめ

UITableViewのカスタムセルを使用する際、データの受け渡しには、ViewControllerからカスタムセルにデータを渡すためのメソッドを設計することがポイントです。これにより、コードがシンプルかつ見通しやすくなり、後々の変更やメンテナンスも容易になります。

今回紹介した方法を使うことで、より綺麗でメンテナンスしやすいiOSアプリを開発できるはずです。

さいごに、年収4桁万円を達成中のiOSエンジニアが皆さんをお導きいたします!
ぜひメンターを受けてみてください〜
メンターはこちら
貴方もなれます!!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Rio@iOSエンジニアのアバター Rio@iOSエンジニア 経営者兼モバイルアプリエンジニア

都内のモバイルアプリ開発会社経営者。
モバイルアプリの新規の請負開発及び保守運用を引き受ける。
Denso→Honda→現在
#RxSwift #MVVM #Firebase #Python3

コメント

コメントする

目次