基于Picasso实现两个Fragment间的共享元素过渡

嘿，这个场景我帮很多开发者解决过，其实共享元素过渡的核心是让两个视图的transitionName匹配，再配合Picasso的异步加载时机处理，就能实现流畅的动画了。下面一步步来：

1. 给两个ImageView设置匹配的transitionName #

共享元素过渡通过transitionName来识别要关联的视图，所以必须让RecyclerView item里的ImageView和详情页的ImageView使用完全相同的名字。

RecyclerView Adapter中的绑定逻辑 #

在Adapter的onBindViewHolder里，给每个item的ImageView设置唯一且可匹配的transitionName（比如用图片URL或ID作为标识）：

override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
    val item = itemList[position]
    val imageUrl = item.imageUrl
    
    // 设置唯一的transitionName，用图片ID更可靠，避免位置变化导致的匹配问题
    holder.itemImageView.transitionName = "shared_image_${item.id}"
    
    // 用Picasso加载图片到item的ImageView
    Picasso.get().load(imageUrl).into(holder.itemImageView)

    holder.itemView.setOnClickListener {
        // 启动详情Fragment
        navigateToDetailFragment(imageUrl, holder.itemImageView.transitionName, holder.itemImageView)
    }
}

private fun navigateToDetailFragment(imageUrl: String, transitionName: String, sharedView: View) {
    val detailFragment = DetailFragment.newInstance(imageUrl, transitionName)
    val fragmentManager = (sharedView.context as AppCompatActivity).supportFragmentManager
    
    fragmentManager.beginTransaction()
        // 添加共享元素：传入要过渡的视图和对应的transitionName
        .addSharedElement(sharedView, transitionName)
        // 替换容器中的Fragment
        .replace(R.id.fragment_container, detailFragment)
        // 添加到回退栈，保证返回时能触发过渡动画
        .addToBackStack(null)
        // 必须设置这个！保证Fragment事务的重排序，让过渡动画正常执行
        .setReorderingAllowed(true)
        .commit()
}

2. 配置详情Fragment的共享元素过渡 #

在详情Fragment中，需要开启共享元素过渡支持，并设置对应的动画，同时处理Picasso的加载时机（这是避免过渡卡顿的关键！）。

详情Fragment的核心代码 #

class DetailFragment : Fragment() {

    companion object {
        private const val ARG_IMAGE_URL = "image_url"
        private const val ARG_TRANSITION_NAME = "transition_name"

        fun newInstance(imageUrl: String, transitionName: String): DetailFragment {
            val args = Bundle().apply {
                putString(ARG_IMAGE_URL, imageUrl)
                putString(ARG_TRANSITION_NAME, transitionName)
            }
            return DetailFragment().apply { arguments = args }
        }
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 配置共享元素的进入和返回过渡动画，这里用系统的move过渡
        sharedElementEnterTransition = TransitionInflater.from(requireContext())
            .inflateTransition(android.R.transition.move)
        sharedElementReturnTransition = TransitionInflater.from(requireContext())
            .inflateTransition(android.R.transition.move)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val imageUrl = arguments?.getString(ARG_IMAGE_URL) ?: ""
        val transitionName = arguments?.getString(ARG_TRANSITION_NAME) ?: ""
        val detailImageView = view.findViewById<ImageView>(R.id.detail_image_view)

        // 给详情页的ImageView设置和item中完全一致的transitionName
        detailImageView.transitionName = transitionName

        // 延迟进入过渡，直到图片加载完成，避免过渡时图片未显示导致的闪烁
        postponeEnterTransition()

        // 用Picasso加载图片，并监听加载状态
        Picasso.get()
            .load(imageUrl)
            .listener(object : Picasso.Listener {
                override fun onImageLoaded(picasso: Picasso?, bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
                    // 图片加载完成后，启动延迟的过渡动画
                    startPostponedEnterTransition()
                }

                override fun onImageFailed(picasso: Picasso?, uri: Uri?, exception: Exception?) {
                    // 加载失败也要启动过渡，避免界面卡住
                    startPostponedEnterTransition()
                }
            })
            .into(detailImageView)
    }
}

3. 关键注意事项 #

• 必须设置setReorderingAllowed(true)：这是很多开发者容易忽略的点，没有这个配置，Fragment事务的顺序会导致共享元素过渡无法正常触发。
• 延迟过渡直到图片加载完成：Picasso是异步加载，如果不延迟过渡，会出现item视图已经开始过渡，但详情页图片还没加载出来的情况，导致动画卡顿或跳变。
• transitionName的唯一性：如果RecyclerView的item可能会刷新（比如下拉加载），建议用图片的唯一ID而不是位置作为transitionName，避免位置变化导致的名字不匹配。
• Activity层面的过渡支持：如果你的Activity还没开启窗口过渡，可以在onCreate中添加：

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
  }
  

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