Xây dựng ViewPager2 – Tablayout – Carousel

Introduction

Google đã giới thiệu ViewPager2 phiên bản chính thức từ November 20, 2019. Tuy nhiên gần đây android studio bản mới nó mới @Deprecated nên mình cũng thử chuyển qua dùng.
ViewPager2 là một bản mới được viết lại hoàn toàn để thay thế ViewPager cũ với nhiều điểm yếu.

What New?

ViewPager2 sử dụng RecyclerView, một trong những component được sử dụng nhiều nhất trong Android. Đây là một thay đổi lớn đối với API ViewPager.

Sử dụng tất cả các chức năng của RecyclerView, ViewPager 2 cung cấp những cải tiến sau:

– Hỗ trợ phân trang dọc bằng cách sử dụng LinearLayoutManager. Điều này có nghĩa là bạn có thể dễ dàng chuyển đổi giữa các horizontal and vertical.
– Nó cung cấp hỗ trợ cho các layout từ  right-to-left hoặc RTL.
– Nó hỗ trợ việc sử dụng DiffUtil theo mặc định, vì nó là RecyclerView.

Example

Ở ví dụ này chúng ta sẽ kết hợp một vài thứ như ViewPager2 – Tablayout – Carousel và thêm hiệu ứng transform cho nó,kết quả như sau.

Bắt đầu nào 😀

Project  demo này được code trên android studio 4.1.1 dùng kotlin.

build.gradle nhớ thêm 2 thằng này và upadte plugins nhé các bạn

Step 1: Tạọ model FoodEntity.kt để chứa dữ liệu demo.

Step 2: Cập nhật code layout activity_main.xml

Step 3 : Giờ mình cần 1 cái adapter để đổ dữ liệu vào Viewpager.

Step 3.1 Tạo 1 class CardAdapter.kt y như dùng RecyclerView:

Layout item_food_card.xml

Giờ thử set adapter ở MainActivity.kt xem như nào nào.

Quá đơn giản luôn chúng ta có thể set orientation cho viewPager theo chiều ngang – dọc.

Cách trên là theo dạng RecyclerViewAdapter.

Step 3.2 Giờ mình muốn nó qua dạng FragmentAdapter để có thể xử lý nhiều logic hơn thì như nào?

Tạo 1 FoodCardAdapter.kt sử dụng FragmentStateAdapter.

Tiếp tục tạo 1 FoodCardFragment.kt như là 1 item của recyclerview.

Oke đã xong giờ quay lại MainActivity thử cái Adapter này xem sao.

Kết quả là y như nhau luôn tuỳ theo nhu cầu mà sử dụng nha các bạn.

Step 4: Sử dụng Transformer và Carousel

Để kết hợp nhiều Transforme thì chúng ta sẽ sử dụng: CompositePageTransformer

Code ở trên bao gồm:

  • Margin giữa các item
  • Hiệu ứng alpha khi slide

Tiếp tục tạo hiệu ứng Carousel.

Cái này chúng ta sẽ cần chia ra 2 loại khi dùng RecyclerViewAdapter và FragmentStateAdapter

Nếu dùng theo cách CardAdapter.kt ở trên thì phần code để set hiệu ứng Carousel sẽ như sau:

Tuy nhiên phần transformer này sẽ không hoạt động nếu như bạn dùng FoodCardAdapter.kt

Sau khi research thì mình có đoạn code như sau cho trường hợp trên:

Tuyệt vời ông mặt trời, nó đã hoạt động  <3

Step 5 : Mải mê quá quay lại kết hợp Viewpager2 vào Tablayout nào.

Chúng ta sẽ sử dụng: TabLayoutMediator

Đoạn code ở trên sẽ set title cho các tab.

Nếu bạn muốn lắng nghe sự kiện page change thì sẽ dùng sự kiện bên dưới.

Xong rồi demo nho nhỏ đến đây là kết thúc. 🙂

Source code github.

Nguyễn Linh

Nguyễn Linh

Chia sẻ để cùng tiến bộ...