Swipe Actions trong UITableViewCell

Giới thiệu

Swipe actions trong UITableViewCell là một tính năng hữu ích cho phép người dùng thực hiện các hành động nhanh chóng như xóa, chỉnh sửa, hoặc đánh dấu một mục trong danh sách. iOS cung cấp các API tiện lợi để tùy chỉnh và triển khai swipe actions trong ứng dụng của bạn. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách tạo và tùy chỉnh swipe actions trong UITableViewCell.

Các bước thực hiện

1. Cài đặt UITableView và UITableViewCell

Đầu tiên, chúng ta cần thiết lập một UITableView và các UITableViewCell cơ bản.

import UIKit class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { let tableView = UITableView() var items = ["Item 1", "Item 2", "Item 3"] override func viewDidLoad() { super.viewDidLoad() tableView.frame = self.view.bounds tableView.dataSource = self tableView.delegate = self tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell") self.view.addSubview(tableView) } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) cell.textLabel?.text = items[indexPath.row] return cell }
}

2. Thêm Swipe Actions cho UITableViewCell

Chúng ta sẽ sử dụng phương thức tableView(_:trailingSwipeActionsConfigurationForRowAt:) để thêm các hành động swipe.

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { // Tạo hành động xóa let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in self.items.remove(at: indexPath.row) tableView.deleteRows(at: [indexPath], with: .automatic) completionHandler(true) } deleteAction.backgroundColor = .red // Tạo hành động chỉnh sửa let editAction = UIContextualAction(style: .normal, title: "Edit") { (action, view, completionHandler) in // Thực hiện hành động chỉnh sửa completionHandler(true) } editAction.backgroundColor = .blue let configuration = UISwipeActionsConfiguration(actions: [deleteAction, editAction]) return configuration
}

3. Thêm Swipe Actions cho bên trái của UITableViewCell

Ngoài việc thêm hành động swipe ở bên phải, chúng ta cũng có thể thêm hành động ở bên trái bằng phương thức tableView(_:leadingSwipeActionsConfigurationForRowAt:).

func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { // Tạo hành động yêu thích let favoriteAction = UIContextualAction(style: .normal, title: "Favorite") { (action, view, completionHandler) in // Thực hiện hành động yêu thích completionHandler(true) } favoriteAction.backgroundColor = .orange let configuration = UISwipeActionsConfiguration(actions: [favoriteAction]) return configuration
}

4. Tùy chỉnh UI của Swipe Actions

Chúng ta có thể tùy chỉnh màu sắc và hình ảnh của các hành động swipe.

let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in self.items.remove(at: indexPath.row) tableView.deleteRows(at: [indexPath], with: .automatic) completionHandler(true)
}
deleteAction.backgroundColor = .red
deleteAction.image = UIImage(systemName: "trash") let editAction = UIContextualAction(style: .normal, title: "Edit") { (action, view, completionHandler) in // Thực hiện hành động chỉnh sửa completionHandler(true)
}
editAction.backgroundColor = .blue
editAction.image = UIImage(systemName: "pencil")

Ví dụ đầy đủ

Dưới đây là ví dụ đầy đủ của việc cài đặt swipe actions trong UITableViewCell.

import UIKit class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate { let tableView = UITableView() var items = ["Item 1", "Item 2", "Item 3"] override func viewDidLoad() { super.viewDidLoad() tableView.frame = self.view.bounds tableView.dataSource = self tableView.delegate = self tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell") self.view.addSubview(tableView) } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return items.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) cell.textLabel?.text = items[indexPath.row] return cell } func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in self.items.remove(at: indexPath.row) tableView.deleteRows(at: [indexPath], with: .automatic) completionHandler(true) } deleteAction.backgroundColor = .red deleteAction.image = UIImage(systemName: "trash") let editAction = UIContextualAction(style: .normal, title: "Edit") { (action, view, completionHandler) in // Thực hiện hành động chỉnh sửa completionHandler(true) } editAction.backgroundColor = .blue editAction.image = UIImage(systemName: "pencil") let configuration = UISwipeActionsConfiguration(actions: [deleteAction, editAction]) return configuration } func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { let favoriteAction = UIContextualAction(style: .normal, title: "Favorite") { (action, view, completionHandler) in // Thực hiện hành động yêu thích completionHandler(true) } favoriteAction.backgroundColor = .orange favoriteAction.image = UIImage(systemName: "star") let configuration = UISwipeActionsConfiguration(actions: [favoriteAction]) return configuration }
}

Kết luận

Swipe actions trong UITableViewCell cung cấp một cách trực quan và dễ dàng để người dùng tương tác với danh sách dữ liệu. Bằng cách sử dụng các phương thức và API mà iOS cung cấp, bạn có thể tùy chỉnh và mở rộng các hành động này để phù hợp với nhu cầu của ứng dụng. Hy vọng bài viết này giúp bạn hiểu rõ hơn về cách triển khai và sử dụng swipe actions trong UITableViewCell.