SwiftでUITableViewを使いこなすたった12の方法

はじめに
●UITableViewとは
- ○UITableViewの基本的な概念
●UITableViewの使い方
●UITableViewの応用例
●注意点と対処法
- ○セルの再利用の理解
- ○パフォーマンス最適化のポイント
●カスタマイズ方法
- ○デザインや動きのカスタマイズ方法について
  - □セルのデザインカスタマイズ
  - □セルの動きのカスタマイズ
まとめ

はじめに

Swiftでのアプリ開発では、一覧表示が必要な場面でUITableViewが非常に頻繁に利用されます。

そのため、UITableViewをしっかりと理解し、効果的に使用するスキルはアプリ開発者にとって必須と言えます。

この記事では、SwiftでのUITableViewの使い方を12の具体的な方法を通じて学ぶことができます。

●UITableViewとは

UITableViewはiOSのUIKitフレームワークに含まれるクラスの一つで、一覧形式のデータを表示するためのUIコンポーネントです。

具体的には、連絡先リストや設定メニューなど、多くのアプリで頻繁に見かけるスクロール可能なリスト形式の表示に用いられます。

UITableViewは非常に高機能であり、セルの再利用、セクションの分割、カスタムセルの作成など、多くのカスタマイズオプションを持っています。

これにより、様々なデザインや機能のリストを作成することができます。

○UITableViewの基本的な概念

UITableViewは、次の主要なコンポーネントから構成されています。

UITableViewDataSource：テーブルビューに表示するデータの内容や数を提供するためのプロトコルです。具体的には、セルの内容やセクションの数などを指定します。
UITableViewDelegate：テーブルビューの振る舞いや見た目のカスタマイズを行うためのプロトコルです。セルの高さやヘッダー、フッターの表示、セルがタップされた時の動作などを定義します。
UITableViewCell：テーブルビューの各行を表すUIコンポーネントです。このセルは再利用が可能で、スクロール時のパフォーマンス向上のために再利用されます。
セクション：テーブルビューは、複数のセクションに分けてデータを表示することができます。それぞれのセクションは、ヘッダーやフッターを持つことができます。

UITableViewを効果的に使用するためには、これらのコンポーネントや彼らの相互作用を理解することが鍵となります。

●UITableViewの使い方

UITableViewは、iOSアプリケーション開発でリスト型のデータを表示するための主要なコンポーネントの一つです。

ここでは、UITableViewを使いこなすための基本的な使い方を詳細に解説します。

そして、実際にアプリケーションでの実装例をいくつかのサンプルコードとともに紹介します。

○サンプルコード1：基本的なテーブルビューの作成

初めに、基本的なテーブルビューの作成方法を紹介します。

このコードでは、UITableViewを使ってシンプルなリストを表示するコードを表しています。

この例では、テーブルビューを作成してデータをセットして、表示しています。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    // テーブルビューのインスタンス
    var tableView: UITableView!
    // データの配列
    let data = ["Item 1", "Item 2", "Item 3"]

    override func viewDidLoad() {
        super.viewDidLoad()

        // テーブルビューの初期化
        tableView = UITableView(frame: self.view.bounds)
        tableView.dataSource = self
        tableView.delegate = self
        self.view.addSubview(tableView)
    }

    // セクション内の行数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }

    // セルの内容を設定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = data[indexPath.row]
        return cell
    }
}

このコードを実装し実行すると、シンプルなリストが表示されることが確認できます。

具体的には、”Item 1″、”Item 2″、”Item 3″というテキストが含まれたセルが順番に表示されます。

○サンプルコード2：セクションを持つテーブルビューの作成

次に、セクションを持つテーブルビューの作成方法を紹介します。

このコードでは、UITableViewを使用してセクションが分けられたリストを表示するコードを表しています。

この例では、テーブルビューに複数のセクションを追加し、それぞれのセクションにデータをセットして表示しています。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    // テーブルビューのインスタンス
    var tableView: UITableView!
    // セクションのタイトルの配列
    let sectionTitles = ["Section 1", "Section 2"]
    // データの二次元配列
    let data = [["Item 1-1", "Item 1-2"], ["Item 2-1", "Item 2-2", "Item 2-3"]]

    override func viewDidLoad() {
        super.viewDidLoad()

        // テーブルビューの初期化
        tableView = UITableView(frame: self.view.bounds)
        tableView.dataSource = self
        tableView.delegate = self
        self.view.addSubview(tableView)
    }

    // セクション数を指定
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionTitles.count
    }

    // セクションのタイトルを設定
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionTitles[section]
    }

    // セクション内の行数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data[section].count
    }

    // セルの内容を設定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = data[indexPath.section][indexPath.row]
        return cell
    }
}

