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.