Android共享视图过渡与淡入淡出过渡相结合

Question

我有一个活动，它传递了共享元素动画。这是一个基本的ImageView转换，运行良好。

现在，对于活动中的其他元素，我想要淡出动画。现在，这对于所有元素都起作用，但与ImageView（共享视图）相同视图组中的视图除外。

我的布局如下。 ImageView位于CollapsingToolbarLayout和AppBarLayout中，并且我在oncreate中设置了淡入淡出过渡：

    getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
    super.onCreate(savedInstanceState);

    Fade fade = new Fade(Fade.IN);
    fade.setDuration(4000);

    getWindow().setEnterTransition(fade);
    setContentView(R.layout.article_details);

布局：

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/article_details_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="10dp"
        app:expandedTitleMarginStart="10dp"
        app:expandedTitleTextAppearance="@style/title_text_appearence"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/article_details_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:transitionName="imageTrans"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.6"
             />


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.ToolBar"
            android:background="#0000"
            app:layout_collapseMode="pin"
             />

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:transitionGroup="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <WebView
        android:id="@+id/article_details_webview"
        android:layout_margin="20dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    app:fabSize="mini"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/star_white"
    android:layout_marginRight="16dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

因此，总结一下。 嵌套滚动布局及其 Webview 已设置为淡入显示，但是 AppBarLayout 中的其他视图没有。 AppBarLayout 中的 ImageView 表现得像应该共享的元素一样（从传递的 Activity 移动到正确位置）。 另外，只有 FloatingActionButton 的一半被淡入显示，剩余部分在 4 秒的淡入效果过后才弹出到位。

编辑：实际上我遇到了和这个人一样的问题：Content Transitions on Top of Shared Elements in android

- Kenneth

Answer 1

我找到了解决这个“问题”的方法。其实这并不是一个问题，而是预期的行为。你可以通过调用以下代码来关闭重叠：

getWindow().setSharedElementsUseOverlay(false);`

但是这通常会产生一些不必要的效果。无论哪种方式，我最终还是采用了透明主题，在我的Activity上去除了背景：

<style name="Theme.Transparent" parent="@style/AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
</style>

由于我的目标是在CollapsingToolbarLayout中淡入文字，但由于ImageView是布局的子项，我无法实现这一点。最终我做的是添加另一个ImageView，与正在动画的ImageView拥有相同的图像，并在Activity共享元素转换完成后与CollapsingToolbarLayout一起淡入。由于共享元素图像已经放置好了，新的ImageView对UI没有任何影响。当退出Activity时，我只需隐藏替换的ImageView，用户就能看到共享元素图像在父Activity中被翻译成位。

- Kenneth