Android中如何使用ViewPager实现图片与视频混合且各条目自定义时长的轮播效果？

Hey there! 我刚好做过类似的混合轮播需求，还支持每个条目自定义展示时长，给你分享一套落地性很强的实现方案，亲测好用～

核心思路 #

要实现这个需求，核心要解决三个关键点：

• 兼容图片和视频的统一展示容器
• 动态控制每个条目的展示时长
• 媒体资源的生命周期管理（避免内存泄漏、播放异常）

我推荐用ViewPager2作为轮播的基础容器，它比旧版ViewPager更灵活，配合RecyclerView.Adapter可以轻松实现多类型条目；然后用Coroutine（或者Handler）来处理每个条目的定时切换；视频播放用ExoPlayer（比原生VideoView更稳定、功能更全），图片加载用Glide/Picasso即可。

具体实现步骤 #

1. 定义轮播数据模型 #

首先要统一数据格式，每个轮播条目需要包含类型、资源地址、自定义时长三个核心字段：

data class CarouselItem(
    val type: Type,
    val resourceUrl: String,
    val displayDuration: Long // 单位：毫秒，比如10000代表10秒
) {
    enum class Type { IMAGE, VIDEO }
}

2. 自定义轮播适配器 #

适配器负责根据条目类型加载对应的媒体控件，同时处理定时切换逻辑。这里用ViewPager2的RecyclerView.Adapter实现：

class CarouselAdapter(
    private val items: List<CarouselItem>,
    private val onAutoScroll: () -> Unit
) : RecyclerView.Adapter<CarouselAdapter.CarouselViewHolder>() {

    // 用于管理当前的定时任务，避免多个任务冲突
    private var currentScrollJob: Job? = null

    inner class CarouselViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val imageView: ImageView = itemView.findViewById(R.id.iv_carousel)
        private val playerView: PlayerView = itemView.findViewById(R.id.pv_carousel)
        private var exoPlayer: SimpleExoPlayer? = null

        fun bind(item: CarouselItem) {
            // 重置之前的媒体资源，避免内存泄漏
            exoPlayer?.release()
            exoPlayer = null
            imageView.visibility = View.GONE
            playerView.visibility = View.GONE

            when (item.type) {
                CarouselItem.Type.IMAGE -> {
                    imageView.visibility = View.VISIBLE
                    // 用Glide加载图片，可根据需求添加占位图、错误图
                    Glide.with(itemView.context)
                        .load(item.resourceUrl)
                        .centerCrop()
                        .into(imageView)
                }
                CarouselItem.Type.VIDEO -> {
                    playerView.visibility = View.VISIBLE
                    exoPlayer = SimpleExoPlayer.Builder(itemView.context).build().apply {
                        setMediaItem(MediaItem.fromUri(item.resourceUrl))
                        playWhenReady = true // 自动播放
                        repeatMode = Player.REPEAT_MODE_ONE // 视频循环播放
                        playerView.player = this
                        prepare()
                    }
                }
            }

            // 启动当前条目的定时切换
            currentScrollJob?.cancel()
            currentScrollJob = CoroutineScope(Dispatchers.Main).launch {
                delay(item.displayDuration)
                onAutoScroll() // 触发自动切换到下一个条目
            }
        }

        // 页面暂停时暂停视频播放
        fun onPause() {
            exoPlayer?.playWhenReady = false
        }

        // 页面恢复时继续视频播放
        fun onResume() {
            exoPlayer?.playWhenReady = true
        }

        // 销毁时释放所有资源
        fun onDestroy() {
            exoPlayer?.release()
            exoPlayer = null
            currentScrollJob?.cancel()
        }
    }

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

    override fun onBindViewHolder(holder: CarouselViewHolder, position: Int) {
        holder.bind(items[position])
    }

    override fun getItemCount() = items.size
}

3. 轮播条目布局（item_carousel.xml） #

用FrameLayout作为容器，同时放置ImageView和PlayerView，根据类型切换可见性：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_carousel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <com.google.android.exoplayer2.ui.PlayerView
        android:id="@+id/pv_carousel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"
        app:show_buffering="when_playing"
        app:show_shuffle_button="false"
        app:show_replay_button="false"
        app:show_rewind_button="false"/>

</FrameLayout>

4. 在Activity/Fragment中整合使用 #

class CarouselDemoActivity : AppCompatActivity() {
    private lateinit var viewPager2: ViewPager2
    private lateinit var carouselAdapter: CarouselAdapter

    // 模拟轮播数据
    private val carouselItems = listOf(
        CarouselItem(CarouselItem.Type.IMAGE, "https://example.com/image1.jpg", 10000),
        CarouselItem(CarouselItem.Type.VIDEO, "https://example.com/video1.mp4", 20000),
        CarouselItem(CarouselItem.Type.IMAGE, "https://example.com/image2.jpg", 15000)
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_carousel_demo)

        viewPager2 = findViewById(R.id.view_pager2)
        initCarousel()
    }

    private fun initCarousel() {
        carouselAdapter = CarouselAdapter(carouselItems) {
            // 实现循环轮播：切换到下一个条目，超出范围则回到第一个
            val nextPosition = (viewPager2.currentItem + 1) % carouselItems.size
            viewPager2.setCurrentItem(nextPosition, true)
        }

        viewPager2.adapter = carouselAdapter
        // 监听页面切换，确保手动滑动后重置定时
        viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                // 适配器的bind方法会自动处理定时重置，这里无需额外操作
            }
        })
    }

    // 处理页面生命周期，避免视频后台播放
    override fun onPause() {
        super.onPause()
        val currentHolder = viewPager2.findViewHolderForAdapterPosition(viewPager2.currentItem) as? CarouselAdapter.CarouselViewHolder
        currentHolder?.onPause()
    }

    override fun onResume() {
        super.onResume()
        val currentHolder = viewPager2.findViewHolderForAdapterPosition(viewPager2.currentItem) as? CarouselAdapter.CarouselViewHolder
        currentHolder?.onResume()
    }

    override fun onDestroy() {
        super.onDestroy()
        val currentHolder = viewPager2.findViewHolderForAdapterPosition(viewPager2.currentItem) as? CarouselAdapter.CarouselViewHolder
        currentHolder?.onDestroy()
    }
}

关键注意事项 #

• 内存泄漏防护：一定要在页面销毁时释放ExoPlayer资源，取消Coroutine任务；Glide会自动管理图片缓存，但也要避免持有Context引用。
• 媒体缓存优化：图片可以开启Glide的磁盘缓存，视频可以配置ExoPlayer的缓存策略，减少重复加载。
• 错误处理：添加图片加载失败的占位图、视频播放异常的提示，提升用户体验。
• 交互优化：用户触摸轮播区域时暂停自动滚动，触摸结束后恢复；处理ViewPager2和内部控件的滑动冲突（如果有的话）。

内容的提问来源于stack exchange，提问作者user2353486