Android 共享元素到对话 Activity

Question

我有一个 Activity 在工具栏中有一个图像，还有一个 Activity 的主题就像一个大的相同图像的对话框。这些是布局文件:

我的 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" />

...

我的对话 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