引言

无限轮播图能够循环展现一组图片或许内容，其需求和运用场景广泛存在于各种类型的运用中，包括但不限于以下状况：

广告轮播：运用首页、产品详情页等位置常常需求展现广告轮播图，以吸引用户的注意力并推广特定的产品或服务。
图片展现：相册、图片阅读器等运用中，能够运用无限轮播图来阅读很多的图片，供给更好的用户阅读体会。
新闻资讯：新闻运用、资讯类运用中，经过无限轮播图来展现热门新闻、头条音讯等，便利用户快速阅读和获取信息。
产品展现：电商运用、线上商城等场景中，无限轮播图能够用于展现热销产品、特别引荐等，促进用户购买爱好和行为。

而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，构成无限循环的假象

可参阅/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提示即可

总结

至此，咱们的无限轮播图功用就大功告成，首要触及：

ViewPager2的基本运用
如何敞开守时使命
无限流数据的展现操作
点击事情的处理

接下来咱们就能够运行起来，看一下终究作用：

Viewpager2系列–无限轮播图

引言

完结ViewPager2的基本布局和适配器

主动轮播

无限流轮播

接触事情以及页面点击事情处理

接触事情处理

页面点击事情处理

总结

作者信息

推广

Viewpager2系列–无限轮播图

引言

完结ViewPager2的基本布局和适配器

主动轮播

无限流轮播

接触事情以及页面点击事情处理

接触事情处理

页面点击事情处理

总结

相关文章

Flutter之状态管理Provide

AI制作艺术二维码 – 终极篇

iOS之LLVM 七

Helm Chart 多环境、多集群交付实践，透视资源拓扑和差异

作者信息

推广