昨天我們完成了留言的讀取與排序功能,今天要讓留言可以左滑刪除和右滑編輯。
當使用者在某列左滑時,可以刪除該筆留言。
//左滑表格動作
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
// 定義一個刪除的動作,當使用者左滑時會顯示 "刪除" 選項
let deleteAction = UIContextualAction(style: .destructive, title: "刪除") { [weak self] (_, _, completionHandler) in
guard let self = self else { return }
let message = self.messageArray[indexPath.row]
self.deleteMessage(message, at: indexPath)
completionHandler(true)
}
deleteAction.backgroundColor = .red // 顯示紅色刪除按鈕
// 將刪除動作加入配置中
let configuration = UISwipeActionsConfiguration(actions: [deleteAction])
// 設定當使用者完全滑動時,自動執行第一個動作(刪除)
configuration.performsFirstActionWithFullSwipe = true
return configuration
}
這裡透過 UIContextualAction
建立一個刪除按鈕,當用戶左滑並點擊時,會呼叫 deleteMessage
來刪除資料。
func deleteMessage(_ message: MessageBoard, at indexPath: IndexPath) {
let alertController = UIAlertController(title: "刪除", message: "確定刪除嗎", preferredStyle: .alert)
// 確定刪除
let deleteAction = UIAlertAction(title: "確定", style: .default) {
[weak self] _ in
// 初始化 Realm 資料庫
let realm = try! Realm()
// 在 Realm 中寫入變更,刪除該訊息
try! realm.write {
realm.delete(message)
}
self?.messageArray.remove(at: indexPath.row) // 從陣列移除
self?.tbvData.deleteRows(at: [indexPath], with: .fade) // 更新畫面
}
let cancelAction = UIAlertAction(title: "取消", style: .cancel,
handler: nil)
alertController.addAction(deleteAction)
alertController.addAction(cancelAction)
present(alertController, animated: true, completion: nil)
}
這裡使用 realm.write
來刪除資料庫的內容,並更新 TableView
以即時反映變化。
如果使用者右滑某列,可以進行留言內容的修改。
// 右滑表格動作
func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
// 定義一個編輯的動作,當使用者右滑時會顯示 "編輯" 選項
let editAction = UIContextualAction(style: .normal, title: "編輯") {
[weak self] (_, _, completionHandler) in
// 使用 weak self 防止循環引用
guard let self = self else { return }
let message = self.messageArray[indexPath.row]
self.editMessage(message, at: indexPath)
completionHandler(true)
}
editAction.backgroundColor = .blue // 顯示藍色編輯按鈕
let configuration = UISwipeActionsConfiguration(actions: [editAction])
configuration.performsFirstActionWithFullSwipe = true
return configuration
}
//編輯訊息
func editMessage(_ message: MessageBoard, at indexPath: IndexPath) {
let alertController = UIAlertController(title: "編輯", message: nil, preferredStyle: .alert)
alertController.addTextField {
textField in
textField.text = message.content
}
let saveAction = UIAlertAction(title: "保存", style: .default) { [weak self] _ in
guard let newContent = alertController.textFields?.first?.text, !newContent.isEmpty else { return }
// 初始化 Realm 資料庫
let realm = try! Realm()
// 在 Realm 中寫入變更,更新訊息的內容和當前時間
try! realm.write {
message.content = newContent
message.currentTime = self?.getSystemTime() ?? ""
}
self?.tbvData.reloadRows(at: [indexPath], with: .automatic)
self?.sortMessages()
self?.tbvData.reloadData()
}
let cancelAction = UIAlertAction(title: "取消", style: .cancel, handler: nil)
alertController.addAction(saveAction)
alertController.addAction(cancelAction)
present(alertController, animated: true, completion: nil)
}
編輯完成後,不僅更新留言內容,也同時更新該筆留言的時間,並重新排序。
今天我們為留言板加入了左滑刪除與右滑編輯的互動功能,讓使用者可以更方便地管理留言。
只剩下一些收尾的動作了喔。