使用Picasso加载URL至ImageView并实现带动画的轮播切换

现有开源方案 #

• 多数通用图片轮播库（基于ViewPager2的组件为主）支持自定义图片加载器，你可以指定用Picasso加载图片，同时配置淡入淡出动画和自动切换间隔。这类库已经封装了轮播循环、动画控制逻辑，无需从零搭建。
• 如果不想引入额外依赖，直接基于Picasso编写核心逻辑也很轻量，下面是可直接复用的代码实现。

代码示例 #

以下是独立工具类，完全匹配你的需求：

import android.animation.Animator
import android.animation.ObjectAnimator
import android.widget.ImageView
import com.squareup.picasso.Callback
import com.squareup.picasso.Picasso

class PicassoImageSlider(private val imageView: ImageView) {
    private var currentIndex = 0
    private var imageUrls: List<String> = emptyList()
    private val fadeInDuration = 1000L // 1秒淡入
    private val displayDuration = 3000L // 加载完成后显示3秒
    private val fadeOutDuration = 500L // 淡出时长可自定义

    fun startSlider(urls: List<String>) {
        if (urls.isEmpty()) return
        imageUrls = urls
        loadNextImage()
    }

    private fun loadNextImage() {
        val targetUrl = imageUrls[currentIndex]
        // 初始隐藏ImageView，准备淡入
        imageView.alpha = 0f

        Picasso.get()
            .load(targetUrl)
            .into(imageView, object : Callback {
                override fun onSuccess() {
                    // 加载成功后执行淡入动画
                    ObjectAnimator.ofFloat(imageView, "alpha", 0f, 1f)
                        .setDuration(fadeInDuration)
                        .start()

                    // 延迟指定时长后执行淡出并加载下一张
                    imageView.postDelayed({
                        fadeOutAndLoadNext()
                    }, fadeInDuration + displayDuration)
                }

                override fun onError(e: Exception?) {
                    // 加载失败直接切换下一张
                    currentIndex = (currentIndex + 1) % imageUrls.size
                    loadNextImage()
                }
            })
    }

    private fun fadeOutAndLoadNext() {
        ObjectAnimator.ofFloat(imageView, "alpha", 1f, 0f)
            .setDuration(fadeOutDuration)
            .addListener(object : Animator.AnimatorListener {
                override fun onAnimationStart(animation: Animator?) = Unit
                override fun onAnimationEnd(animation: Animator?) {
                    // 淡出完成后切换索引并加载下一张，实现循环
                    currentIndex = (currentIndex + 1) % imageUrls.size
                    loadNextImage()
                }
                override fun onAnimationCancel(animation: Animator?) = Unit
                override fun onAnimationRepeat(animation: Animator?) = Unit
            })
            .start()
    }

    fun stopSlider() {
        // 清理延迟任务和Picasso请求，避免内存泄漏
        imageView.removeCallbacksAndMessages(null)
        Picasso.get().cancelRequest(imageView)
    }
}

使用方式

// 在Activity/Fragment中初始化
val imageView: ImageView = findViewById(R.id.image_slider)
val imageUrls = listOf(
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image3.jpg"
)
val slider = PicassoImageSlider(imageView)
slider.startSlider(imageUrls)

// 页面销毁时停止轮播
override fun onDestroy() {
    super.onDestroy()
    slider.stopSlider()
}

关键说明 #

• 通过Picasso的Callback监听加载完成事件，确保淡入动画仅在图片加载成功后触发
• 用postDelayed控制图片显示时长，结合属性动画实现平滑的淡入淡出效果
• 取模运算(currentIndex + 1) % imageUrls.size实现无限循环轮播
• 提供stopSlider方法，在页面销毁时清理资源，避免内存泄漏

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