如何在Android Fragment中实现图片轮播（替代文字）

以下是基于你参考的AppCompatActivity轮播教程，适配到Fragment并改为图片轮播的完整实现方案：

1. 添加依赖 #

在Module级别的build.gradle中添加ViewPager2和可选的圆点指示器依赖：

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
    implementation "com.tbuonomo:dotsindicator:5.0" // 用于显示轮播圆点指示器，可省略
}

2. 创建布局文件 #

Fragment布局（fragment_carousel.xml） #

包含ViewPager2和圆点指示器：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

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

    <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
        android:id="@+id/dotsIndicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="16dp"
        app:dotsColor="@color/grey"
        app:dotsCornerRadius="8dp"
        app:dotsSize="16dp"
        app:dotsSpacing="8dp"
        app:selectedDotColor="@color/black" />

</LinearLayout>

轮播图片项布局（item_carousel_image.xml） #

用于展示单张轮播图片：

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

3. 实现ViewPager2适配器 #

创建适配图片的RecyclerView适配器（ViewPager2基于RecyclerView实现）：

class ImageCarouselAdapter(private val imageList: List<Any>) :
    RecyclerView.Adapter<ImageCarouselAdapter.ImageViewHolder>() {

    inner class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.carouselImage)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_carousel_image, parent, false)
        return ImageViewHolder(view)
    }

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        val image = imageList[position]
        when (image) {
            // 本地资源图片
            is Int -> holder.imageView.setImageResource(image)
            // 网络图片（需配合Glide等加载库）
            is String -> {
                // 示例：使用Glide加载网络图片
                // Glide.with(holder.imageView.context)
                //     .load(image)
                //     .centerCrop()
                //     .into(holder.imageView)
            }
        }
    }

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

4. 在Fragment中初始化轮播 #

在你的Fragment类中完成ViewPager2的初始化、适配器绑定，以及自动轮播逻辑：

class CarouselFragment : Fragment() {

    private lateinit var viewPager: ViewPager2
    private lateinit var dotsIndicator: DotsIndicator
    private lateinit var adapter: ImageCarouselAdapter
    // 替换为你的图片资源或网络图片URL列表
    private val imageList = listOf(
        R.drawable.carousel_img1,
        R.drawable.carousel_img2,
        R.drawable.carousel_img3
    )

    private val autoScrollHandler = Handler(Looper.getMainLooper())
    private lateinit var autoScrollRunnable: Runnable

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        viewPager = view.findViewById(R.id.viewPager)
        dotsIndicator = view.findViewById(R.id.dotsIndicator)

        // 初始化适配器并绑定到ViewPager2
        adapter = ImageCarouselAdapter(imageList)
        viewPager.adapter = adapter

        // 关联圆点指示器与ViewPager2
        dotsIndicator.setViewPager2(viewPager)

        // 设置自动轮播
        setupAutoScroll()
    }

    private fun setupAutoScroll() {
        autoScrollRunnable = Runnable {
            val nextItem = (viewPager.currentItem + 1) % adapter.itemCount
            viewPager.setCurrentItem(nextItem, true)
            autoScrollHandler.postDelayed(autoScrollRunnable, 3000) // 3秒切换一次
        }
        autoScrollHandler.postDelayed(autoScrollRunnable, 3000)
    }

    override fun onPause() {
        super.onPause()
        // 暂停自动轮播，避免后台资源浪费
        autoScrollHandler.removeCallbacks(autoScrollRunnable)
    }

    override fun onResume() {
        super.onResume()
        // 恢复自动轮播
        autoScrollHandler.postDelayed(autoScrollRunnable, 3000)
    }
}

关键说明 #

• 若使用网络图片，需在AndroidManifest.xml中添加网络权限：<uses-permission android:name="android.permission.INTERNET" />，并引入图片加载库（如Glide）实现网络图片加载。
• 适配Fragment时，需通过view.findViewById()获取控件，而非直接调用findViewById()；同时在Fragment的生命周期方法中处理自动轮播的启停，避免内存泄漏。
• 圆点指示器为可选组件，若不需要可直接移除布局和相关代码。

内容的提问来源于stack exchange，提问作者Denis Oliveira Lazarini