材料设计父子级导航过渡回收视图查看详细片段 [英] Material Design parent-child navigational transition recyclerview entry to detail fragment

问题描述

背景

我正尝试实现父母到孩子"的导航过渡，特别是当您单击Recyclerview条目并且详细信息显示在全屏片段中时.像这样:

I am trying to implement the "parent-to-child" navigational transition specifically when you click a Recyclerview entry and the details appear in a fullscreen fragment. Something like this:

问题

如何使用众多可用的动画API来执行此操作? (TransitionManager.beginDelayedTransition，SharedTransition，setExitTransition等)

How do I go about doing this with so many animation APIs available? (TransitionManager.beginDelayedTransition, SharedTransition, setExitTransition, etc)

我尝试过的事情

• InboxRecyclerView -这符合我的要求，只是它似乎仅在详细信息时有效视图与Recyclerview的布局相同.因为我正在使用片段回栈在片段之间导航，所以我需要它在附加之前可能不可用的布局之间进行转换.

• InboxRecyclerView - This matches my requirements EXCEPT that it seems to only work when the detail view is in the same layout as the Recyclerview. Because I am navigating between fragments using the fragment backstack, I need it to transition between layouts that might not be available prior to attachment.

这篇文章-答案仅涵盖从活动到活动的转换.我正在寻找片段到片段.

This post - Answers only cover activity-to-activity transitions. I am looking for fragment-to-fragment.

自定义过渡-我尝试扩展Transition类，但是遇到了问题. CaptureStartValues()似乎从整个场景中捕获值.我只需要从recyclerview条目中捕获值即可.另外，由于某种原因，当我在函数createAnimator(ViewGroup sceneRoot，TransitionValues startValues，TransitionValues endValues)中获得空endValues时，没有捕获到最终值.

Custom Transition - I tried extending the Transition class, but I ran into the problems. CaptureStartValues() seems to capture values from the entire scene. I need it to only capture values from the recyclerview entry. Also, for some reason, the end values are not captured seeing as I get null endValues in the function createAnimator(ViewGroup sceneRoot, TransitionValues startValues, TransitionValues endValues).

TransitionSet exitTransition = new TransitionSet()
        .addTransition(new ChangeBounds())
        .addTransition(new ChangeTransform())
        .addTransition(new ChangeClipBounds())
        .addTransition(new ChangeImageTransform())
        .addTransition(new Expand())
        .setOrdering(TransitionSet.ORDERING_TOGETHER);
TransitionSet enterTransition = new TransitionSet()
        .addTransition(new Fade());
newFragment.setEnterTransition(enterTransition);
oldFragment.setExitTransition(exitTransition);

推荐答案

您应在此处使用共享元素过渡.将有2个共享元素:RecyclerView的项目背景和TextView(例如).您应该将RecyclerView的项目背景拉伸(需要使用ChangeTransform和ChangeBounds转换)到SecondFragment的背景，并将TextView移到SecondFragment的标题.并且，您应该在共享元素过渡中使用动画:首先，您应该升高RecyclerView的项目背景，然后开始拉伸背景并移动标题，最后将标高恢复为正常.并请注意，所有这些时间您的第一个片段都应该可见，因此您应该为其设置退出持续时间:fragment1.setExitTransition(new Fade().setDuration(1).setStartDelay(<duration_of_transition>));.

You should use shared element transitions here. There will be 2 shared elements: your RecyclerView's item background and TextView (for example). Your RecyclerView's item background should be stretched (you need to use ChangeTransform and ChangeBounds transitions) to your SecondFragment's background, and your TextView should be moved to SecondFragment's title. And you should use animations for your Shared Element transitions: firstly you should elevate item background of your RecyclerView, then you start stretching the background and moving your title, and in the end you should set your elevation back to normal. And note that all this time your first fragment should be visible, so you should set an exit duration to it: fragment1.setExitTransition(new Fade().setDuration(1).setStartDelay(<duration_of_transition>));.

因此，这里的主要目标是使用SharedElement过渡.在SharedElement片段到片段之间有一个非常好的文章过渡.

So the main goal here is to use SharedElement transitions. There is a very good article aboud SharedElement fragment to fragment transitions.

这篇关于材料设计父子级导航过渡回收视图查看详细片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！