android - 共享元素从 viewPager 中的 recyclerView 过渡到 fragment

Question

我创建了应用程序，其中在主要 fragment 中有 viewPager 以及带有 recyclerView 的 fragment 。 recyclerView 的每个项目都有图像，需要将其共享到带有动画的细节 fragment 。问题是它不起作用。我试图在没有 viewPager 的情况下实现它，只使用一个带有 recyclerView 的 fragment 并且效果很好。在 viewPager 中实现共享元素转换和不使用它有什么区别？

在 adapeter 中我设置了 transitionName

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

在 Activity 中我展示了细节 fragment :

 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();
    }
}

在详细 fragment 中，我获得了这样的参数:

 @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) )引起的转换和由用户引起的页面滑动。动画绑定(bind)到手指运动。

看看。

SharedElementPageTransformer demo gif

用法

1. 以相同顺序将 ViewPager 中的所有 fragment 添加到列表中。

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

1. 大概在 Activity.onCreate() 中创建 SharedElementPageTransformer。
   this 指的是 Activity :

        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);

1. 通过传递需要链接在一起的成对 View ID 添加共享转换

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

1. 将我们的 transformer 设置为 ViewPager 的 pageTransformer AND onPageChangeListener。

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

您可能唯一需要做的就是在您需要制作动画的 ImageView 之上的 RecyclerView fragment 上创建额外的 ImageView。然后您可以在目标 ViewPager 页面上从它过渡到 ImageView。