iT邦幫忙

2025 iThome 鐵人賽

DAY 20
0
生成式 AI

Swift一下就會了系列 第 20

Day 20 留言板 5

  • 分享至 

  • xImage
  •  

昨天我們完成了留言的讀取與排序功能,今天要讓留言可以左滑刪除右滑編輯

左滑刪除留言

當使用者在某列左滑時,可以刪除該筆留言。

    //左滑表格動作
    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)
    }

編輯完成後,不僅更新留言內容,也同時更新該筆留言的時間,並重新排序。

結語

今天我們為留言板加入了左滑刪除右滑編輯的互動功能,讓使用者可以更方便地管理留言。

只剩下一些收尾的動作了喔。


上一篇
Day 19 留言板 4
系列文
Swift一下就會了20
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言