Question

在我的应用程序中，我有一个通过RecyclerView适配器显示的项目列表。如果我点击某个项目，则会在同一Fragment内启动新的Activity。我的项目布局和我的活动看起来（简化）如下：

活动布局：

<android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.AppBarLayout>

        <android.support.design.widget.CollapsingToolbarLayout>

            <ImageView
                android:id="@+id/image"
                android:transitionName="image" ... />

            <android.support.v7.widget.Toolbar ... />

        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout ... />

    </android.support.design.widget.AppBarLayout>

    <FrameLayout... />

</android.support.design.widget.CoordinatorLayout>

项目布局：

<RelativeLayout >

    <ImageView
        android:id="@id/itemImage"
        android:transitionName="image" />

    <LinearLayout>

        <TextView ... />

        <TextView ... />

    </LinearLayout>

</RelativeLayout>

现在，如果通过项目点击启动新片段，我想将项目图像的动画添加到ImageView中的CollapsingToolbarLayout。我阅读了有关ShareElement动画的the article但这在这里不起作用，因为这不是真正的ShareElement动画。目标ImageView不在新片段中，我也不必开始新活动（我只在新ImageView中显示目标Fragment）。那么在这种情况下如何创建这样的动画呢？

Answer 1

因此，您正在尝试将视图从一个布局设置为另一个布局。

我认为这可以使用 ViewOverlays API 来实现。您可以看到有关该API here的详细答案。

现在，在您的情况下，您最终会将ImageView添加到根布局的ViewGroupOverlay：


    final ViewGroup container = (ViewGroup) findViewById(R.id.content);
    container.getOverlay().add(imageView);
    ...

来自docs：

如果视图有父级，则视图将在添加到叠加层之前从该父级中删除。

因此，只要您执行getOverlay().add(imageView)，视图就会从其父级中删除。现在您可以自由创建动画并将imageView移动到最终目的地。


    final ViewGroup container = (ViewGroup) findViewById(R.id.content);
    container.getOverlay().add(imageView);

    // animate imageView by any API, e.g. ViewPropertyHolder
    imageView.animate()
             .x(finalX)
             .y(finalY)
             .setDuration(duration)
             .setInterpolator(interpolator)
             .withEndAction(() -> {
                // crucial point, remove the overlay
                container.getOverlay().remove(imageView);

                // add this `imageView` to the destination layout
                destLayout.addView(imageView);
             })

Here's您尝试实施的类似功能：

在相同活动

1 个答案: