Swipe To Delete Row in UITableView

56

Ắt hẳn việc hiển thị 1 danh sách dữ liệu vào UITableView là quá quen thuộc trong việc lập trình app với các iOS Dev. Và việc xoá 1 dòng trong UITableView cũng là 1 thao tác quan trọng mà bạn cần phải biết, phải không?

Trong bài viết này, mình sẽ hướng dẫn các bạn cách “Swipe to Delete” dòng trên UITableView.

Các bước thực hiện của mình như sau:

  1. Swipe 1 dòng trên TableView để hiển thị nút Delete.
  2. Nhấn vào nút Delete sẽ hiển thị thông báo xác nhận.
  3. Sau khi user xác nhận, xoá dữ liệu và cập nhật lại TableView hoặc là huỷ thao tác.

Và để thực hiện các bước trên, giả sử chúng ta có một bảng danh sách công việc cần làm, các bạn có thể tự tạo cho mình project với UITableView và chứa 1 danh sách nào đó hoặc các bạn có thể download Starter Project trên Github của học viện.

First Look Swipe To Delete

1. Swipe

Công việc tiếp theo của chúng ta là sẽ hiển thị nút delete khi mà user vuốt từ phải sang trái (Swipe).

 Simulator Screen Shot Sep 21, 2016, 3.49.26 PM

Để làm được việc đó, chúng ta cần lưu ý vài điều như sau:

View Controller của bạn cần phải adopt tới UITableViewDataSource (Việc này chắc hẳn có thể bỏ qua vì khi đổ dữ liệu cũng cần công việc này 😝)

Tiếp theo, chúng ta sẽ sử dụng 1 func để hiển thị nút Delete khi mà user Swipe 1 dòng nào đó

Công việc tiếp theo của chúng ta là gì? => Chúng ta cần phải biết editingStyle có phải là kiểu Delete hay không?

Ở đây, chúng ta cần lưu lại indexPath của dòng mà user chọn để có thể sử dụng cho việc Delete ở phía sau. Và đôi lúc, user chỉ muốn thử tính năng mà không muốn xoá dòng dữ liệu đã chọn, chúng ta cần phải có 1 thông báo xác nhận lại với user.

 

2. Confirm to Delete

Việc hiển thị 1 thông báo cho việc xoá dữ liệu hết sức cần thiết, vì đôi lúc user chỉ “Mình thích thì mình THỬ BẤM thôi”.

Show Alert Delete Confirm

Để hiển thị được bản thông báo như hình bên trên, chúng ta cần sử dụng class UIAlertController và class UIAlertAction để tạo các nút trên bảng thông báo 

Đoạn code trên đã giúp ta tạo được một bảng thông báo xác nhận nhưng khi nhấn nút chỉ tắt bảng thông báo mà không thực hiện hành động xoá dòng khi nhấn vào button Delete, hoặc là huỷ biến deleteIndexPath khi nhấn vào button Cancel. Chúng ta cần thay đổi 1 chút code cho phần này

Công việc đầu tiên trong cho việc Delete dòng, chúng ta cần chắc chắn rằng biến deleteIndexPath khác nil

Tiếp theo, chúng ta sẽ:

  1. Gọi func beginUpdates() của tableView để báo hiệu rằng chúng ta sẽ cập nhật UI trên tableView.
  2. Chúng ta sẽ cho toDoList loại bỏ phần tử thứ indexPath.row.
  3. Gọi func deleteRows ở indexPath và có hiệu ứng là .fade (Lưu ý rằng, func deleteRows sẽ đòi hỏi chúng ta truyền vào 1 mảng IndexPath nên chúng ta sẽ phải truyền biến indexPath vào trong [] )
  4. Trả biến deleteIndexPath về nil
  5. Gọi func endUpdates()  của tableView để kết thúc quá trình cập nhật UI trên tableView.

Về phần Cancel việc Delete, chúng ta sẽ trả biến deleteIndexPath về nil, và thông báo cho tableView rằng việc editing đã kết thúc

OK, vậy là chúng ta đã hoàn thành công việc xoá dữ liệu trên UITableView. Mình hy vọng sau bài này, các bạn có thể biết về cách xoá dữ liệu trên UITableView cũng như là cách sử dụng UIAlertViewController, UIAlertAction.

Nguồn: IDE Academy tổng hợp