安卓开发中轮播图和其指示器的设置

在安卓开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一系列图片或内容，用户可以左右滑动来切换不同的视图。轮播图通常用于展示广告、新闻、产品图片等。

轮播图的指示器（Indicator）则是用于告诉用户当前展示的是轮播图中的哪一项，以及总共有多少项。

一、定义布局

1、定义轮播图和指示器载体

一个ViewPager2组件用于显示轮播图。
LinearLayout组件用于显示圆点指示器。

XML 复制代码

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:id="@+id/sc_vip_content_cl"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">


                        <!--          轮播图          -->
                        <androidx.viewpager2.widget.ViewPager2
                            android:id="@+id/sc_vip_slideshow_vp"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/dp_216"
                            app:layout_constraintBottom_toTopOf="@+id/sc_vip_content_ll"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent" />

                        <!-- 圆点指示器 -->
                        <LinearLayout
                            android:id="@+id/sc_vip_indicator"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="@dimen/dp_30"
                            android:gravity="center"
                            android:orientation="horizontal"
                            app:layout_constraintBottom_toBottomOf="@id/sc_vip_slideshow_vp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintHorizontal_bias="0.5"
                            app:layout_constraintStart_toStartOf="parent" />

                    </androidx.constraintlayout.widget.ConstraintLayout>

2、定义ViewPager2的布局页面

定义ViewPager2的布局页面来放轮播图需要展示的内容

XML 复制代码

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_218">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/sc_vip_vp_iv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/sc_png_vip_banner1"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

二、定义Fragment作为轮播图的载体

这个Fragment布局文件用的是上面定义ViewPager2的布局页面，作为轮播图的展示载体

定义了一个名为 ScVipSlideshowVpFrag 的 Fragment 类，它继承自 BaseFragmentX 类，并且使用了 ScFragVipVpBinding 作为数据绑定类。这个 Fragment 用于展示单个图片，通常用在轮播图中。

以下是代码的详细解释：

**1、类定义：**定义了一个名为 ScVipSlideshowVpFrag 的类，它继承自 BaseFragmentX（封装过的），并且使用了 ScFragVipVpBinding 作为数据绑定类。

**2、Companion Object：**定义了一个伴生对象（Companion Object），它包含了一个常量 IMAGE_ID 和一个静态方法 getInstance()。 IMAGE_ID：用于在 Bundle 中存储图片资源ID。

**3、getInstance()：**这是一个静态方法，用于创建 ScVipSlideshowVpFrag 实例，并设置图片资源ID。

**4、setLayoutId()：**重写了 BaseFragmentX 中的 setLayoutId() 方法，返回布局文件的资源ID R.layout.sc_frag_vip_vp。

**5、onLazyLoad()：**重写了 BaseFragmentX 中的 onLazyLoad() 方法，这个方法在 Fragment 可见时被调用。在这个方法中，从 arguments 中获取图片资源ID，并将其设置到布局中的图片视图 scVipVpIv 上。这个 Fragment 类可以用于轮播图中的每个页面，展示单个图片。通过 getInstance() 方法，可以创建 ScVipSlideshowVpFrag 实例，并传递图片资源ID。在 onLazyLoad() 方法中，根据传递的图片资源ID设置图片视图。

Kotlin 复制代码

import android.os.Bundle
import com.mango.base.base.BaseFragmentX
import com.mango.sc.R
import com.mango.sc.databinding.ScFragVipVpBinding

/**
 * 
 * 顶部轮播图
 * */
class ScVipSlideshowVpFrag : BaseFragmentX<ScFragVipVpBinding>() {

    companion object {

        const val IMAGE_ID = "image_id"
        fun getInstance(imageResId: Int): ScVipSlideshowVpFrag {

            return ScVipSlideshowVpFrag().apply {
                arguments = Bundle().apply {
                    putInt(IMAGE_ID, imageResId)
                }
            }
        }
    }

    override fun setLayoutId(): Int {
        return R.layout.sc_frag_vip_vp
    }

    override fun onLazyLoad() {
        val imageResId = arguments?.getInt(IMAGE_ID) ?: 0

        mDatabind.scVipVpIv.apply {
            setImageResource(imageResId)
        }

    }

}

三、定义ViewPager2的适配器

使用 FragmentStateAdapter 来创建一个适配器，用于在 ViewPager2 中展示一系列的图片。FragmentStateAdapter 是 ViewPager2 的适配器，用于管理与页面相关的 Fragment。这个适配器在 ViewPager2 中非常实用，因为它可以有效地处理页面的生命周期，并且只在用户滑动到的页面上创建 Fragment。

类定义：定义了一个名为 ScVipSlideshowVpAdapter 的类，它继承自 FragmentStateAdapter。

**1、构造函数：**接收三个参数： fragmentManager：用于管理 Fragment 的生命周期。 lifecycle：用于确保适配器与 Fragment 的生命周期同步。 images：一个 IntArray，包含了要展示的图片资源的ID。

**2、getItemCount()：**重写了 FragmentStateAdapter 的 getItemCount() 方法，返回图片数组 images 的大小，即轮播图中页面的数量。

