引言

无限轮播图可以循环展示一组图片或者内容，其需求和应用场景广泛存在于各种类型的应用中，包括但不限于以下情况：

广告轮播：应用首页、商品详情页等位置常常需要展示广告轮播图，以吸引用户的注意力并推广特定的产品或服务。
图片展示：相册、图片浏览器等应用中，可以使用无限轮播图来浏览大量的图片，提供更好的用户浏览体验。
新闻资讯：新闻应用、资讯类应用中，通过无限轮播图来展示热门新闻、头条消息等，方便用户快速浏览和获取信息。
产品展示：电商应用、线上商城等场景中，无限轮播图可以用于展示热销商品、特别推荐等，促进用户购买兴趣和行为。

而ViewPager2作为页面切换的必备良器，刚好可以应用于轮播的场景，接下来，我们就用ViewPager2来实现一个无限轮播图功能，整体步骤如下：

实现ViewPager2的基本布局和适配器
自动轮播功能
无限轮播功能
触摸事件以及页面点击事件处理

实现ViewPager2的基本布局和适配器

这个部分比较常规，属于ViewPager2的基本使用，这个在我前面的一些博客里也提到了，不多言，直接开干：

在item_banner.xml布局文件中定义每个页面的布局，此处我们只需要一个ImageView ，但是根布局的宽高必须是"match_parent"的：

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <ImageView
        android:id="@+id/banner_image"
        android:layout_width="200dp"
        android:layout_height="200dp"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在activity_main.xml中定义ViewPager2 :

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="200dp"

        android:background="@color/purple_700"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="主页面"
        android:textColor="@color/black"
        android:textSize="28sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/viewPager" />

</androidx.constraintlayout.widget.ConstraintLayout>

我们用整体布局中上面一小部分来承载ViewPager2

创建自定义适配器BannerViewPagerAdapter，继承自RecyclerView.Adapter<ViewHolder>：

class BannerViewPagerAdapter(private val imageList: List<Drawable>): RecyclerView.Adapter<BannerViewPagerAdapter.BannerViewHolder>(){




    inner class BannerViewHolder(val binding: ItemBannerBinding): RecyclerView.ViewHolder(binding.root)




    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BannerViewHolder {

        return BannerViewHolder(ItemBannerBinding.inflate(LayoutInflater.from(parent.context), parent, false))

    }





    override fun getItemCount(): Int {

        return imageList.size

    }



    override fun onBindViewHolder(holder: BannerViewHolder, position: Int) {

        holder.binding.bannerImage.setImageDrawable(imageList[position])

    }

}

适配器很简单，只需要将图片列表和对应的ViewHolder进行绑定即可

在Activity中，获取ViewPager2实例并设置适配器：

private val imageList: MutableList<Drawable> = mutableListOf()




private val adapter by lazy {
    BannerViewPagerAdapter(imageList) 
}



override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(binding.root)
    initData()
    initView()
}


private fun initData() {
    getDrawable(R.drawable.ic_instagram_default)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_instagram_selected)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_wechat_default)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_wechat_selected)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_twitter_default)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_twitter_selected)?.let { imageList.add(it) }
}


private fun initView() {
    binding.apply {
        viewPager.adapter = adapter
    }
}

至此，最简单的ViewPager2页面切换功能便完成，接下来我们就要实现自动轮播功能了

自动轮播

为了实现图片的自动播放，也就是自动轮播功能，我们需要借助定时任务来完成，并使用 ViewPager2 的 setCurrentItem() 方法来切换到下一个页面，另外结合 PageTransformer 实现动画效果。

自定义切换页面效果CustomPageTransformer

class CustomPageTransformer : ViewPager2.PageTransformer {
    private val minScale = 0.85f
    private val minAlpha = 0.5f



    override fun transformPage(page: View, position: Float) {
        val pageWidth = page.width
        val pageHeight = page.height



        page.apply {
            val scaleFactor = minScale.coerceAtLeast(1 - kotlin.math.abs(position))
            val verticalMargin = pageHeight * (1 - scaleFactor) / 2
            val horizontalMargin = pageWidth * (1 - scaleFactor) / 2


            translationX = if (position < 0) {
                horizontalMargin - verticalMargin / 2
            } else {
                -horizontalMargin + verticalMargin / 2
            }


            scaleX = scaleFactor
            scaleY = scaleFactor


            alpha = minAlpha + (scaleFactor - minScale) / (1 - minScale) * (1 - minAlpha)
        }
    }
}

为ViewPager添加动画效果：

viewPager.setPageTransformer(CustomPageTransformer())

利用定时器Timer实现定时任务，具体使用方式如下：

