【Swift】TableViewにお気に入りボタンを実装する方法

こんにちは、のっくんです。

今日の記事ではSwiftでお気に入りボタン(トグル)を実装する方法について紹介します。

トグルボタンはon,offの二種類の切り替えができるボタンのことです。

実装イメージは以下の通りです。

タッチすると星マークが赤くなってそれ以外は灰色になるように作っていきます。

TableViewCellの実装

ボタンを選択して、control+ドラッグ&ドロップでコードと接続します。

Outlet、Actionをそれぞれ追加します。

MyTableViewCell.swift

protocol ArticleCellDelegate {
    func reloadCell(index: IndexPath)
}

class MyTableViewCell: UITableViewCell {
    
    @IBOutlet weak var favorateButton: UIButton!
    
    var delegte: ArticleCellDelegate?
    var index:IndexPath!
        
    @IBAction func touch(_ sender: Any) {
        self.item.isFavorite = !self.item.isFavorite
        delegte?.reloadCell(index: index)
        
    }
}

Actionはボタンがタッチされた時に呼び出される関数ですが、

1. お気に入り状態の切り替え
2. セルの更新

を行うようにしています。

セルの更新はTableViewCellではできませんので、ViewControllerでやってもらうように委任（デリゲート）します。

ViewControllerの実装

UIの動的な処理は基本的にはViewControllerが行います。

ここでは星の色を変えたり、セルを更新するような処理を書いていきます。

MyViewController.swift

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! MyTableViewCell
     
        cell.delegte = self
        cell.index = indexPath
        
        cell.favorateButton.tintColor = row_item.isFavorite ? UIColor.red : .lightGray
        
        return cell
    }

ボタンの状態によって、赤色かグレーか表示するようにしています。

同じファイルの下の方に以下の処理を実装しました。

    func reloadCell(index: IndexPath) {
        tableView.reloadRows(at: [index], with: .fade)
    }

セルを更新する処理です。

星マークがタッチされたセルのみを更新するようにインデックスを引数にしています。

参考

今回のコードを実装するに当たり以下のYoutubeを参考にしています。