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

时间:2018-02-08 15:46:18

标签: android android-fragments android-viewpager shared-element-transition

我在主片段中创建应用程序,其中viewPager包含使用recyclerView的片段。 recyclerView的每个项目都有图像,需要与动画的细节片段共享。问题是它不起作用。我试图在没有viewPager的情况下制作它,只使用一个带有recyclerView的片段,它运行良好。实现中的差异在viewPager中是否共享元素转换而没有这个?

在adapeter中我设置了transitionName

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

在活动I中显示细节片段:

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

        }
    }
}

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题。在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);
  1. 大概在 Activity.onCreate()中创建 SharedElementPageTransformer
    是指活动:
        SharedElementPageTransformer transformer =
                new SharedElementPageTransformer(this,  fragments);
  1. 通过传递一对需要链接在一起的视图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 片段上创建其他的 ImageView 。然后,您可以在目标 ViewPager 页面上从它过渡到 ImageView