このコードを実装し実行すると、セクションが2つのテーブルビューが表示されることが確認できます。

セクション1には”Item 1-1″と”Item 1-2″、セクション2には”Item 2-1″、”Item 2-2″、”Item 2-3″というテキストが含まれたセルが順番に表示されます。

○サンプルコード3：カスタムセルの実装方法

UITableViewの利用で特に魅力的なのは、標準のセルを超えて独自のカスタムセルを作成できる点です。

ここでは、カスタムセルの作成とその実装方法について詳しく解説します。

まず、カスタムセルを作成するための手順を紹介します。

Xcode内で新しいファイルを作成します。
テンプレートから「Cocoa Touch Class」を選択します。
クラス名を適切に命名し、サブクラスとして「UITableViewCell」を選択します。
必要に応じて、関連するIBOutletやアクションをInterface Builderで接続します。

下記のコードは、シンプルなカスタムセルを実装する例を表しています。

このコードでは「CustomTableViewCell」という名前のカスタムセルを使って、セル内にラベルとイメージビューを配置しています。

import UIKit

class CustomTableViewCell: UITableViewCell {

    @IBOutlet weak var customImageView: UIImageView!
    @IBOutlet weak var customLabel: UILabel!

    override func awakeFromNib() {
        super.awakeFromNib()
        // 初期化時の設定
    }
}

上記のコードを実装すると、カスタムセル内にイメージビューとラベルが配置され、必要に応じてその内容を変更することができます。

また、Interface Builderでのデザインや設定を追加することも可能です。

このカスタムセルをテーブルビューに適用すると、各セルにイメージとテキストが表示されます。

具体的には、データソースメソッド内でカスタムセルをデキューし、必要なデータをセットして表示します。

○サンプルコード4：セルの選択・タップ反応の制御

UITableViewでセルをタップしたときの反応や選択状態を制御する方法を見ていきましょう。

デフォルトの設定では、セルをタップすると青色の背景が表示されます。

これはセルの選択状態を表しています。

しかし、この色や挙動はカスタマイズ可能です。

下記のコードは、セルが選択されたときの背景色を変更する例を表しています。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let cell = tableView.cellForRow(at: indexPath)
    cell?.backgroundColor = UIColor.lightGray
}

このコードでは、セルが選択されたときに背景色をlightGrayに変更しています。

セルをタップすると、選択されたセルの背景色がlightGrayに変更されることが確認できます。

この方法を使うことで、ユーザーに対して選択されたセルを明確に表すことができます。

○サンプルコード5：セルのスワイプアクションの実装

UITableViewを使ったアプリで一般的によく見られる機能として、セルをスワイプすることで特定のアクションを呼び出すことができます。

例えば、メールアプリでは、メールをスワイプして削除やアーカイブすることが一般的です。

ここでは、Swiftを使用してUITableViewのセルにスワイプアクションを追加する方法のサンプルコードを紹介します。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var dataList = ["データ1", "データ2", "データ3"]

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = dataList[indexPath.row]
        return cell
    }

    // スワイプアクションの実装
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let deleteAction = UIContextualAction(style: .destructive, title: "削除") { (action, view, completionHandler) in
            self.dataList.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .automatic)
            completionHandler(true)
        }

        return UISwipeActionsConfiguration(actions: [deleteAction])
    }
}

このコードでは、UITableViewのセルにスワイプアクションを追加する方法を表しています。

この例では、右から左へスワイプした際に「削除」というアクションが表示され、タップすることで該当のデータを削除する動作をしています。

実際に上記のコードを実行すると、テーブルビューに表示されている各セルを右から左にスワイプすると、削除ボタンが表示されます。

そして、その削除ボタンをタップすると、該当のデータが削除され、テーブルビューからも該当のセルが消える動作を確認できます。

○サンプルコード6：データのリロード方法

アプリ内でデータが変更された場合、それをテーブルビューに反映させるためには、テーブルビューのデータをリロードする必要があります。

