解决SharedElementTransition图片过渡出现空白的问题

核心痛点分析 #

你遇到的问题本质是共享元素过渡时机和图片加载时机不匹配：直接加载会导致过渡中图片未就绪出现空白；延迟过渡等图片又会在慢网下卡死用户体验。下面是几个实用的解决方案，兼顾流畅过渡和图片加载体验：

方案1：Fragment A预加载图片，利用缓存秒开 #

在列表页（Fragment A）的RecyclerView Adapter中，提前用Glide预加载详情页需要的图片，这样进入Fragment B时，Glide能直接从内存/磁盘缓存取图，几乎无延迟。

代码示例（Fragment A的Adapter中）：

// 在Adapter的onBindViewHolder里，除了加载列表项图片，额外预加载高清图
Glide.with(itemView.context)
    .load(show.imageUrl)
    .preload() // 预加载到缓存，不显示在当前View

Fragment B中正常加载即可，此时Glide会优先用缓存：

Glide.with(this)
    .load(args.show.imageUrl)
    .error(R.drawable.default_image)
    .into(binding.detailsShowImage)

方案2：过渡用占位图兜底，加载完成无缝切换 #

不让过渡等待图片，而是让过渡正常执行，同时给目标ImageView设置和Fragment A列表项图片一致的占位图（或者直接用列表项的缩略图快照），等真实图片加载完成后再替换，过渡过程中用户看到的是连贯的占位图动画，不会出现空白。

步骤：

1. 从Fragment A传递列表项图片的缩略图（或者直接传Drawable对象，用SafeArgs序列化）
2. Fragment B中先给ImageView设置这个缩略图作为临时占位
3. 正常用Glide加载高清图，加载完成后自动替换，changeImageTransform过渡会处理好图片变换

代码示例：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    _binding = FragmentDetailsBinding.bind(view)

    // 1. 设置从列表页传递来的缩略图作为占位
    binding.detailsShowImage.setImageDrawable(args.show.thumbnailDrawable)

    // 2. 初始化共享元素过渡
    sharedElementEnterTransition = TransitionInflater.from(requireContext())
        .inflateTransition(android.R.transition.move)

    // 3. 加载高清图，完成后自动替换占位图
    Glide.with(this)
        .load(args.show.imageUrl)
        .error(R.drawable.default_image)
        .into(binding.detailsShowImage)
}

注：如果传递Drawable有困难，可以在Fragment A里把缩略图转成Bitmap保存到全局缓存，Fragment B取出来用，或者用Glide加载缩略图URL作为占位。

方案3：自定义过渡，锁定过渡期间的图片内容 #

如果不想预加载或传递占位，可以自定义过渡逻辑：在共享元素过渡开始时，给目标ImageView设置源View的快照，过渡结束后再开始加载真实图片，确保过渡过程中图片始终可见。

代码示例：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    _binding = FragmentDetailsBinding.bind(view)

    val moveTransition = TransitionInflater.from(requireContext())
        .inflateTransition(android.R.transition.move)

    // 给过渡添加监听器，过渡开始时保存源图快照，结束后加载图片
    moveTransition.addListener(object : Transition.TransitionListener {
        override fun onTransitionStart(transition: Transition) {
            // 获取共享元素的源View快照（Fragment A的RecyclerView项图片）
            val sharedElement = sharedElementEnterTransition?.targets?.firstOrNull() as? ImageView
            sharedElement?.drawable?.let {
                binding.detailsShowImage.setImageDrawable(it)
            }
        }

        override fun onTransitionEnd(transition: Transition) {
            // 过渡结束，开始加载高清图
            Glide.with(this@DetailsFragment)
                .load(args.show.imageUrl)
                .error(R.drawable.default_image)
                .into(binding.detailsShowImage)
        }

        override fun onTransitionCancel(transition: Transition) {}
        override fun onTransitionPause(transition: Transition) {}
        override fun onTransitionResume(transition: Transition) {}
    })

    sharedElementEnterTransition = moveTransition
}

额外注意事项 #

• 确保Fragment A和Fragment B的ImageView的transitionName完全一致，并且RecyclerView的每个项的transitionName是唯一的（比如用数据ID拼接）
• CollapsingToolbarLayout中的ImageView要设置android:fitsSystemWindows="true"，避免过渡时布局偏移
• Glide的timeout参数无效是因为默认的HttpUrlConnection超时可能覆盖了这个设置，可以自定义Glide的OkHttp配置来设置全局超时

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