Diary of Duc

Android – Swipe item trong RecylerView

2019-06-29

Mọi người đã quá quen thuộc với việc swipe để xóa tin nhắn trong các ứng dụng nhắn tin, bài viết này sẽ hướng dẫn cách chúng ta swipe, tạo button và bắt sự kiện trong mỗi item của RecyclerView.

Hoạt động như thế nào

  1. Sử dụng animation cho swipe mỗi item
  2. Dùng ItemTouchHelper cho việc vẽ, swipe back, bắt sự kiện nút Button


Triển khai

Set Animation cho mỗi item

Trong Adapter, ta swipe cho mỗi item từ phải sang trái bằng cách dùng AnimationUtils.
Nếu không muốn swipe từ phải sang trái, xem tại đây.

Item sẽ được swipe, nhưng sẽ mất khỏi màn hình, không thể swipe back. Ta sẽ giải quyết vấn đề này ở bước tiếp theo.

Swipe back, tạo button

Ta cần 1 điểm cho item dừng lại, mình sẽ dùng ItemTouchHelper để bắt vị trí item chạy và cho nó dừng lại.

Attach tới 1 RecyclerView qua id của view.

swipeController chứa một class xử lý khi swipe

* onMove: Phương thức này được gọi khi item đang swipe
* onSwiped: Được gọi khi item đã swipe xong
* onChildDraw: Được gọi khi item đang swipe và cả swipe xong. Đây là nơi ta sẽ vẽ button và bắt sự kiện
* getMovementFlags: Cấu hình swipe back: START, END, TOP, DOWN
Ta đã cấu hình swipe back cho item.


Sau khi item đã swipe và dừng lại, nó cần để lộ 1 button hiện ra. Button Xóa chẳng hạn. Ta đi vẽ nó.

Nó sẽ giống như này:


Bắt sự kiện cho button

Button do ta tự vẽ ra, không có phương thức bắt sự kiện như button của Android. Do vậy ta sẽ tự build sự kiện click cho button ta vẽ.

Với tư tưởng bắt tọa độ ngón tay chạm vào RecyclerView trên màn hình, nếu button đang hiện ra và tọa độ chạm nằm trong tọa độ của 4 cạnh button đó -> button tại item đó được click.

Chúng ta sẽ chỉ cho swipe 1 item tại 1 thời điểm, khi swipe item này, item đã swipe trước đó sẽ phải đóng lại.

Đi bắt sự kiện.

Vậy là đã xong. Mình có viết một project mẫu tại đây.

Tags: android

URL QR