【问题标题】:Android shared view transition combined with fade transitionAndroid 共享视图过渡结合淡入淡出过渡
【发布时间】:2015-11-22 05:41:05
【问题描述】:

我有一个传递共享元素动画的活动。这是一个基本的 ImageView 过渡,工作得很好。

现在,对于 Activity 中的其他元素,我想要一个淡入淡出动画。现在,这适用于所有元素,但与 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

【问题讨论】:

    标签: android android-layout android-activity transition


    【解决方案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 与在活动之间动画的图像相同的图像,并在 Activity 共享元素转换完成后将其与 CollapsingToolbarLayout 一起淡入。由于共享元素图像已经到位,新的 ImageView 在 UI 中没有任何区别。解决方案当然不是最佳的,但我的问题的唯一一个 - 考虑到 API 的行为方式。退出 Activity 时,我只需隐藏替换的 ImageView,用户就会看到共享元素图像在父 Activity 中转换到位。

    【讨论】:

      猜你喜欢
      • 2012-02-04
      • 1970-01-01
      • 2021-10-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-03-31
      相关资源
      最近更新 更多