使用Picasso时RecyclerView到Activity的共享元素过渡失效

这个问题我之前踩过坑！核心原因就是Picasso的异步加载和共享元素过渡的时机没对上——当你触发过渡时，目标Activity里的ImageView还没加载完图片，导致过渡结束后视图是空的。之前用静态图能正常工作，是因为静态图在过渡启动前就已经存在于视图中了。下面是一步步解决的方案：

1. 确保共享元素的TransitionName唯一且一致 #

RecyclerView的ViewHolder会复用item，所以每个item的ImageView必须设置唯一的transitionName，同时目标Activity的ImageView要对应匹配：

// 在RecyclerView的ViewHolder绑定方法中
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    MyItem item = itemList.get(position);
    // 用item的唯一ID或position生成不重复的transitionName
    holder.imageView.setTransitionName("shared_image_" + item.getId());
    
    // 正常用Picasso加载图片到ViewHolder的ImageView
    Picasso.get()
           .load(item.getImageUrl())
           .into(holder.imageView);
}

// 在目标Activity中，动态设置对应transitionName
ImageView targetImageView = findViewById(R.id.target_image);
String targetTransitionName = getIntent().getStringExtra("TRANSITION_NAME");
targetImageView.setTransitionName(targetTransitionName);

2. 延迟过渡直到图片加载完成 #

目标Activity中，我们需要先暂停共享元素过渡，等Picasso加载完图片后再启动过渡，确保过渡时图片已经存在：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_target);
    
    // 先暂停进入过渡，避免图片未加载就开始动画
    postponeEnterTransition();
    
    ImageView targetImageView = findViewById(R.id.target_image);
    String imageUrl = getIntent().getStringExtra("IMAGE_URL");
    String transitionName = getIntent().getStringExtra("TRANSITION_NAME");
    targetImageView.setTransitionName(transitionName);
    
    // 加载图片，完成后启动过渡
    Picasso.get()
           .load(imageUrl)
           .noFade() // 关闭Picasso默认淡入动画，避免和共享元素过渡冲突
           .into(targetImageView, new Callback() {
               @Override
               public void onSuccess() {
                   // 图片加载完成，启动过渡
                   startPostponedEnterTransition();
               }

               @Override
               public void onError(Exception e) {
                   // 加载失败也要启动过渡，避免界面卡住
                   startPostponedEnterTransition();
               }
           });
}

3. 正确启动带共享元素的Activity #

在RecyclerView的点击事件中，要正确传递共享元素的视图和transitionName：

// 在ViewHolder的点击监听里
holder.imageView.setOnClickListener(v -> {
    MyItem item = itemList.get(holder.getAdapterPosition());
    Intent intent = new Intent(context, TargetActivity.class);
    intent.putExtra("IMAGE_URL", item.getImageUrl());
    intent.putExtra("TRANSITION_NAME", holder.imageView.getTransitionName());
    
    // 创建过渡选项
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
            (Activity) context,
            holder.imageView,
            holder.imageView.getTransitionName()
    );
    
    // 启动Activity
    ActivityCompat.startActivity(context, intent, options.toBundle());
});

4. 额外注意事项 #

• 确保App主题启用了窗口内容过渡：在styles.xml中添加：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- 启用窗口内容过渡 -->
    <item name="android:windowContentTransitions">true</item>
    <!-- 可选：指定共享元素过渡动画 -->
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>

• 避免在Picasso加载时使用resize()、centerCrop()等改变图片尺寸的操作，除非你保证RecyclerView和目标Activity的ImageView尺寸比例完全一致，否则过渡动画会出现错位。如果必须调整尺寸，要保证两边的缩放规则相同。

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