2022/10/18

【Swift UIKit】UITableViewでスワイプアクションで削除ボタンの実装方法！

この記事からわかること

SwiftのUIKitでスワイプアクションを実装する方法
削除ボタンを実装する方法
tableView(_:trailingSwipeActionsConfigurationForRowAt:)の使い方
UISwipeActionsConfigurationクラスとは？
UIContextualActionクラスとは？
背景色や画像に変更するには？

index

[open]

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

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

posted withアプリーチ

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

スワイプアクションの実装方法

リスト表示されたセルをスワイプした際に処理を実行するためにはUITableViewDelegateプロトコルに準拠させtableView(_:trailingSwipeActionsConfigurationForRowAt:)メソッドの中に記述します。デリゲートメソッドなので処理の呼び出しは内部的に(スワイプしたら自動的に)行われます。

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
      let normalAction = UIContextualAction(style: .normal, title: "Test") { (action, view, completionHandler) in
          print("ノーマルアクション")
      }
      let configuration = UISwipeActionsConfiguration(actions: [normalAction])
      return configuration
  }

公式リファレンス：tableView(_:trailingSwipeActionsConfigurationForRowAt:)

optional func tableView(
    _ tableView: UITableView,
    trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath
) -> UISwipeActionsConfiguration?

このメソッドは行の右端にスワイプアクションを保持したボタンを表示するメソッドです。スワイプアクションはUISwipeActionsConfiguration型で返します。

左端に表示させたい場合はtableView(_:leadingSwipeActionsConfigurationForRowAt:)メソッドになります。

optional func tableView(
    _ tableView: UITableView,
    leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath
) -> UISwipeActionsConfiguration?

UISwipeActionsConfigurationクラス

公式リファレンス：

UISwipeActionsConfigurationはスワイプアクションをUIContextualAction型のセットとして保持するクラスです。最終的に返すのはこのクラスですが処理1つ1つはUIContextualAction型で定義していくことになります。

UIContextualActionで処理を定義

UIContextualActionクラスのイニシャライザは以下のようになっています。

 init(
    style: UIContextualAction.Style,
    title: String?,
    handler: @escaping UIContextualAction.Handler
)

style：アクションボタンのスタイル
title：アクションボタンのタイトル
handler：実行する処理を持つcompletionHandler

UIContextualAction.Style

スワイプ時に表示されるボタンのデザインはUIContextualAction.Style型で指定します。用意されているのはnormalとdestructiveです。

normalを指定すると灰色のボタンがdestructiveを指定すると赤色のボタンが実装されます。

カスタマイズする

表示されているボタンのデザインはカスタマイズすることも可能です。UIContextualActionの背景色を変えるにはbackgroundColorプロパティを画像を表示させるにはimageプロパティに値を格納します。

背景色を変更する

normalAction.backgroundColor = .orange

画像を表示する

destructiveAction.image = UIImage(named: "iphone")

実例：UITableViewのデータを削除する

実際にUITableViewで表示しているデータを削除するボタンを実装してみます。今回はデータの管理をRealmを使用している場合を想定しています。

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let destructiveAction = UIContextualAction(style: .destructive, title: "") { (action, view, completionHandler) in
            let result = self.locatorList[indexPath.row]
            try! self.realm.write{
                self.realm.delete(result)
            }
            tableView.deleteRows(at: [indexPath], with: .automatic)
            completionHandler(true)
        }
        destructiveAction.image = UIImage(systemName: "trash.fill")
        let configuration = UISwipeActionsConfiguration(actions: [destructiveAction])
        return configuration
    }

削除ボタン押下後の処理の中でRealmのデータベース操作を行います。その後でdeleteRowsメソッドを使って対象行を視覚的に削除しておきます。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Swift