Android共享元素转换：英雄视图被绘制在其他视图前面答案

【问题标题】：Android shared element transition: hero view gets drawn in front of otherAndroid共享元素转换：英雄视图被绘制在其他视图前面
【发布时间】：2016-04-30 18:26:57
【问题描述】：

请观看显示共享元素活动转换的视频。这是从列表活动到详细活动的过渡。

[视频链接失效]

如您所见，图像视图被绘制在选项卡前面。

我期望的是标签在 imageview 上以字体绘制并在整个过渡过程中淡出（因此在动画结束时它们消失了）。

似乎唯一可行的是将windowSharedElementsUseOverlay 设置为true，但这还有其他丑陋的影响，所以这似乎不是一个选择。

最常用的建议方法是将选项卡包含在转换本身中，但问题是这些选项卡不在详细信息活动中，因此无法共享。

代码：我像这样开始详细活动：

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

【问题讨论】：

您是否在您的风格中设置了高程？视图相互重叠的原因之一是设置了高程。
我通过在单击项目时稍微向下滚动我的RecyclerView 来解决此问题，因此ActionBar/Toolbar 不会阻碍视图，然后执行一次转换滚动事件已完成。不理想，但它看起来不错并且可以完成工作。复杂性在于根据有多少视图被遮挡来确定向下滚动多少。
@SimonGuerout 谢谢西蒙，试图删除所有动画，没有成功:-(((

标签： android shared-element-transition

【解决方案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 对How do I prevent the status bar and navigation bar from animating during an activity scene animation transition? 的回答，他在其中就该主题给出了更深入、更深入但易于理解的解释。您可能还想考虑在该帖子中添加/实施解决方案。

【讨论】：

感谢 ade，这不起作用。我不确定我是否理解您的观点：您建议将选项卡从详细活动的过渡中排除，但它们属于主活动（并且不存在于详细活动中）。
转场框架有两种类型：内容转场和共享元素转场。对于您的 UI，选项卡是非共享元素，因此您想要/必须控制的是列表/主活动的非共享元素（即选项卡）的退出和重新进入。这就是上面的代码试图做的。

【解决方案2】：

你应该试试这个：

在退出的活动上，调用 getWindow().setExitTransition(null);

在进入Activity时，调用getWindow().setEnterTransition(null);

它将防止退出活动的淡出和进入活动的淡入，从而消除明显的闪烁效果并使过渡平滑。

【讨论】：

【解决方案3】：

我的调用 Activity 中有一个 tablayout 和一个工具栏，每次我进行转换时，图像都会出现在 tablayout 和工具栏的顶部，使转换看起来不整洁。

我通过在我调用的活动中添加一个“虚拟”选项卡布局和一个“虚拟”工具栏非常优雅地解决了这个问题。 “虚拟”元素不可见，因此不会影响我调用的活动的布局，但如果添加它们，过渡效果将正常工作。

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

【讨论】：