Android共享元素到对话actvitiy

Question

我有一个活动,其中包含一个工具栏中的图像,以及一个活动,其主题就像一个具有相同图像的对话框.这些是布局文件:

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>

通过在清单中应用此主题,对话框活动变为对话框:

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

活动和对话框看起来都是我希望它们看起来的样子.

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

所以我写了这段代码:

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);
}

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

这是一个HTML版本,它应该是什么样子以及它目前的样子:https://jsfiddle.net/wutqdh9d/1/

Answer 1

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

因此,摆脱使用对话框主题.要在下面进行更改:

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

第二个活动布局:

<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