Android 对话活动的共享元素

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>

通过在清单中应用此主题，对话框 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的window大小小于动画的绘图区域。

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

<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).

希望对您有所帮助。

参考：

Answer 2

 <style name="dialog_style_activity">
        <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>

以上风格适合我。在 manifest.xml.

中引用此样式

Android 对话活动的共享元素

Android shared element to dialog actvitiy

android

android-dialog

android-activity