android - 如何在主/细节 Pane 布局中将共享元素 ImageView 从 ListView fragment 动画化到细节 View fragment

Question

我的应用程序平板布局在左侧包含一个包含图像网格的 GridView (RecyclerView)，在右侧包含一个详细 View ，它显示当前所选 GridView 图像的较小版本以及描述该图像的其他 TextView .我想弄清楚如何提供共享元素动画过渡，它将任何单击的 ImageView (在左侧 GridView fragment 中)滑动并缩放到详细信息 View fragment 中的匹配位置。我的应用程序只需要一个“输入”转换，因为我不希望每个图像选择都记录在后台堆栈上。

我尝试在我的 OnItemClick(View view) 处理程序中使用标准共享元素支持调用，如下所示:

DetailFragment detailFragment = detailFragment.newInstance(mFragmentId);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    movieDetailFragment.setSharedElementEnterTransition(
            TransitionInflater.from(this).inflateTransition(
                    R.transition.change_image_transform));
            view.setTransitionName(getString(
                    R.string.image_transition_name));
}

getSupportFragmentManager().beginTransaction()
        .replace(R.id.detail_container,
                 detailFragment,
                 DETAIL_FRAGMENT_TAG)
        .addSharedElement(view, getString(R.string.image_transition_name))
        .commit();

“view”变量是用户在 GridView 中点击的ImageView。我的详细信息 fragment 的 onCreate() 方法也包含条目

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    mImageView.setTransitionName(
            getString(R.string.image_transition_name));
}

我还使用了以下 change_image_transform.xml 过渡集:

<transitionSet>
    <changeImageTransform/>
    <changeBounds/>
</transitionSet>

连同

<item name="android:windowContentTransitions">true</item>
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
<item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>

所有这些设置都适用于单 Pane 模式。当用户单击 GridView Activity 中的图像时，详细信息 fragment (在新 Activity 中)会替换 GridView ，并且动画在进入和返回场景中都能完美运行。

但是，在 2 Pane 模式下，图像不会从 GridView 中的源滑动和缩放到新创建的详细信息 fragment 中的目标。我认为我遇到的问题是由于源 ImageView 存在于永久可见的 GridView fragment 中，因此没有包含在动画框架的转换处理中。

除了一个模糊的建议使用简单的自定义动画之外，我的搜索没有找到任何明确的答案。我尝试了一个简单的 TranslateAnimation(没有缩放)作为测试，但这有两个问题:它不允许图像穿过 GridView fragment 的边界，并且它具有实际“移动”图像的不良副作用(离开执行动画时我的 GridView 中有一个临时空白点)。最终，所需的效果是查看图像从源到目标的滑动和缩放，而不会导致原始图像被删除。

如有任何建议或建议，我们将不胜感激。

Answer 1

我决定让共享元素过渡在 2 Pane 模式下在两个 fragment 之间工作的最简单方法是自己制作动画。在我的解决方案中，我没有用所选网格图像的细节替换细节 fragment ；相反，我只是使用来自所选网格项的新数据刷新布局控件。当目标 ImageView 暂时从细节 View 中移除并放置在叠加层中(用于动画)时，为了防止父线性布局调整大小，ImageView 父级被强制调整为包含的子级的大小，然后在之后恢复到其原始布局宽度和高度动画。下面是执行动画以响应网格项单击事件的函数:

/**
 * Sets up and runs an animation that translates and scales the
 * selected poster in the grid view to the poster ImageView in the
 * detail fragment.
 * @param srcView
 * @param destView
 */
private void runAnimation(final ImageView srcView, final ImageView destView) {
    final ViewGroup destParentView = (ViewGroup)destView.getParent();

    // Set the destination image view's parent (FrameLayout) to
    // keep the width and height of image view that will be
    // temporarily re-parented during the animation. This will
    // ensure that the enclosing LinearLayout will remain fixed
    // in appearance during the animation.
    final int parentLayoutWidth = destParentView.getLayoutParams().width;
    final int parentLayoutHeight = destParentView.getLayoutParams().height;
    destParentView.getLayoutParams().width = destParentView.getMeasuredWidth();
    destParentView.getLayoutParams().height = destParentView.getMeasuredHeight();

    // Scale the destination image to the size of
    // the source image. The animation will restore
    // the destination image scale when it is run.
    // Note that the scale needs to be set before any
    // translation so that the translation takes into
    // account the change in scale.
    float scaleX = (float)destView.getMeasuredWidth()
            / (float)srcView.getMeasuredWidth();
    float scaleY = (float) destView.getMeasuredHeight()
            / (float) srcView.getMeasuredHeight();

    destView.setScaleX(1f / scaleX);
    destView.setScaleY(1f / scaleY);

    // Now set translation on scaled image so that the
    // destination image begins at the same position as
    // the source image. The destination image translation
    // will be returned to 0 during the animation.
    int[] srcLocation = {0, 0};
    int[] dstLocation = {0, 0};
    srcView.getLocationOnScreen(srcLocation);
    destView.getLocationOnScreen(dstLocation);
    destView.setTranslationX(srcLocation[0] - dstLocation[0]);
    destView.setTranslationY(srcLocation[1] - dstLocation[1]);

    // The overlay must be created from any view whose bounds
    // encompasses both the source and destination views.
    final ViewGroup rootView =
                (ViewGroup)MainActivity.this.findViewById(R.id.main_content);
    rootView.getOverlay().add(destView);

    // Run animation and when it completes, move the destination
    // view from the overlay back to it's original parent. Also,
    // restore the parent's layout params which were changed to
    // act as a placeholder with the image was being animated.
    destView.animate()
            .scaleX(1f)
            .scaleY(1f)
            .translationX(0)
            .translationY(0)
            .setInterpolator(new DecelerateInterpolator(2))
            .setDuration(500)
            .withEndAction(new Runnable() {
                @Override
                public void run() {
                    rootView.getOverlay().remove(destView);
                    destParentView.getLayoutParams().width = parentLayoutWidth;
                    destParentView.getLayoutParams().height = parentLayoutHeight;
                    destParentView.addView(destView);
                }
            });
}