Android

Xử Lý Animation Trong RecyclerView

Giới thiệu

Bài viết trước tôi đã giới thiệu Sử dụng RecyclerView trong Android. Ở bài viết trước tôi có đề cập tới ItemAnimator giúp chúng ta có thể xử lý animation khi chúng ta Add hoặc Remove một item ra khỏi RecyclerView. Vậy các sử dụng ItemAnimator như thế nào chúng ta hãy cùng nhau tìm hiểu trong bài viết này.Tôi tin rằng qua bài viết này các bạn có thể xử lý Animation trong RecylerView một cách đẹp mắt và chuyên nghiệp.

Tổng quan về ItemAnimator

ItemAnimator: Là thành phần hỗ trợ animation khi chúng ta add hay remove một item ra khỏi RecyclerView. Có các class chính sau:

ItemAnimator: Là class đại diện, khung sườn của animation trong RecyclerView.

SimpleItemAnimator: class wrapper lại ItemAnimator.

DefaultItemAnimtor: class xử lý animtion mặc định sử dụng trong RecyclerView.

Chúng ta có thể viết lại class xử lý animation bằng cách extends lại class SimpleItemAnimator.

Để set ItemAnimator cho ReyclerView đơn giản là chúng ta sử dụng phương thức

Tuy nhiên chỉ set như vậy thì chưa đủ mà chúng ta phải tạo custom Adapter và gọi notify đúng trường hợp ứng với các thao tác add và remove item. Vấn đề này sẽ được bàn luận ở dưới đây

Notify Adapter xử lý Animation

Không giống như ListView khi chúng ta có thay đổi về mặt data thì phải gọi notifyDataSetChanged để render lại ListView. Thì ReyclerView có một số điểm khác như sau:

Gọi notify đối với tại vị trí thay đổi bằng các phương thức

notifyItemChanged(int) Notify item tại vị trí position nếu có thay đổi. Phương thức này cũng sử dụng nếu bạn muốn thực hiện animation khi item changed.
notifyItemInserted(int)  Notify nếu bạn insert một item tại vị trí position. Phương thức này cũng được sử dụng nếu bạn muốn thực hiện animation khi add một item vào RecyclerView
notifyItemRemoved(int)  Notify khi bạn remove một item tại vị trí position. Phương thức này cũng được sử dụng nếu bạn muốn thực hiện animation khi remove một item ra khỏi RecyclerView.
notifyItemRangeChanged(int, int)  Notify những item thay đổi trên một miền từ fromPosition. Phương thức này cũng được sử dụng nếu bạn muốn xử lý animation những item changed.
notifyItemRangeInserted(int, int)  Notify các item được insert vào từ fromPosition. Phương thức này cũng được sử dụng nếu bạn muốn xử lý animation những item được insert.
notifyItemRangeRemoved(int, int)  Notify các item remove ra khỏi RecyclerView từ fromPosition. Phương thức này cũng được sử dụng nếu bạn muốn xử lý animation những item được removed.

Ngoài ra RecyclerView cũng có phương thức notifyDataSetChanged giống như ListView. Tuy nhiên phương thức này sẽ không xảy ra animation.

Ví dụ như sau:

Khi bạn add 1 item vào Adapter

Hay

Remove một item

Hay

Change một item

Việc sử dụng ItemAnimator đơn giản là chúng ta:

+ set ItemAnimator cho RecyclerView thông qua phương thức setItemAnimator

+ Viết custom Adapter sử dụng những phương thức notify đã giới thiệu ở trên.

Bây giờ chúng ta cùng đi vào phần thực hành:

Tổng qua về ứng dụng như sau:

  • Một button dùng để thực hiện thêm item vào adapter để thực hiện animation add.
  • Khi click và item thì sẽ thực hiện animation change trên item đó.
  • Khi giữ item sẽ thực hiện animation remove trên item đó.

File main_acitivity.xml

File MainActivity.java

  • Button btnAddItem sẽ add một item có nội dung là “new item” và Adapter.
  • Phương thức scrollToPosition sẽ di chuyển đến vị trí mà chúng ta vừa add item
  • Nhớ là set ItemAnimator cho RecyclerView.

Lớp CustomAdapter.java

Với row của 1 item (item_row.xml) có nội dung

Kết quả chúng ta sẽ thấy như video Demo dưới đây:

Vì chúng ta sử dụng DefaultAnimator nên Animation sẽ như sau:

  • Animation Added: Thực hiện thay đổi Alpha của itemView từ 0 đến 1:
  • Animation Removed: Thực hiện thay đổi giá trị Alpha của itemView từ 1 về 0.
  • Animation Changed: Thực hiện Animation từ 1 về 0 và sau đó set Animation từ 0 đến 1 để thay đổi item.

Đó là cách mà DefaulItemAnimator xử lý. Còn nếu bạn muốn Animation theo ý bạn thì phải viết lại Animation bằng cách extends từ SimpleItemAnimator. Tuy nhiên tôi muốn giới thiệu cho bạn một thư viện cung cấp cho các bạn nhiều Animation hơn. Source code của thư viện này được public ở trên github: https://github.com/wasabeef/recyclerview-animators

Nếu bạn nào có hứng thú muốn tìm hiểu cách viết ItemAnimator có thể liên hệ mình để có thể trao đổi chi tiết hơn.

Source code ItemAnimatorReyclerView

Kết luận

Qua những bài viết về ListView và ReyclerView tôi hy vọng những bài viết sẽ giúp các bạn một phần nào đó trong học tập cũng như công việc.

Giáo dục là vũ khí mạnh nhất mà người ta có thể sử dụng để thay đổi cả thế giới.

N.Mandela

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.