private fun startAutoScroll() {
    timer?.cancel()
    timer = Timer()
    timer?.scheduleAtFixedRate(object : TimerTask() {
        override fun run() {
            runOnUiThread {
                binding.viewPager.apply {
                    if (currentItem + 1 < (adapter?.itemCount ?: 0)){
                        setCurrentItem(currentItem + 1, true)
                    }
                }
            }
        }
    }, 3000, 3000)
}

首先，创建了一个 Timer 对象用于定时任务，然后通过 scheduleAtFixedRate 方法来设置定时任务的执行频率和内容。

在定时任务的 run 方法中，我们通过 runOnUiThread 来确保在主线程中更新 UI，然后调用 viewPager.setCurrentItem() 方法来切换到下一个页面。

注意：上述示例中的自动轮播间隔为 3 秒，可以根据需要调整定时任务的执行频率。

在完成上述代码后，我们便可以实现自动轮播功能呢？但是并不能实现轮播到最后一个图片后再回到第一个图片，从而形成无限流的效果。

无限流轮播

网上有多种方式可以实现无限流轮播，一般有：

调整适配器的getItemCount()方法，返回Integer.MAX_VALUE，使页面数量变为无限循环
通过改变数据项，并在合适的位置设置setCurrentItem，形成无限循环的假象

可参考juejin.cn/post/684490…

本文采用第二种方式，具体操作如下：

在数据列表的末尾插入第一条数据：

private fun initData() {
    getDrawable(R.drawable.ic_instagram_default)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_instagram_selected)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_wechat_default)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_wechat_selected)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_twitter_default)?.let { imageList.add(it) }
    getDrawable(R.drawable.ic_twitter_selected)?.let { imageList.add(it) }
     // 这一条为新增数据，跟第一条完全一致
    getDrawable(R.drawable.ic_instagram_default)?.let { imageList.add(it) }
}

设置页面切换监听，并在页面切换到最后一项时（新增的数据），调用viewPager.setCurrentItem(0, false)，回到第一项，进行下一轮循环：

private var currentPos = 0




viewPager.registerOnPageChangeCallback(object :
    ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        currentPos = position
    }


    override fun onPageScrollStateChanged(state: Int) {
        //只有在空闲状态，才让自动滚动
        if (state == ViewPager2.SCROLL_STATE_IDLE && currentPos == adapter.itemCount - 1) {
            viewPager.setCurrentItem(0, false)
        }
    }
})

其中，我们必须在滚动空闲状态之后再做操作，否则会造成动画不连贯，体验较差

至此，无限流的自动轮播就此完成

触摸事件以及页面点击事件处理

处理完无限流轮播后，我们还需要处理用户的触摸事件，比如用户按住卡片时，暂停轮播，松开后继续轮播，以及用户点击卡片我们需要响应。

触摸事件处理

通常，触摸事件的处理只需要调用setOnTouchListener即可，但是给ViewPager2是一个视图组，未调用setOnTouchListener是因为recyclerview拦截了事件，因此我们需要调用viewPager.getChildAt(0)，然后给它设置监听即可：

viewPager.getChildAt(0).setOnTouchListener { _, event ->
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            stopAutoScroll()
        }
        MotionEvent.ACTION_UP -> {
            startAutoScroll()
        }
    }
    return@setOnTouchListener false
}

当用户按下卡片时，调用stopAutoScroll()取消动画，用户松手时后开启动画

页面点击事件处理

每个页面的点击事件处理，但是由于这是和我们上一节触摸事件的处理是冲突的，因为触摸事件会被子View消费，在此我们只需要遵循RecyclerView的原则来做就好，具体操作如下：

在Adapter中为每一个item设置点击事件：

class BannerViewPagerAdapter(private val imageList: List<Drawable>, private val itemClickAction: (position: Int) -> Unit): RecyclerView.Adapter<BannerViewPagerAdapter.BannerViewHolder>(){




    inner class BannerViewHolder(val binding: ItemBannerBinding): RecyclerView.ViewHolder(binding.root)




    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BannerViewHolder {

        return BannerViewHolder(ItemBannerBinding.inflate(LayoutInflater.from(parent.context), parent, false))

    }





    override fun getItemCount(): Int {

        return imageList.size

    }



    override fun onBindViewHolder(holder: BannerViewHolder, position: Int) {

        holder.binding.bannerImage.setImageDrawable(imageList[position])

        holder.binding.bannerImage.setOnClickListener {
            itemClickAction.invoke(position)
        }
    }


}

点击事件的处理我们交给创建Adapter的地方实现

创建Adapter并实现点击事件的处理：

private val adapter by lazy {
    BannerViewPagerAdapter(imageList) {
        Toast.makeText(this, "Banner position is $it", Toast.LENGTH_LONG).show()
    }
}

本文为了示例方便，点击卡片直接弹一个Toast提示即可