共享元素转换图像在退出转换时跳下

Question

我一直在到处寻找这个问题的原因，并采用了我在网上找到的大多数解决方案，但是我没有运气。

在这种情况下，我有两个活动，一个活动是在每个选项卡中都有一个viewpager和一个recyclerview。当我单击来自recyclerview的项目之一时，它将打开一个模式活动，该活动在片段内具有目标过渡图像。

因此，图像将从recyclerview项扩展为活动模式图像

所以像这样：Activity1 / ViewPager / RecyclerView / Item / Image-> Activity2 / Fragment / Image

[从Activity1到Activity2的效果很好，但是当退出动画发生时，图像跳下来，就像一半的图像一样，并在Activity中降落了一半，所以看起来真的很笨拙。

这里有一些代码片段：

recyclerview_item.xml

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

<LinearLayout
    android:id="@+id/product_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"
    android:orientation="vertical">

    <RelativeLayout
        android:background="@drawable/bordered_image"
        android:padding="2dp"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/product_image"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:src="@drawable/default_item" />
    </RelativeLayout>

    <TextView
        android:id="@+id/product_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:gravity="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/product_price"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="16sp" />

</LinearLayout>

我这样打开活动：

val options = ActivityOptions
    .makeSceneTransitionAnimation(this, sharedImage, sharedImage.transitionName)
startActivity(intent, options.toBundle())

这是我处理模态活动的方式

    requestWindowFeature(Window.FEATURE_NO_TITLE)
    window.setBackgroundDrawableResource(R.drawable.rounded_dialog)
    window.setLayout(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.WRAP_CONTENT
    )

并且在片段的onCreateView中，我添加了这个

image.transitionName = "image_${mItem.id}"
image.loadUrl(mItem.image)
startPostponedEnterTransition()

而且我使用滑行来显示这样的图像

private fun ImageView.loadUrl(url: String) {
    val options = RequestOptions()
    Glide.with(context)
        .load(url)
        .apply(
            options.transforms(
                CenterCrop(),
                RoundedCorners(150)
            )
        )
        .into(this)
}

这是图像返回活动1的方式：

EDIT：所以我找到了问题。我为活动对话框使用自定义样式。在Android清单中，我将此添加到活动中：

<activity android:name=".activities.Activity2"
    android:theme="@style/AppTheme.ActivityDialog"/>

样式是这个：

<style name="AppTheme.ActivityDialog" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowContentTransitions">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowBackground">@color/white</item>
</style>

以某种方式破坏了动画

Answer 1

所以我发现了问题所在：

活动过渡的工作原理是这样的。当您开始第二个活动时，它会显示在第一个活动的顶部，并带有透明背景。共享元素的位置与在第一个活动上的放置方式相同，然后动画化到第二个活动上指定的正确位置。]

在您的情况下，您使用的是android：theme =“ @ style / Theme.AppCompat.Dialog”，这意味着第二个活动的绘画区域的大小小于第一个活动的绘画区域的大小。这说明了裁剪和单击外部时的无过渡。

我将Activity2的主题更改为此：

<style name="AppTheme.ActivityDialog" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>
并将卡片视图添加到活动2的布局中，现在可以使用