Shared Element Transition退出异常求助：ViewPager滑动后返回错位

这个问题我之前做项目时也碰到过，核心原因是当你滑动ViewPager切换页面后，系统在结束共享元素过渡时，无法正确定位到最初启动过渡的那个View对应的位置——要么是多个页面的共享元素复用了同一个transitionName导致混淆，要么是返回时系统默认用了当前页面的元素但没匹配上初始位置的状态。下面是几个经过验证的解决方案：

1. 给每个ViewPager页面的共享元素设置唯一的transitionName #

这是最核心的一步，默认情况下如果所有页面的ImageView用同一个transitionName，滑动后系统会搞不清该对应哪个元素。

• 在ViewPager的Adapter中，绑定数据时给每个页面的共享元素生成唯一标识：

  @Override
  public void onBindViewHolder(ViewHolder holder, int position) {
      YourItem item = itemList.get(position);
      // 用item的唯一ID或position拼接transitionName
      holder.imageView.setTransitionName("shared_img_" + item.getId());
      // 其他绑定逻辑...
  }
  

• 启动EnlargeActivity时，把这个唯一的transitionName和初始页面位置传入Intent：

  Intent myIntent = new Intent(getActivity(), EnlargeActivity.class);
  myIntent.putExtra("INIT_POSITION", currentPosition);
  myIntent.putExtra("TRANSITION_NAME", imageView.getTransitionName());
  ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
      getActivity(), 
      imageView, 
      imageView.getTransitionName()
  );
  startActivity(myIntent, options.toBundle());
  

• 在EnlargeActivity中，拿到参数后给对应页面的共享元素设置相同的transitionName：

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_enlarge);
      
      int initPosition = getIntent().getIntExtra("INIT_POSITION", 0);
      String transitionName = getIntent().getStringExtra("TRANSITION_NAME");
      
      ViewPager viewPager = findViewById(R.id.view_pager);
      YourPagerAdapter adapter = new YourPagerAdapter(itemList);
      viewPager.setAdapter(adapter);
      viewPager.setCurrentItem(initPosition);
      
      // 给初始页面的共享元素设置transitionName
      View initialSharedView = adapter.getSharedViewAtPosition(initPosition);
      if (initialSharedView != null) {
          initialSharedView.setTransitionName(transitionName);
      }
  }
  

2. 返回时手动指定当前页面的共享元素 #

滑动ViewPager后，返回时需要主动告诉系统用当前页面的共享元素完成过渡，而不是默认的初始元素：

• 首先在Adapter中添加一个方法，用来获取指定位置的共享元素View：

  public class YourPagerAdapter extends RecyclerView.Adapter<ViewHolder> {
      private List<View> cachedViews = new ArrayList<>();
      
      @Override
      public void onViewAttachedToWindow(ViewHolder holder) {
          super.onViewAttachedToWindow(holder);
          cachedViews.add(holder.itemView);
      }
      
      @Override
      public void onViewDetachedFromWindow(ViewHolder holder) {
          super.onViewDetachedFromWindow(holder);
          cachedViews.remove(holder.itemView);
      }
      
      public View getSharedViewAtPosition(int position) {
          for (View view : cachedViews) {
              if ((int) view.getTag() == position) {
                  return view.findViewById(R.id.shared_image);
              }
          }
          return null;
      }
  }
  

• 然后重写EnlargeActivity的返回方法：

  @Override
  public void onBackPressed() {
      ViewPager viewPager = findViewById(R.id.view_pager);
      int currentPos = viewPager.getCurrentItem();
      YourPagerAdapter adapter = (YourPagerAdapter) viewPager.getAdapter();
      View sharedView = adapter.getSharedViewAtPosition(currentPos);
      
      if (sharedView != null) {
          ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
              this,
              sharedView,
              sharedView.getTransitionName()
          );
          ActivityCompat.finishAfterTransition(this);
      } else {
          super.onBackPressed();
      }
  }
  

3. 确保过渡期间ViewPager的布局状态正确 #

有时候ViewPager页面加载时机不对，会导致共享元素的位置计算错误。可以在过渡动画完成后再初始化ViewPager：

@Override
public void onEnterAnimationComplete() {
    super.onEnterAnimationComplete();
    // 这里初始化ViewPager和加载数据，确保页面布局已完成
    ViewPager viewPager = findViewById(R.id.view_pager);
    viewPager.setAdapter(new YourPagerAdapter(itemList));
    viewPager.setCurrentItem(getIntent().getIntExtra("INIT_POSITION", 0));
}

总结 #

最关键的两点是：给每个页面的共享元素分配唯一的transitionName，以及返回时明确指定当前页面的共享元素作为过渡目标。这样系统就能正确匹配过渡前后的元素位置，不会出现返回时共享元素从左侧弹出的异常。

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