如何为ViewPager2添加页面计数器功能

嘿，我来帮你搞定ViewPager2的页面计数器功能！你已经完成了适配器和基础的ViewPager2配置，接下来只需要几步就能加上显示当前页码/总页数的计数器啦。

第一步：在布局中添加计数器控件 #

先修改你的Fragment布局文件（fragment_home.xml），在ViewPager2的合适位置（比如下方）添加一个TextView，用来展示计数器内容：

<!-- 原有ViewPager2代码保持不变 -->
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<!-- 新增计数器TextView -->
<TextView
    android:id="@+id/tv_page_counter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:textSize="16sp"
    android:text="1/6"/>

第二步：在Fragment中实现计数器逻辑 #

回到HomeFragment，我们需要给ViewPager2添加页面切换监听，实时更新计数器内容，同时初始化时也要设置好初始值：

class HomeFragment : Fragment() {
    private lateinit var _binding : FragmentHomeBinding

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentHomeBinding.inflate(inflater,container,false)
        val images = listOf(
            R.drawable.f1,
            R.drawable.f2,
            R.drawable.f3,
            R.drawable.f4,
            R.drawable.f5,
            R.drawable.f6,
        )
        val adapter by lazy { ViewPagerAdapter(images,requireContext()) }
        _binding.viewPager.adapter = adapter

        // 初始化显示初始页码
        updatePageCounter(0, images.size)

        // 给ViewPager2添加页面切换监听
        _binding.viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                // 页面切换时更新计数器
                updatePageCounter(position, images.size)
            }
        })

        return _binding.root
    }

    // 封装计数器更新方法，代码更简洁复用
    private fun updatePageCounter(currentPosition: Int, totalPages: Int) {
        // ViewPager2的position从0开始，显示给用户要改成1起始的页码
        _binding.tvPageCounter.text = "${currentPosition + 1}/$totalPages"
    }
}

小优化：完善适配器的类型安全 #

你的ViewPagerAdapter中List最好指定具体类型，避免潜在的类型问题，改成这样：

class ViewPagerAdapter(val images : List<Int>,val mContext: Context) : RecyclerView.Adapter<ViewPagerAdapter.ViewPagerViewHolderClass>() {
    // 适配器其余代码保持不变
}

这样滑动ViewPager2的时候，计数器就会实时同步当前页码和总页数啦！

备注：内容来源于stack exchange，提问作者Stear