Swipe Actions trong UITableViewCell

Chào bạn, bài viết hôm nay sẽ là một tutorial nhỏ hướng dẫn về Swipe Actions trong UITableViewCell.

Nếu bạn chưa biết viết TableView thì có thể xem qua các link sau:

• • Basic iOS tutorial : Table View
  • Basic iOS tutorial : Custom Cell

Chúng ta quay lại chủ đề chính của bài viết. Như bạn đã biết đôi lúc chúng ta cần nhiều hơn các sự kiện cho một cell của TableView. Nhưng mà bạn chỉ có didSelectedCellForRow, quá ít cho cuộc tình. Và nhiều khi, giao diện của bạn lại không đủ chỗ cho một loạt các button.

Giải pháp sẽ là dùng Swipe Actions trong UITableViewCell, để hiện ra các tính năng ẩn dưới Cell.

Chuẩn bị

• iOS 13
• Xcode 11.0
• Swift 5.1

Để bắt đầu, bạn chỉ cần tạo 1 project với iOS và Swift là được. Không cần quá công phu. Sau đó bạn Tạo một UITableView đơn giản là OKE.

1. Swipe Action trong UITableViewCell

Trước tiên, chúng ta có các loại sự kiện Swipe Action trong UITableViewCell.

1.1. Edit Row

Swipe để hiển thị chế độ edit của một cell. Thường sử dụng là delete

Chúng được sử dụng thông qua việc khai báo 2 function của protocol UITableViewDataSource và Deleagate. Phòng khi bạn đã quên thì code của nó như sau:

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    // Return YES if you want the specified item to be editable.
    return YES;
}

// Override to support editing the table view.
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        //add code here for when you hit delete
    }    
}

Nhiệm vụ của bạn rất đơn giản là dùng tay vuốt từ phải sang trái trên cell, thế là nút delete sẽ hiện ra. Nếu lỡ tay vuốt mạnh quá thì nó sẽ đi luôn. Và xem như đã thực hiện 1 tác vụ.

Và khi bạn muốn nhiều hơn 1 cái nút thì Apple cũng không phụ lòng bạn. Nhưng chúng ta lại chia ra 2 thời kỳ:

1.2. Edit Actions (iOS 8 )

Với loại này, bạn có thể tạo một cách nhanh chóng, thậm chí khá là đơn giản nữa. Bạn sẽ sử dụng class UITableViewRowAction, để khai báo các action mà bạn cần thêm vào.

Xem code ví dụ sau:

override func tableView(_ tableView: UITableView,
  editActionsForRowAt indexPath: IndexPath)
  -> [UITableViewRowAction]? {

  let deleteTitle = NSLocalizedString("Delete", comment: "Delete action")
  let deleteAction = UITableViewRowAction(style: .destructive,
    title: deleteTitle) { (action, indexPath) in
    self.dataSource?.delete(at: indexPath)
  }

  let favoriteTitle = NSLocalizedString("Favorite", comment: "Favorite action")
  let favoriteAction = UITableViewRowAction(style: .normal,
    title: favoriteTitle) { (action, indexPath) in
    self.dataSource?.setFavorite(true, at: indexPath)
  }
  favoriteAction.backgroundColor = .green
  return [favoriteAction, deleteAction]
}

Kết quả ra như sau:

Cũng đẹp phải không nào, nhưng mà tiếc là iOS 8 đã quá cũ rồi. Chúng ta lại tiếp tục sang cách mới hơn xí.

1.3. Swipe Actions (iOS 11)

Một sự cải tiến lớn hơn nhiều, giúp bạn có thể vuốt cả 2 hướng. Với:

• trailing là từ phải sang trái
• leading là từ trái sang phải

Các class liên quan tới:

• UIContextualAction giúp custom các action. Bạn có thể handler trực tiếp, thêm các ảnh và màu sắc
• UISwipeActionsConfiguration giúp nhóm các actions lại và return về cho Tableview.

Các function bạn cần handle như sau:

// trailing
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? { 
    //....
}

// leading
func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    //....
}

2. Simple Action

Tiếp theo, chúng ta bắt tay vào tạo 1 swipe action đơn giản nào. Đầu tiên bạn implement thêm function trailingSwipeActionsConfigurationForRowAt. Xem đoạn code sau:

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    
    // delete
    let delete = UIContextualAction(style: .normal, title: "Delete") { (action, view, completionHandler) in
      print("Delete: \(indexPath.row + 1)")
      completionHandler(true)
    }
 
    // swipe
    let swipe = UISwipeActionsConfiguration(actions: [delete])
    
    return swipe
    
  }