下記のサンプルコードでは、Swiftを使ってUITableViewのデータをリロードする方法を表しています。

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    var dataList = ["データ1", "データ2", "データ3"]

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = dataList[indexPath.row]
        return cell
    }

    @IBAction func reloadDataButtonTapped(_ sender: Any) {
        // データの変更
        dataList.append("新しいデータ")
        // テーブルビューのリロード
        tableView.reloadData()
    }
}

このコードでは、ボタンがタップされた際にデータリストに新しいデータを追加し、その後でテーブルビューのデータをリロードしています。

この例では、「新しいデータ」という文字列をデータリストに追加して、テーブルビューをリロードしています。

コードを実行すると、テーブルビューには初めから3つのデータが表示されていますが、ボタンをタップすることで「新しいデータ」というデータが追加され、テーブルビューにもその新しいデータが表示される動作を確認することができます。

●UITableViewの応用例

UITableViewの基本的な使い方を習得したら、更にその応用例を知ることでアプリをより使いやすく、機能的にすることができます。

ここでは、特によく利用される「Pull to Refresh」と「無限スクロール」の2つの応用例を取り上げ、その実装方法について詳しく解説していきます。

○サンプルコード7：Pull to Refreshの実装

UITableViewにおいて、ユーザーがテーブルの最上部を引っ張ることで、新しいデータをロードする機能を「Pull to Refresh」と言います。

この機能は特にSNSアプリやニュースアプリなど、定期的に最新の情報を取得する必要がある場面でよく利用されます。

このコードでは、UIRefreshControlを使ってPull to Refreshを実装する方法を表しています。

この例では、リフレッシュを行った際にダミーのデータを追加してリフレッシュを終了しています。

import UIKit

class TableViewController: UITableViewController {

    var items = ["アイテム1", "アイテム2", "アイテム3"]
    let refresh = UIRefreshControl()

    override func viewDidLoad() {
        super.viewDidLoad()
        refresh.addTarget(self, action: #selector(refreshData), for: .valueChanged)
        tableView.addSubview(refresh)
    }

    // データの更新
    @objc func refreshData() {
        items.append("新しいアイテム")
        refresh.endRefreshing()
        tableView.reloadData()
    }

    // テーブルのデータソースメソッド...
}

この実装では、UIRefreshControlを初期化し、addTargetメソッドを使ってリフレッシュが行われた際のアクションを設定しています。

具体的には、refreshDataメソッドが呼び出されるようになっており、このメソッド内で新しいデータの追加やリフレッシュの終了などの処理が行われています。

上記のコードを実行すると、UITableViewを上に引っ張るとリフレッシュが開始され、新しいアイテムが追加されることを確認できます。

○サンプルコード8：無限スクロールの実装

無限スクロールは、テーブルの最下部までスクロールした際に、自動的に新しいデータをロードする機能です。

SNSアプリやショッピングアプリで、次々と新しいコンテンツを読み込む際によく使用されます。

このコードでは、UITableViewのスクロール位置を監視し、最下部に到達したら新しいデータをロードする方法を表しています。

この例では、最下部にスクロールするたびに新しいアイテムを10個追加しています。

import UIKit

class InfiniteTableViewController: UITableViewController {

    var items = [String]()
    let maxItems = 100  // 最大アイテム数
    let loadCount = 10  // 一度にロードするアイテム数

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

    func loadMoreData() {
        if items.count >= maxItems { return }

        let moreItems = (1...loadCount).map { "アイテム\($0 + items.count)" }
        items.append(contentsOf: moreItems)

        tableView.reloadData()
    }

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        let distanceFromBottom = contentHeight - offsetY

        if distanceFromBottom < tableView.frame.size.height {
            loadMoreData()
        }
    }

    // テーブルのデータソースメソッド...
}

この実装では、scrollViewDidScrollメソッドを利用してスクロール位置を監視しています。

特定の距離までスクロールが進んだらloadMoreDataメソッドが呼び出され、新しいデータのロードが行われます。

上記のコードを実行すると、UITableViewを下にスクロールしていくと、自動的に新しいアイテムが10個ずつ追加されていきます。

この時、最大で100個のアイテムが表示されるようになっています。

○サンプルコード9：アコーディオン式のセクション展開

UITableViewでセクションをアコーディオン式に展開・収束する機能は、ユーザーにとってわかりやすく、効果的なUIとなります。

下記のサンプルコードでは、セクションヘッダーをタップすることでそのセクションの内容がアコーディオン式で展開・収束する方法を表しています。