**3、createFragment(position: Int)：**重写了 FragmentStateAdapter 的 createFragment() 方法，根据传入的位置 position 创建并返回一个 Fragment。调用ScVipSlideshowVpFrag 的 Fragment 类，有一个静态方法 getInstance()，用于创建并初始化 Fragment 实例。这个适配器可以与 ViewPager2 一起使用，来实现顶部轮播图的功能，然后在 Activity 或 Fragment 中设置这个适配器。

Kotlin 复制代码

/**
 * 顶部轮播图适配器
 * */
class ScVipSlideshowVpAdapter(
    fragmentManager: FragmentManager,
    lifecycle:Lifecycle,
    private val images:IntArray

) : FragmentStateAdapter(fragmentManager,lifecycle) {
    override fun getItemCount(): Int = images.size
    override fun createFragment(position: Int): Fragment {
        return ScVipSlideshowVpFrag.getInstance(images[position])
    }

}

四、在fragment/activity中使用ViewPager2

1、初始化数据

先初始化轮播图需要展示的图片数据列表、和ViewPager2的适配器，传入images

Kotlin 复制代码

   //设置轮播图内容
    private val images = intArrayOf(
        R.drawable.sc_png_vip_banner1,
        R.drawable.sc_png_vip_banner2,
        R.drawable.sc_png_vip_banner3,
        R.drawable.sc_png_vip_banner4
    )

    //轮播图Vp适配器
    private val slideshowVpAdapter: ScVipSlideshowVpAdapter by lazy {
        ScVipSlideshowVpAdapter(
            childFragmentManager,
            viewLifecycleOwner.lifecycle,
            images
        )
    }

设置xml中定义的ViewPager2的适配器

Kotlin 复制代码

        mDatabind.scVipSlideshowVp.adapter = slideshowVpAdapter

到此为止就已经可以正常在页面中滑动ViewPager2看到所设置的四张banner图片了，但是还没有设置轮播图的指示器

五、设置指示器

1、导入指示器的图片

导入资源文件作为指示器的图片显示，这里导入的就是最常见的小圆点，选中和非选中的两个图标

2、设置指示器

initDotIndicator是一个初始化圆点指示器的方法，用于配合 ViewPager2 使用，显示当前页面的位置。

以下是代码的详细解释：

**1、获取 ViewPager2 和指示器视图：**通过 mDatabind 获取 ViewPager2 和指示器 LinearLayout 的实例。这里因为项目使用的MVVM框架，所以可以直接获取控件的实例。

**2、获取页面总数：**通过 viewPager.adapter?.itemCount 获取 ViewPager2 中的页面总数，并将其存储在 pageCount 变量中。

**3、记录日志：**使用 AppLogTask 类记录页面总数的日志，直接忽略就好了，调试用的（封装过的）。

4、创建并添加指示器圆点：

使用循环创建与页面总数相等的 ImageView 实例，每个 ImageView 代表一个圆点。
设置每个圆点的大小和间距。
根据圆点的位置设置选中和未选中的图片资源。第一个圆点（i == 0）设置为选中状态的图片，其他圆点设置为未选中状态的图片。
将每个圆点添加到指示器 LinearLayout 中。

**5、记录日志：**为每个添加的圆点记录日志。直接忽略就好了，调试用的（封装过的）。

6、监听 ViewPager2 页面变化：

注册 ViewPager2.OnPageChangeCallback 监听器，以便在页面变化时更新指示器状态。
在 onPageSelected 方法中，根据当前页面的位置更新每个圆点的图片资源，将当前页面对应的圆点设置为选中状态，其他圆点设置为未选中状态。

这段代码实现了一个基本的圆点指示器功能，当用户滑动 ViewPager2 时，指示器会相应地更新，显示当前页面的位置。这是轮播图组件中常用的一种指示器样式，能够直观地告诉用户当前查看的是哪一个页面。

Kotlin 复制代码

    // 初始化圆点指示器
    private fun initDotIndicator() {
        val viewPager = mDatabind.scVipSlideshowVp
        val indicator = mDatabind.scVipIndicator

        // 获取页面总数
        val pageCount = viewPager.adapter?.itemCount ?: 0

        AppLogTask.get().pushEventLog(
            "pageCount",
            "$pageCount"
        )

        // 创建并添加指示器圆点
        for (i in 0 until pageCount) {
            val dot = ImageView(requireContext())
            val size = resources.getDimensionPixelSize(R.dimen.dp_6)
            val params = LinearLayout.LayoutParams(size, size)
            if (i != 0) {
                params.leftMargin = resources.getDimensionPixelSize(R.dimen.dp_6)
            }
            dot.layoutParams = params
            dot.setImageResource(if (i == 0) R.drawable.sc_vip_indicator_selected else R.drawable.sc_vip_indicator_unselected)
            indicator.addView(dot)

            AppLogTask.get().pushEventLog(
                "ScVipFrag", "Added dot at position $i"
            )
        }

        // 监听 ViewPager2 页面变化
        viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                // 更新指示器状态
                for (i in 0 until indicator.childCount) {
                    (indicator.getChildAt(i) as ImageView).setImageResource(
                        if (i == position) R.drawable.sc_vip_indicator_selected else R.drawable.sc_vip_indicator_unselected
                    )
                }
            }
        })
    }

到此就设置完了，注意一下在xml页面中的布局，有可能会覆盖住指示器，导致设置成功之后却显示不了的情况（因为我第一次设置就遇到了，所以加入了调试代码）（0_0）