Tạo ImageSlider trong ứng dụng Android với ViewPager

ImageSlider khá phổ biến trong thế giới Web. Và với ứng dụng Android, bạn cũng có thể thực hiện điều tương tự. Vì chúng ta sẽ cho phép người dùng vuốt sang trái hoặc phải để chuyển sang ảnh trước hoặc sau, và ViewPager cung cấp chính xác khả năng đó, nên chắc chắn chúng ta sẽ dùng nó luôn thay vì tự code một View. Đồng thời, chúng ta sẽ tạo một ImageSliderAdapter extends trực tiếp PagerAdapter, thay vì dùng Fragment(State)PagerAdapter và đặt mỗi hình ảnh vào trong một Fragment. Và như thường lệ, xin mời các bạn tạo một Android Project mới với Android Studio và xin quyền INTERNET trong AndroidManifest. Ngoài ra, chúng ta sẽ load ảnh từ unsplash.com thông qua thư viện Glide. Nếu bạn chưa biết cách tích hợp Glide vào project, hãy thêm các dòng sau vào tập tin build.gradle module app:

Trong trường hợp các bạn muốn tạo ImageSlider trong Flutter, hãy tham khảo bài viết này.

1. Tạo ImageSlider bằng ViewPager và PagerAdapter:

Đầu tiên các bạn tạo một Activity chứa một ViewPager. Và tốt nhất, bạn nên bọc nó trong một FrameLayout. Dưới đây là code đơn giản của tôi:

Và chúng ta tiến hành các thao tác gán View khá quen thuộc trong tập tin MainActivity.java:

Bây giờ, chúng ta sẽ dựng một class ImageSliderAdapter. Class này có một constructor nhận tham số là một String[] urls chính là các URLs trỏ tới địa chỉ các ảnh mà chúng ta sẽ cho hiển thị lên ViewPager. Nếu bạn nào muốn dùng với Fragment, bạn chỉ cần extends Fragment(State)PagerAdapter và chỉ định contentView cho Fragment là xong. Còn trong bài viết này, tôi sẽ hướng dẫn các bạn dùng trực tiếp ImageView trên mỗi trang của ViewPager thay vì gián tiếp qua một Fragment. Quay trở lại code Java, bạn tạo class ImageSliderAdapter extends PagerAdapter và override 2 abstract methods getCountisViewFromObject sau khi đã thiết lập constructor như bên dưới:

Tạm thời, class ImageSliderAdapter của chúng ta đã không còn lỗi. Và bây giờ, chúng ta sẽ định nghĩa giao diện mỗi trang của ViewPager bằng cách override tiếp hàm Object instantiateItem(ViewGroup container, int position). Hàm này tương tự như BaseAdapter#getView(int position, View convertView, ViewGroup parent):

Tuy nhiên, bấy nhiêu đó là chưa đủ, vì ta còn phải override tiếp hàm destroyView(ViewGroup container, int position, Object object) nữa. Và tham số thứ ba, Object, chính là giá trị mà instantiateItem(ViewGroup container, int position) return ứng với position tương ứng.

Vậy là xong. Cuối cùng, bạn thêm tạo một instance của ImageSliderAdapter và gán vào cho ViewPager imageSlider trong MainActivity, và đừng quên các URLs trỏ tới các ảnh. Dưới đây là phần code của tôi bao gồm luôn một số ảnh đến từ unsplash.com:

Bây giờ, có lẽ bạn đang thắc mắc là tại sao instantiateItem lại có class là Object thay vì trực tiếp là một View. Đơn giản là PagerAdapter đảm bảo cho bạn extend tùy ý. Ở đây, tôi dùng View nên sẽ return View, nhưng đối với Fragment(State)PagerAdapter, chúng sẽ return android.app.Fragment đối với thư viện Support v13, hay android.support.v4.app.Fragment trong thư viện Support v4. Và trong trường hợp khác, bạn lại có thể wrap một View trong một class khác do bạn tùy ý đặt. Do đó, để đảm bảo cho mọi trường hợp, instantiateItem là Object. Tuy nhiên, bao giờ bạn cũng phải thao tác với View dù return bất cứ instance của class nào. Đơn giản, vì ViewPager có nhiệm vụ hiển thị nội dung, và đương nhiên, phải “dính dáng” tới View.

2. Tạo dot indicator:

Nếu tiếng Anh của bạn chưa tốt, thì dot indicator có nghĩa là các chấm chỉ thị việc imageSlider của bạn (tức ViewPager) đang hiển thị nội dung ở vị trí nào (position). Việc tạo chúng cũng không có gì quá phức tạp. Đầu tiên, trong acitivity_main.xml, bạn tạo tiếp một LinearLayoutlayout_gravitybottom|center, và đây là lí do tôi đặt ViewPager nằm trong một FrameLayout ngay từ đầu.

Bây giờ bạn không tiếp tục đặt thêm vài View con bên trong LinearLayout, vì bạn luôn phải đảm bảo số lượng các chấm phải đúng bằng số lượng các item trong ImageSliderAdapter, tức chiều dài của mảng String[] urls. Vì vậy bạn không nên đặt các View bằng tay trong XML mà nên thêm bằng hàm addView(View).

Để tạo một dot, bạn cần một View đóng vai trò là một “chấm”. Ở đây, bạn sẽ cần định nghĩa chính xác kích thước của nó thay vì wrap_content (sẽ trả về 0) hay match_parent. Tôi tạo luôn View trong Java thay vì từ XML, đồng thời cũng định nghĩa background của nó là một ShapeDrawable cũng trong Java thay cho XML:

Mỗi “chấm” sẽ nằm trong LinearLayout bên trên. Như vậy, code của tôi trong MainActivity tạm thời sẽ như sau:

Cuối cùng, tới phần quan trọng nhất: Thay đổi màu của “chấm” ứng với vị trí hiện tại của ViewPager. Cũng không có gì quá phức tạp, bạn chỉ cần dùng hàm ViewPager#addOnPageChangeListener mà thôi. Phần này tôi cũng sẽ code luôn trong onCreate ở bên dưới LinearLayout indicator.

Vậy là xong phần code. Bạn có thể cho chạy thử để kiểm tra.

Bạn đã biết ImageSlider khá phổ biến trong thế giới Web. Nhưng bạn có biết chúng ta có thể dễ dàng ImageSlider mang lên ứng dụng Android? Hãy tham khảo cách thực hiện tại http://eitguide.net/tao-imageslider-trong-ung-dung-android-voi-viewpager/

Eitguide Androidさんの投稿 2019年1月24日木曜日

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.