import UIKit

class AccordionTableViewController: UITableViewController {

    var sections = ["セクション1", "セクション2", "セクション3"]
    var items: [[String]] = [["1-1", "1-2", "1-3"], ["2-1", "2-2"], ["3-1", "3-2", "3-3"]]
    var expandedSections: [Bool] = [false, false, false]

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

    override func numberOfSections(in tableView: UITableView) -> Int {
        return sections.count
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return expandedSections[section] ? items[section].count : 0
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = items[indexPath.section][indexPath.row]
        return cell
    }

    override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let button = UIButton(type: .system)
        button.setTitle(sections[section], for: .normal)
        button.tag = section
        button.addTarget(self, action: #selector(handleExpandClose), for: .touchUpInside)
        return button
    }

    @objc func handleExpandClose(button: UIButton) {
        let section = button.tag
        expandedSections[section] = !expandedSections[section]

        tableView.reloadSections(IndexSet(integer: section), with: .fade)
    }
}

このコードでは、セクションヘッダーにUIButtonを設定し、そのボタンをタップすることで特定のセクションを展開・収束する動作を制御しています。

セクションの展開・収束の状態はexpandedSections配列で管理しています。

上記のコードを実行すると、UITableView上に3つのセクションが表示され、それぞれのセクションヘッダーをタップするとそのセクション内の項目がアコーディオン式で展開・収束します。

初期状態では、すべてのセクションは収束した状態で表示されます。

○サンプルコード10：マルチセレクト機能の実装

UITableViewで複数のセルを同時に選択することを「マルチセレクト」と言います。

下記のサンプルコードでは、マルチセレクト機能の基本的な実装方法を表しています。

import UIKit

class MultiSelectTableViewController: UITableViewController {

    var items = ["項目1", "項目2", "項目3", "項目4", "項目5"]

    override func viewDidLoad() {
        super.viewDidLoad()
        self.tableView.allowsMultipleSelection = true
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = items[indexPath.row]
        return cell
    }
}

このコードのポイントは、allowsMultipleSelectionプロパティをtrueに設定することです。

これにより、複数のセルを同時に選択することができるようになります。

上記のコードを実行すると、UITableView上に5つの項目が表示されます。

セルをタップすることで選択状態となり、再度タップすることで選択が解除されます。

また、複数のセルを同時に選択することも可能です。

○サンプルコード11：動的なセルの高さの調整

UITableViewのセルの高さは、内容に合わせて動的に変更することが可能です。

例えば、テキストの量や画像のサイズに応じてセルの高さを変更する場面が考えられます。

下記のコードでは、動的にセルの高さを調整する方法を表しています。

import UIKit

class DynamicHeightTableViewController: UITableViewController {

    // テストデータ
    let texts = ["短いテキスト", "やや長めのテキスト。これはサンプルのためのものです。", "非常に長いテキスト。このテキストはサンプルとして使用されています。UITableViewのセルの高さを動的に変更するデモンストレーションのためのものです。"]

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.estimatedRowHeight = 44.0
        tableView.rowHeight = UITableView.automaticDimension
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return texts.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "textCell", for: indexPath)
        cell.textLabel?.text = texts[indexPath.row]
        cell.textLabel?.numberOfLines = 0
        return cell
    }
}

このコードでは、テキストの長さに応じてセルの高さを動的に変更する方法を表しています。

この例では、UITableView.automaticDimensionを使用して、セルの高さを自動的に調整しています。

cell.textLabel?.numberOfLines = 0により、テキストの行数を無制限にして、全てのテキストを表示するようにしています。

実際に上記のコードを実行すると、3つの異なる長さのテキストが表示され、それぞれのテキストに合わせてセルの高さが変わることが確認できます。

○サンプルコード12：検索機能の追加

UITableViewには、ユーザーがデータを簡単に探すことができる検索機能を追加することができます。

下記のコードでは、テーブルビューに検索機能を追加する方法を表しています。

import UIKit

class SearchTableViewController: UITableViewController, UISearchResultsUpdating {

    let data = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape"]
    var filteredData: [String]?
    let searchController = UISearchController(searchResultsController: nil)

