Android 共享元素到对话框 Activity

Question

我有一个 Activity ，其中工具栏中有一个图像，另一个 Activity 的主题类似于具有相同大图像的对话框。这些是布局文件:

my_activity.xml:

...

<com.makeramen.roundedimageview.RoundedImageView
    android:id="@+id/my_image"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:scaleType="centerCrop"
    android:src="@drawable/my_drawable"
    android:transitionName="@string/my_image_transition"
    app:riv_oval="true" />

...

my_dialog_activity.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@id/my_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/my_drawable"
        android:tint="@color/accent"
        android:transitionName="@string/my_image_transition" />

</LinearLayout>

通过在 list 中应用此主题，对话框 Activity 将变成一个对话框:

<style name="MyDialogActivity" parent="Theme.AppCompat.Light.Dialog.MinWidth">
    <item name="windowNoTitle">true</item>
    <item name="android:windowMinWidthMajor">@dimen/abc_dialog_min_width_major</item>
    <item name="android:windowMinWidthMinor">@dimen/abc_dialog_min_width_minor</item>
</style>

Activity 和对话框都完全符合我想要的样子。

现在我想使用这些 ImageView 实现共享元素动画:当用户单击第一个 Activity 的图像时，它必须增大并移动到屏幕中间，以便适合更大的对话框的图像。

所以我写了这段代码:

Intent intent = new Intent(MyActivity.this, MyDialogActivity.class);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
        MyActivity.this, v, getString(R.string.my_image_transition)
    );
    startActivityForResult(intent, 999, options.toBundle());
} else {
    startActivityForResult(intent, 999);
}

动画确实发生了，但移动的图像仅在对话框区域内可见。因此，您会看到来自对话框左上角的图像，但看不到它从对话框外的第一个 Activity 移动。

以下是 HTML 版本，展示了它的外观以及当前的外观:https://jsfiddle.net/wutqdh9d/1/

Answer 1

共享元素动画是在第二个 Activity 中绘制的。当您使用 Theme.AppCompat.Light.Dialog.MinWidth 主题时，第二个 Activity 的窗口大小小于动画的绘制区域。

因此，只需摆脱使用对话框主题即可。要更改以下内容:

<style name="MyDialogActivity" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

第二个 Activity 布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center">

<ImageView
        android:id="@id/my_image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/your_icon"
        android:transitionName="@string/my_image_transition"/>

那就是这样的效果(http://gph.is/1UzZZzV)。

希望有帮助。

引用:https://stackoverflow.com/a/28508306/3171537