客製表格(table) 的 swipe action

在 iOS 11，終於可以擺脫第三方套件了，只要定義 UITableViewDelegate 的 tableView(_:trailingSwipeActionsConfigurationForRowAt:) 和 tableView(_:leadingSwipeActionsConfigurationForRowAt:)，即可實現表格左滑和右滑時顯示多個可點選的 button。

透過定義以下 UITableViewDelegate 的 function 實現。

@available(iOS 11.0, *)
optional public func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
@available(iOS 11.0, *)
optional public func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?

預設的左滑 delete

override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    return nil
}

客製左滑顯示的 button。

override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let likeAction = UIContextualAction(style: .normal, title: "一點點動心") { (action, view, completionHandler) in
            print("一點點動心")
            completionHandler(true)
        }
        let deeploveAction = UIContextualAction(style: .normal, title: "深愛") { (action, view, completionHandler) in
            print("深愛")
            completionHandler(true)
        }
        return UISwipeActionsConfiguration(actions: [likeAction, deeploveAction])
}

注明: 記得要呼叫 completionHandler，否則點選 button 將，cell 不會回到正常顯示的狀態。

客製滑動後，顯示的 button 的背景顏色和圖片。

deeploveAction.backgroundColor = UIColor.orange
deeploveAction.image = UIImage(named: "Download")

防止滑到底觸發第一個 button 的 action

將 performsFirstActionWithFullSwipe 設為 false。

let configuration = UISwipeActionsConfiguration(actions: [likeAction, deeploveAction])
configuration.performsFirstActionWithFullSwipe = false

客製右滑顯示的 button。

override func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
   let notLikeAction = UIContextualAction(style: .normal, title: "一點點不動心") { (action, view, completionHandler) in
      print("一點點不動心")
      completionHandler(false)
    }
    let noFeelingAction = UIContextualAction(style: .normal, title: "完全沒感覺") { (action, view, completionHandler) in
       print("完全沒感覺")
       completionHandler(true)
    }
    return UISwipeActionsConfiguration(actions: [notLikeAction, noFeelingAction])
}

作品集

閱讀 guard & guard let 相關說明 + 客製表格(table) 的 swipe action