ViewPager绑定多布局加载Firebase存储的GIF均显示相同如何修复

问题根因 #

• 两个GIF下载任务共用了同一个临时文件localFile，Firebase的getFile是异步操作，两个任务会先后覆盖写入同一个临时文件，最终所有读取该文件生成的GifDrawable都对应最后完成下载的那张GIF，这是导致你所有布局显示同一张GIF的核心原因。
• 你在Activity的onCreate中直接获取两个子布局的ImageView控件，ViewPager的子页面默认是懒加载，在Activity创建阶段子页面还未完成挂载，直接全局findViewById可能拿到无效控件，也会引发赋值异常。

修复方案 #

1. 拆分临时文件（快速修复） #

给每个下载任务单独创建独立的临时文件，避免文件内容被覆盖，修改后的onCreate逻辑如下：

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

    val gifImage1 = FirebaseStorage.getInstance().reference.child("gif/step1.gif")
    val gifImage2 = FirebaseStorage.getInstance().reference.child("gif/step2_left.gif")
    // 分别为两个GIF创建独立的临时文件
    val localFile1 = File.createTempFile("tempGif1", "gif")
    val localFile2 = File.createTempFile("tempGif2", "gif")

    gifImage1.getFile(localFile1).addOnSuccessListener {
        val gifFromPath = GifDrawable(localFile1.absolutePath)
        img.setImageDrawable(gifFromPath)
    }.addOnFailureListener {
        Toast.makeText(this, "Failed to retrieve the image", Toast.LENGTH_SHORT).show()
    }

    gifImage2.getFile(localFile2).addOnSuccessListener {
        val gif2FromPath = GifDrawable(localFile2.absolutePath)
        img2.setImageDrawable(gif2FromPath)
    }.addOnFailureListener {
        Toast.makeText(this, "Failed to retrieve the image", Toast.LENGTH_SHORT).show()
    }
    
    init()
    dataSet()
    interaction()
}

2. 规范实现方案 #

更稳定的实现方式是将GIF加载逻辑迁移到ViewPager的适配器中，避免在Activity中跨页面操作控件：

• 如果使用Fragment承载ViewPager子页面，在每个Fragment的onViewCreated方法中执行当前页面对应的GIF下载、加载逻辑，每个Fragment内部持有自己页面的ImageView，不会出现控件找不到、赋值错位的问题。
• 如果直接加载View作为ViewPager子项，就在适配器的instantiateItem方法中，拿到当前子布局的View实例后，再查找对应的ImageView，执行该页面的GIF加载逻辑。

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