从viewPager中的recyclerView共享元素转换到fragment

Question

我创建了一个应用程序，其中主要片段包含带有recyclerView的片段的viewPager。 recyclerView的每个项目都有一个需要与动画共享到详细片段的图像。 问题是它不起作用。 我尝试过不使用viewPager，只使用一个带有recyclerView的片段，它运行良好。 那么，在viewPager中实现共享元素转换和没有这个的区别在哪里？

在适配器中，我设置了transitionName。

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        holder.movieImage.setTransitionName("transition" + position);
 }

在Activity中展示详细信息的片段:

 public void showFragmentWithTransition(Fragment current, Fragment newFragment, String tag, View sharedView, String sharedElementName) {
    FragmentManager fragmentManager = getSupportFragmentManager();
    // check if the fragment is in back stack
    boolean fragmentPopped = fragmentManager.popBackStackImmediate(tag, 0);
    if (fragmentPopped) {
        // fragment is pop from backStack
    } else {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            current.setSharedElementReturnTransition(TransitionInflater.from(this).inflateTransition(R.transition.default_transition));
            current.setExitTransition(TransitionInflater.from(this).inflateTransition(android.R.transition.no_transition));

            newFragment.setSharedElementEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.default_transition));
            newFragment.setEnterTransition(TransitionInflater.from(this).inflateTransition(android.R.transition.no_transition));
        }
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.fragment_container, newFragment, tag);
        fragmentTransaction.addToBackStack(tag);
        fragmentTransaction.addSharedElement(sharedView, sharedElementName);
        fragmentTransaction.commit();
    }
}

在详细的片段中，我会以这样的方式获取参数：

 @Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    Bundle arguments = getArguments();
    if (arguments != null) {
        String transitionName = arguments.getString("transitionName");
        Movie movie = (Movie) arguments.getSerializable("movie");

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            movieImage.setTransitionName(transitionName);
        }

        if (movie != null) {
            if (!TextUtils.isEmpty(movie.getImage()))
                Picasso.with(getActivity()).load("https://i.ytimg.com/vi/qh7LLydY8eo/maxresdefault.jpg").into(movieImage);
            else
                movieImage.setImageDrawable(null);

        }
    }
}

- Александр Шевчук

Answer 1

我曾经遇到过同样的问题。ViewPager页面之间的标准共享元素转换不起作用。

因此，我编写了一个SharedElement ViewPager library。它适用于由onClick()事件（例如viewPager.setCurrentItem(x)）引起的转换和用户引起的页面滑动。动画绑定在手指移动上。

看一下这个。

SharedElementPageTransformer demo gif

使用方法

1. 将ViewPager中的所有片段按相同顺序添加到列表中。

        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(hello_fragment);
        fragments.add(small_picture_fragment);

2. 在Activity.onCreate()中创建SharedElementPageTransformer，
   this指向当前activity:

        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);

3. 通过传递需要链接在一起的视图ID对来添加共享转换

        transformer.addSharedTransition(R.id.smallPic_image_cat, R.id.bigPic_image_cat);

4. 将我们的transformer设置为ViewPager的pageTransformer和onPageChangeListener。

        viewPager.setPageTransformer(false, transformer);
        viewPager.addOnPageChangeListener(transformer);

你唯一需要做的就是在需要进行动画的 ImageView 上面创建一个额外的 RecyclerView 片段。然后，你可以从它到目标 ViewPager 页面上的 ImageView 进行过渡。

- Kirill Gerasimov