ViewPager Fragments – 共享元素转换 [英] ViewPager Fragments – Shared Element Transitions

问题描述

我正在开发的应用显示了一个图像网格.当您点击图像时，它会进入详细信息视图.详细信息视图包含一个 ViewPager，允许您在网格中的每个图像之间滑动.这是通过传递路径列表(包含网格中的每个图像)以及被点击的图像的偏移量来完成的，因此可以将 ViewPager 设置为最初显示该页面.

An app I'm developing displays a grid of images. When you tap an image, it goes into the details view. The details view contains a ViewPager that allows you swipe between every image in the grid. This is done by passing a lists of paths (containing every image in the grid), along with an offset of the image that was tapped so the ViewPager can be set to show that page initially.

在 ViewPager 中当前偏移页面的 Fragment 内进行共享元素转换的最佳方法是什么?网格 (RecyclerView) 图像应扩展为当前页面中的全屏图像.我看到了推迟和恢复活动转换的能力，因此应用程序将等待显示共享元素转换，直到从磁盘加载图像.但我希望能够在视图寻呼机中将其动画化到正确的页面，并在用户返回时退出到当前页面的任何位置(因为您可以在页面之间滑动).如果您现在滑动到其他页面，则初始页面会以动画方式返回到网格中.

What's the best way to have a shared element transition inside the Fragment of the current offset page in the ViewPager? The grid (RecyclerView) image should expand into the full screen image in the current page. I saw the ability to postpone and resume activity transitions, so the app would wait to display the shared element transition until the image is loaded from the disk. But I want to be able to make it animate to the correct page in the view pager, and also exit to whatever the current page is when the user goes back (since you can swipe between pages). If you swipe to a different page now, the initial page is what animates back into the grid.

目前，我为视图寻呼机的 Fragments 中的每个图像分配了一个格式为image_[index]"的 transitionName.当我开始详细信息活动时，我使用相同的 transitionName，索引是偏移量.

Currently, I assign every image in the Fragments of the view pager with a transitionName in the format "image_[index]". When I start the details activity, I use the same transitionName with the index being the offset.

与此相关，我也想知道如何通过长按使涟漪起作用.当您更改视图的激活状态时，它似乎取消了涟漪.我想要一个类似于 Gmail 的效果，在长按完成并触发激活状态后，涟漪再次开始并迅速结束.

Related to this, I was also wondering how to make ripples work with long presses. When you change a view's activated state, it seems to cancel the ripple. I want an effect similar to Gmail, where the ripple starts over again and quickly finishes after a long press is complete and triggers the activated state.

推荐答案

据我所知(如果我错了，请纠正我)，你想要实现的基本上是这样的:假设你有一个 MainActivity、一个 DetailsActivity 和一组任意的图像.MainActivity 在网格中显示图像集，DetailsActivity 在水平 ViewPager 中显示相同的图像集.当用户在 MainActivity 中选择一个图像时，该图像应该从它在网格中的位置转换到第二个活动的 ViewPager 中的正确页面.

From what I can tell (and correct me if I'm wrong), what you are trying to achieve is basically something like this: Assume you have a MainActivity, a DetailsActivity, and an arbitrary set of images. The MainActivity displays the set of images in a grid and the DetailsActivity displays the same set of images in a horizontal ViewPager. When the user selects an image in the MainActivity, that image should transition from its position in the grid to the correct page in the second activity's ViewPager.

我们要解决的问题是如果用户在DetailsActivity内切换页面怎么办"?如果发生这种情况，我们希望更改将在返回过渡期间使用的共享图像.默认情况下，活动转换框架将使用在输入转换期间使用的共享元素……但是视图分页器的页面已更改，因此显然我们希望以某种方式覆盖此行为.为此，我们需要在您的 MainActivity 和 DetailsActivity 的 onCreate() 方法中设置一个 SharedElementCallback并像这样覆盖 onMapSharedElements() 方法:

The problem we want to solve is "what if the user switches pages inside the DetailsActivity"? If this happens, we want to change the shared image that will be used during the return transition. By default, the activity transition framework will use the shared element that was used during the enter transition... but the view pager's page has changed so obviously we want to somehow override this behavior. To do so, we will need to set a SharedElementCallback in your MainActivity and DetailsActivity's onCreate() methods and override the onMapSharedElements() method like so:

private final SharedElementCallback mCallback = new SharedElementCallback() {
    @Override
    public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {
        if (mCurrentImagePosition != mOriginalImagePosition) {
            View sharedView = getImageAtPosition(mCurrentImagePosition);
            names.clear();
            sharedElements.clear();
            names.add(sharedView.getTransitionName());
            sharedElements.put(sharedView.getTransitionName(), sharedView);
        }
    }

    /**
     * Returns the image of interest to be used as the entering/returning
     * shared element during the activity transition.
     */
    private View getImageAtPosition(int position) {
        // ...
    }
};

为了获得更完整的解决方案，我创建了一个 GitHub 上的示例项目，它将实现这种效果(在单个 StackOverflow 答案中发布的代码太多).

For a more complete solution, I have created a sample project on GitHub that will achieve this effect (there is too much code to post in a single StackOverflow answer).

这篇关于ViewPager Fragments – 共享元素转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！