    override func viewDidLoad() {
        super.viewDidLoad()

        searchController.searchResultsUpdater = self
        searchController.obscuresBackgroundDuringPresentation = false
        navigationItem.searchController = searchController
        definesPresentationContext = true
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return filteredData?.count ?? data.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "dataCell", for: indexPath)
        let text: String
        if let filteredData = filteredData {
            text = filteredData[indexPath.row]
        } else {
            text = data[indexPath.row]
        }
        cell.textLabel?.text = text
        return cell
    }

    func updateSearchResults(for searchController: UISearchController) {
        if let searchText = searchController.searchBar.text, !searchText.isEmpty {
            filteredData = data.filter { $0.contains(searchText) }
        } else {
            filteredData = nil
        }
        tableView.reloadData()
    }
}

このコードでは、UISearchControllerを使ってUITableViewに検索機能を追加する方法を表しています。

この例では、入力された検索キーワードに合致するデータだけをテーブルビューに表示するようにしています。

上記のコードを実行すると、ナビゲーションバーの上部に検索バーが表示され、キーワードを入力するとそれに合致するデータのみがテーブルビューに表示されることが確認できます。

●注意点と対処法

UITableViewの使い方や応用例を学ぶ前に、注意点とそれに対する対処法を把握しておくことは非常に重要です。

ここでは、UITableViewの使用中に起こりうる問題やその解決策について詳しく解説します。

○セルの再利用の理解

UITableViewは、画面に表示されるセルの数だけセルを生成するわけではありません。

実際には、画面に表示できる数よりもわずかに多いセルを生成し、それを再利用しています。

これにより、パフォーマンスが大幅に向上しています。

このコードではUITableViewの再利用機構を利用してセルを表示しています。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cellIdentifier = "cellIdentifier"
    var cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)
    if cell == nil {
        cell = UITableViewCell(style: .default, reuseIdentifier: cellIdentifier)
    }
    cell!.textLabel?.text = "Row \(indexPath.row)"
    return cell!
}

この例では、dequeueReusableCell(withIdentifier:)メソッドを使って既に存在するセルを再利用しています。

存在しない場合は、新しいセルを作成します。

これにより、スクロールする度に新しいセルを生成することなく、高速にリストをスクロールすることができます。

ただし、この再利用メカニズムは、セルの内容を更新する際に注意が必要です。

再利用されるセルの古いデータが表示されることを防ぐため、必ずセルの内容を更新するようにしてください。

○パフォーマンス最適化のポイント

UITableViewの表示速度やスクロールのスムーズさを維持するためのいくつかのポイントを紹介します。

画像の適切な読み込み：画像を使用する場合、非同期で画像を読み込むことで、UITableViewのスクロールが停止することを避けることができます。
セルの高さの計算：tableView(_:heightForRowAt:)メソッドを使用する際は、計算を高速に行うことが求められます。高さの計算が複雑になる場合は、計算結果をキャッシュするなどの工夫が必要です。
不要なビューの削除：セルに不要なビューやサブビューを追加しないように注意しましょう。余分なビューは描画負荷となります。

これらのポイントを意識することで、UITableViewのパフォーマンスを最適化することができます。

●カスタマイズ方法

UITableViewはiOSアプリ開発において頻繁に使用されるコンポーネントの一つですが、デフォルトの状態だけでなく、デザインや動きなど多岐にわたるカスタマイズが可能です。

○デザインや動きのカスタマイズ方法について

□セルのデザインカスタマイズ

UITableViewのセルのデザインは、Interface Builderを使用することで簡単にカスタマイズできますが、コードでのカスタマイズも可能です。

下記のサンプルコードでは、セルの背景色を変更しています。

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    cell.backgroundColor = .lightGray // セルの背景色をライトグレーに設定
}

このコードでは、tableViewのデリゲートメソッドwillDisplayを使用して、セルの背景色をライトグレーに設定しています。

この例では、全てのセルに対して背景色を設定していますが、indexPathを使用して特定のセルだけのデザインを変更することもできます。

□セルの動きのカスタマイズ

セルのタップ時の動きもカスタマイズすることができます。

下記のサンプルコードでは、セルがタップされたときの背景色をカスタマイズしています。

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let cell = tableView.cellForRow(at: indexPath)
    cell?.selectionStyle = .none // タップ時のハイライトを無効化
    cell?.backgroundColor = .blue // タップ時の背景色を青に設定
}

このコードでは、セルがタップされたときの背景色を青に設定し、同時にタップ時のハイライトを無効化しています。

これにより、セルがタップされたときのユーザーエクスペリエンスをカスタマイズすることができます。