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

この記事からわかること
- SwiftのUIKitでスワイプアクションを実装する方法
- 削除ボタンを実装する方法
- tableView(_:trailingSwipeActionsConfigurationForRowAt:)の使い方
- UISwipeActionsConfigurationクラスとは?
- UIContextualActionクラスとは?
- 背景色や画像に変更するには?
index
[open]
\ アプリをリリースしました /
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
メソッドを使って対象行を視覚的に削除しておきます。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。