Android共享元素过渡：英雄视图在其他视图前绘制。

Question

请看这个视频，展示了一个共享元素的活动转换。 它是从列表活动到详细活动的转换。

[视频链接不再有效]

正如您所看到的那样，ImageView 在选项卡的前面被绘制出来。

我期望的是选项卡在 ImageView 上方绘制，并在整个转换过程中逐渐消失（以便在动画结束时它们消失）。

唯一有效的方法似乎是将 windowSharedElementsUseOverlay 设为 true， 但这会带来其他难看的影响，所以这不是一个选择。

最常建议的方法是在转换本身中包含选项卡，但问题在于详细活动中没有选项卡，因此不能共享。

---

代码： 我像这样启动详细活动：

options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, pairs);
ActivityCompat.startActivity(activity, subActivity, options.toBundle());

- Lisa Anne

---

你的样式中是否有一个高度设置？视图出现在彼此之上的原因之一就是设置了高度。 - Simon Guerout

我通过在项目被点击时略微向下滚动我的RecyclerView来解决了这个问题，这样视图就不会被ActionBar/Toolbar遮挡，然后一旦滚动事件完成，就执行过渡。虽然不是理想的解决方案，但它看起来很好，而且能够胜任工作。复杂之处在于确定向下滚动多少，这取决于视图被遮挡的程度。 - Tim Malseed

@SimonGuerout 谢谢Simon，我尝试去掉所有动画，但没有成功 :-((( - Lisa Anne

Answer 1

我相信您需要排除标签布局而不是将其包含在转换动画中。

因此，在您的列表活动的onCreate中，包括以下内容：

Transition fade = new Fade();
fade.excludeTarget(R.id.tab, true); // use appropriate id for you tab
getWindow().setExitTransition(fade);
getWindow().setEnterTransition(fade); // try getWindow().setReenterTransition(fade); instead

一定要查看Alex Lockwood对于如何在活动场景动画转换期间防止状态栏和导航栏动画化的答案，他在这个主题上给出了更深入但易懂的解释。您可能还想考虑添加/实现该帖子中的解决方案。

- ade.akinyede

---

谢谢ade，但那个不起作用。我不确定我理解你的意思：您建议从详细活动的过渡中排除选项卡，但它们属于主活动（在详细活动中不存在）。 - Lisa Anne

转换框架提供了两种类型的过渡：内容过渡和共享元素过渡。对于您的用户界面，选项卡是一个非共享元素，因此您想要/必须控制的是列表/主活动的非共享元素即选项卡的退出和重新进入。这就是上面的代码尝试做的事情。 - ade.akinyede

Answer 2

你应该尝试这样做：

在现有的活动中，调用getWindow().setExitTransition(null);

在进入的活动中，调用getWindow().setEnterTransition(null);

这将防止退出活动的淡出和进入活动的淡入，消除了明显的闪烁效果，使过渡更加平滑。

- Sandip Patel

Answer 3

我的调用活动中有一个选项卡布局和一个工具栏，每次进行转换时，图像都会出现在选项卡布局和工具栏的顶部，使转换看起来不整洁。我通过在我的被调用活动中添加一个“虚拟”选项卡布局和一个“虚拟”工具栏来优雅地解决了这个问题。这些“虚拟”元素不可见，因此不会影响我的被调用活动的布局，但如果您将它们添加到其中，则转换效果将正常工作。

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar2"
                    android:transitionName="toolbar"
                    android:visibility="gone"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize" />

                <android.support.design.widget.TabLayout
                    android:id="@+id/sliding_tabs"
                    android:layout_width="match_parent"
                    android:layout_height="60dp"
                    android:visibility="gone"
                    android:transitionName="tab"
                    ></android.support.design.widget.TabLayout>

然后我将选项卡布局和工具栏作为一对添加到我的过渡中：

        Pair<View, String> p4 = Pair.create(getActivity().findViewById(R.id.sliding_tabs), "tab");
        Pair<View, String> p5 = Pair.create(getActivity().findViewById(R.id.toolbar), "toolbar");
        Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(), p1, p2, p3, p4, p5).toBundle();

- Simon