ViewPager2 được Google phát hành vào tháng 2 năm 2019. Hãy cùng xem ViewPager2 có gì mới mẻ và có điểm gì khác so với ViewPager nhé!

1. Giới thiệu

ViewPager2 Được ra mắt bởi Google vào ngày 07 tháng 02 năm 2019, nó được biết đến là một bản nâng cấp của ViewPager. Nó cũng có các chức năng tương tự như ViewPager nhưng được đánh giá thông minh hơn và hoạt động hiệu quả hơn so với người tiền nhiệm.

Các tính năng mới

• Hỗ trợ bố trí từ phải sang trái
• Hỗ trợ trượt theo chiều dọc
• PageChangeListener đã được cải tiến tốt hơn

Một vài thứ đã được thay đổi

• PagerAdapter đã được thay thế bằng RecyclerView.Adapter.
• FragmentStatePagerAdapter cũng đã thay thế bằng FragmentStateAdapter.
• Phiên bản ViewPager2 này được phát hành cho Android X, vì vậy nếu bạn muốn sử dụng nó thì dự án của bạn phải được chuyển sang Android X. Bây giờ thì bắt đầu sử dụng thôi!

2. Sử dụng

Thêm Viewpager2 vào project

Thêm đoạn code bên dưới vào dependencies của file build.gradle (Module: app)

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0-alpha01"
}

Thêm các layout

Thêm vào activity_main.xml

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

Tạo layout cho 1 item 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvTitle"
        android:textColor="@android:color/white"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        tools:text= "item"
        android:textSize="32sp"
        android:layout_height="wrap_content" />

</RelativeLayout>

Tạo adapter

Tương tự như tạo adapter cho RecyclerView

class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() {

    private val colors = intArrayOf(
        android.R.color.black,
        android.R.color.holo_red_light,
        android.R.color.holo_blue_dark,
        android.R.color.holo_purple
    )

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH =
        PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false))

    override fun getItemCount(): Int = colors.size

    override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run {
        tvTitle.text = "item $position"
        container.setBackgroundResource(colors[position])
    }
}

class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView)

Set adapter cho ViewPager2

MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        viewPager2.adapter = ViewPagerAdapter()
    }
}

Kết quả: 

Set up viewpager2 theo chiều dọc

Thông thường, chúng ta phải sử dụng thư viện bên thứ 3 để set cho ViewPager cuộn theo chiều dọc. Nhưng Viewpager2 đã hỗ trợ thuộc tính này. Chúng ta chỉ cần set như sau:

viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL

Kết quả:

Sử dụng FragmentStateAdapter

Bạn có thể sử dụng fragment để làm item như trong ViewPager phiên bản cũ. Trong trường hợp này, bạn sử dụng FragmentStateAdapter để set up cho ViewPager2.

Tạo các fragment

class PagerFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.item_page, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        arguments?.let {
            container.setBackgroundResource(it.getInt("color"))
            tvTitle.text = "Item ${it.getInt("position")}"
        }
    }
}

Tạo adapter cho ViewPager2

class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) {

    private val colors = intArrayOf(
        android.R.color.black,
        android.R.color.holo_red_light,
        android.R.color.holo_blue_dark,
        android.R.color.holo_purple
    )

    override fun getItem(position: Int): Fragment = PagerFragment().apply {
        arguments = bundleOf(
            "color" to colors[position],
            "position" to position
        )
    }

    override fun getItemCount(): Int = colors.size
}

Set adapter cho Viewpager2

viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager)

OnPageChangeCallback

Trong ViewPager cũ, một interface OnPageChangeListner được sử dụng để nhận các sự kiện thay đổi, cuộn trang. chúng ta cần override cả ba phương thức (onPageScrollStateChanged, onPageScrolled, onPageSelected) ngay cả khi chúng ta không dùng hết cả 3 phương thức đó.

oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{
    override fun onPageScrollStateChanged(state: Int) {
        // useless
    }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        // useless too
    }

    override fun onPageSelected(position: Int) {
        // useful
    }
})

Bây giờ chúng ta có OnPageChangeCallback, một abstract class với các phương thức non-abstract. Điều đó có nghĩa là chúng ta không cần override tất cả các phương thức này, chúng ta chỉ cần override lên những phương thức chúng ta sẽ sử dụng mà thôi. Đây là cách chúng ta có thể đăng ký cho các sự kiện thay đổi/cuộn trang.

viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        // No boilerplate, only useful
    }
})

3. Tổng kết

Chúng ta có thể thấy ViewPager2 có khá nhiều lợi thế và cải tiến hơn so với người tiền nhiệm là ViewPager. Hy vọng qua bài viết các bạn đã có thể sử dụng được ViewPager2 và áp dụng vào các dự án sau này.

Cảm ơn các bạn đã đọc bài viết.

Chào thân ái và quyết thắng!