Trong đó:

• delete là action chúng ta khai báo với title và style
• Sự kiện nhận được khi thao tác thì gọi closure với các tham số action, view, completion
• Chú ý completion để kết thúc tác vụ và update giao diện trên TableView

Kết quả như sau khi bạn vuốt từ phải sang trái

Tiếp tục, bạn thêm một ít màu mè vào cho đẹp. Tham khảo đoạn code sau:

let delete = UIContextualAction(style: .normal, title: "Delete") { (action, view, completionHandler) in
      print("Delete: \(indexPath.row + 1)")
      completionHandler(true)
    }

delete.image = UIImage(systemName: "trash")
delete.backgroundColor = .red

Kết quả như sau:

3. Trailing Swipe

Đây là tác vụ khi người dùng vuốt từ phải sang trái. Như đã được đề cập ở các phần trên thì chúng ta có thể thêm nhiều action. Tham khảo đoạn code sau:

  func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    
    // delete
    let delete = UIContextualAction(style: .normal, title: "Delete") { (action, view, completionHandler) in
      print("Delete: \(indexPath.row + 1)")
      completionHandler(true)
    }
    delete.image = UIImage(systemName: "trash")
    delete.backgroundColor = .red
    
    // share
    let share = UIContextualAction(style: .normal, title: "Share") { (action, view, completionHandler) in
      print("Share: \(indexPath.row + 1)")
      completionHandler(true)
    }
    share.image = UIImage(systemName: "square.and.arrow.up")
    share.backgroundColor = .blue
    
    // download
    let download = UIContextualAction(style: .normal, title: "Download") { (action, view, completionHandler) in
      print("Download: \(indexPath.row + 1)")
      completionHandler(true)
    }
    download.image = UIImage(systemName: "arrow.down")
    download.backgroundColor = .green
    
    
    // swipe
    let swipe = UISwipeActionsConfiguration(actions: [delete, share, download])
    
    return swipe
    
  }

Trong đó, mình sử dụng 3 action (delete, share và download) nằm ẩn trong cell. Khi nhận được sự kiện vuốt từ phải sang trái, thì chúng sẽ xuất hiện. Xem kết quả như sau:

4. Leading Swipe

Bạn sẽ khá là thích thú khi có thể làm điều ngược lại là vuốt từ trái sang phải. Woà, lúc này, chúng ta có thể tiết kiện đi khá nhiều diện tích trên cell. Các tính năng được ẩn đi từ 2 phái của cell.

Bạn tham khảo đoạn code sau:

func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    // favorite
    let favorite = UIContextualAction(style: .normal, title: "favorite") { (action, view, completionHandler) in
      print("favorite: \(indexPath.row + 1)")
      completionHandler(true)
    }
    favorite.image = UIImage(systemName: "suit.heart.fill")
    favorite.backgroundColor = .systemPink
    
    // profile
    let profile = UIContextualAction(style: .normal, title: "profile") { (action, view, completionHandler) in
      print("profile: \(indexPath.row + 1)")
      completionHandler(true)
    }
    profile.image = UIImage(systemName: "person.fill")
    profile.backgroundColor = .yellow
    
    // report
    let report = UIContextualAction(style: .normal, title: "report") { (action, view, completionHandler) in
      print("report: \(indexPath.row + 1)")
      completionHandler(true)
    }
    report.image = UIImage(systemName: "person.crop.circle.badge.xmark")
    report.backgroundColor = .lightGray
    
    
    // swipe
    let swipe = UISwipeActionsConfiguration(actions: [profile, favorite, report])
    
    return swipe
  }

Xem kết quả như sau:

OKAY! Qua vài đường cơ bản thì bạn có thể sử dụng thêm nhiều actions cho cell của bạn. Không lo việc ảnh hưởng tới giao diện và không làm thay đổi cấu trúc re-useable của TableView.

Mình xin kết thúc bài hướng dẫn này tại đây. Và bạn có thể xem lại bài hướng dẫn thông qua video demo. Ngoài ra, bạn có thể checkout code tại đây.

Tạm Kết

• Các loại Swipe Actions trong UITableViewCell
• Tạo và custom một Action
• Sử dụng được 2 sự kiện vuốt (trailing & leading)
• Ẩn đi và sử dụng được nhiều tính năng hơn

Nếu thay hay thì like, share và subscribe channel … để nhiều người cùng theo dõi. Cảm ơn bạn đã đọc bài viết này!

Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!