共享元素转换 ImageView 变白

Question

我正在使用RecyclerView到ViewPager的共享元素过渡。问题在于，当ViewPager翻页到另一张图片后，返回到RecyclerView时，第一个动画的ImageView会变成白色。

开始使用ViewPager：

FragmentTransaction fragmentTransaction = getSupportFragmentManager()
            .beginTransaction()
            .setReorderingAllowed(true)
            .addSharedElement(view, name)
            .hide(recyclerFragment)
            .add(R.id.main_frameLayout, viewpagerFragment, tag)
            .commit();

返回到RecyclerView片段：

FragmentTransaction fragmentTransaction = getSupportFragmentManager()
            .beginTransaction()
            .setReorderingAllowed(true)
            .addSharedElement(view, name)
            .remove(viewpagerFragment)
            .show(recyclerFragment)
            .commit();

编辑： 请注意，我知道位置并正确设置了转换名称。

- Amir

---

你解决了吗？ - Elad Finish

@EladFinish 是的。被接受的答案是正确的。然而，我的问题是我意识到我的代码没有使用RecyclerView，而是3个ImageView。 - Amir

Answer 1

我已经为您创建了一个示例，用于"Recyclerview + ViewPager + SharedTransition"

首先让我告诉您代码中的问题是，您添加和删除片段而不是替换它，当启动viewpager并从viewpager返回时。另外，您必须采取整数变量来保存recyclerview和viewpager的当前位置。

下面是一个演示gif，展示了我所实现的功能：

首先在您的MainActivity中将"currentPosition"作为int变量声明如下：

public static int currentPosition;

然后创建一个抽象的“ImageData”类，其中包含如下的图像数组：

abstract class ImageData {
    static final int[] IMAGE_DRAWABLES = {
            R.drawable.android1,
            R.drawable.android2,
            R.drawable.android3,
            R.drawable.android4,
            R.drawable.android5,
    };
}

现在创建一个"GridAdapter"，它将在recyclerView中显示图像列表：

/**
 * A fragment for displaying a grid of images.
 */
public class GridAdapter extends RecyclerView.Adapter<ImageViewHolder> {

    /**
     * A listener that is attached to all ViewHolders to handle image loading events and clicks.
     */
    private interface ViewHolderListener {

        void onLoadCompleted(ImageView view, int adapterPosition);

        void onItemClicked(View view, int adapterPosition);
    }

    private final RequestManager requestManager;
    private final ViewHolderListener viewHolderListener;

    /**
     * Constructs a new grid adapter for the given {@link Fragment}.
     */
    public GridAdapter(Fragment fragment) {
        this.requestManager = Glide.with(fragment);
        this.viewHolderListener = new ViewHolderListenerImpl(fragment);
    }

    @Override
    public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.image_card, parent, false);
        return new ImageViewHolder(view, requestManager, viewHolderListener);
    }

    @Override
    public void onBindViewHolder(ImageViewHolder holder, int position) {
        holder.onBind();
    }

    @Override
    public int getItemCount() {
        return IMAGE_DRAWABLES.length;
    }

    private static class ViewHolderListenerImpl implements ViewHolderListener {

        private Fragment fragment;
        private AtomicBoolean enterTransitionStarted;

        ViewHolderListenerImpl(Fragment fragment) {
            this.fragment = fragment;
            this.enterTransitionStarted = new AtomicBoolean();
        }

        @Override
        public void onLoadCompleted(ImageView view, int position) {
            // Call startPostponedEnterTransition only when the 'selected' image loading is completed.
            if (MainActivity.currentPosition != position) {
                return;
            }
            if (enterTransitionStarted.getAndSet(true)) {
                return;
            }
            fragment.startPostponedEnterTransition();
        }

        @Override
        public void onItemClicked(View view, int position) {
            // Update the position.
            MainActivity.currentPosition = position;

            // Exclude the clicked card from the exit transition (e.g. the card will disappear immediately
            // instead of fading out with the rest to prevent an overlapping animation of fade and move).
            ((TransitionSet) fragment.getExitTransition()).excludeTarget(view, true);

            ImageView transitioningView = view.findViewById(R.id.card_image);
            fragment.getFragmentManager()
                    .beginTransaction()
                    .setReorderingAllowed(true) // Optimize for shared element transition
                    .addSharedElement(transitioningView, transitioningView.getTransitionName())
                    .replace(R.id.fragment_container, new ImagePagerFragment(), ImagePagerFragment.class
                            .getSimpleName())
                    .addToBackStack(null)
                    .commit();
        }
    }

    /**
     * ViewHolder for the grid's images.
     */
    static class ImageViewHolder extends RecyclerView.ViewHolder implements
            View.OnClickListener {

        private final ImageView image;
        private final RequestManager requestManager;
        private final ViewHolderListener viewHolderListener;

        ImageViewHolder(View itemView, RequestManager requestManager,
                        ViewHolderListener viewHolderListener) {
            super(itemView);
            this.image = itemView.findViewById(R.id.card_image);
            this.requestManager = requestManager;
            this.viewHolderListener = viewHolderListener;
            itemView.findViewById(R.id.card_view).setOnClickListener(this);
        }

        void onBind() {
            int adapterPosition = getAdapterPosition();
            setImage(adapterPosition);
            // Set the string value of the image resource as the unique transition name for the view.
            image.setTransitionName(String.valueOf(IMAGE_DRAWABLES[adapterPosition]));
        }

        void setImage(final int adapterPosition) {
            // Load the image with Glide to prevent OOM error when the image drawables are very large.
            requestManager
                    .load(IMAGE_DRAWABLES[adapterPosition])
                    .listener(new RequestListener<Drawable>() {
                        @Override
                        public boolean onLoadFailed(@Nullable GlideException e, Object model,
                                                    Target<Drawable> target, boolean isFirstResource) {
                            viewHolderListener.onLoadCompleted(image, adapterPosition);
                            return false;
                        }

                        @Override
                        public boolean onResourceReady(Drawable resource, Object model, Target<Drawable>
                                target, DataSource dataSource, boolean isFirstResource) {
                            viewHolderListener.onLoadCompleted(image, adapterPosition);
                            return false;
                        }
                    })
                    .into(image);
        }

        @Override
        public void onClick(View view) {
            // Let the listener start the ImagePagerFragment.
            viewHolderListener.onItemClicked(view, getAdapterPosition());
        }
    }

}

现在还要为viewpager创建一个适配器，在从recyclerView中点击项目后，将图片显示在viewpager中：

public class ImagePagerAdapter extends FragmentStatePagerAdapter {

  public ImagePagerAdapter(Fragment fragment) {
    // Note: Initialize with the child fragment manager.
    super(fragment.getChildFragmentManager());
  }

  @Override
  public int getCount() {
    return IMAGE_DRAWABLES.length;
  }

  @Override
  public Fragment getItem(int position) {
    return ImageFragment.newInstance(IMAGE_DRAWABLES[position]);
  }
}

首先按照以下方式为“ImagePagerFragment”创建XML和转换：

fragment_image.xml

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="@string/image_description"
    android:scaleType="fitCenter"/>

在res目录下创建tansition文件夹：

image_shared_element_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="375"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:transitionOrdering="together">
    <changeClipBounds />
    <changeTransform />
    <changeBounds />
</transitionSet>

grid_exit_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="375"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:startDelay="25">
    <fade>
        <targets android:targetId="@id/card_view" />
    </fade>
</transitionSet>

现在创建“ImagePagerFragment”以在viewPager中显示图片。

/**
 * A fragment for displaying a pager of images.
 */
public class ImagePagerFragment extends Fragment {

    private ViewPager viewPager;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        viewPager = (ViewPager) inflater.inflate(R.layout.fragment_pager, container, false);
        viewPager.setAdapter(new ImagePagerAdapter(this));
        // Set the current position and add a listener that will update the selection coordinator when
        // paging the images.
        viewPager.setCurrentItem(MainActivity.currentPosition);
        viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                MainActivity.currentPosition = position;
            }
        });

        prepareSharedElementTransition();

        // Avoid a postponeEnterTransition on orientation change, and postpone only of first creation.
        if (savedInstanceState == null) {
            postponeEnterTransition();
        }

        return viewPager;
    }

    /**
     * Prepares the shared element transition from and back to the grid fragment.
     */
    private void prepareSharedElementTransition() {
        Transition transition =
                TransitionInflater.from(getContext())
                        .inflateTransition(R.transition.image_shared_element_transition);
        setSharedElementEnterTransition(transition);

        // A similar mapping is set at the GridFragment with a setExitSharedElementCallback.
        setEnterSharedElementCallback(
                new SharedElementCallback() {
                    @Override
                    public void onMapSharedElements(List<String> names, Map<String, View> sharedElements) {
                        // Locate the image view at the primary fragment (the ImageFragment that is currently
                        // visible). To locate the fragment, call instantiateItem with the selection position.
                        // At this stage, the method will simply return the fragment at the position and will
                        // not create a new one.
                        Fragment currentFragment = (Fragment) viewPager.getAdapter()
                                .instantiateItem(viewPager, MainActivity.currentPosition);
                        View view = currentFragment.getView();
                        if (view == null) {
                            return;
                        }

                        // Map the first shared element name to the child ImageView.
                        sharedElements.put(names.get(0), view.findViewById(R.id.image));
                    }
                });
    }
}

现在创建“ImageFragment”，它将作为ViewPager项目打开：

public class ImageFragment extends Fragment {

    private static final String KEY_IMAGE_RES = "com.key.imageRes";

    public static ImageFragment newInstance(@DrawableRes int drawableRes) {
        ImageFragment fragment = new ImageFragment();
        Bundle argument = new Bundle();
        argument.putInt(KEY_IMAGE_RES, drawableRes);
        fragment.setArguments(argument);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        final View view = inflater.inflate(R.layout.fragment_image, container, false);

        Bundle arguments = getArguments();
        @DrawableRes int imageRes = arguments.getInt(KEY_IMAGE_RES);

        // Just like we do when binding views at the grid, we set the transition name to be the string
        // value of the image res.
        view.findViewById(R.id.image).setTransitionName(String.valueOf(imageRes));

        // Load the image with Glide to prevent OOM error when the image drawables are very large.
        Glide.with(this)
                .load(imageRes)
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable>
                            target, boolean isFirstResource) {
                        // The postponeEnterTransition is called on the parent ImagePagerFragment, so the
                        // startPostponedEnterTransition() should also be called on it to get the transition
                        // going in case of a failure.
                        getParentFragment().startPostponedEnterTransition();
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable>
                            target, DataSource dataSource, boolean isFirstResource) {
                        // The postponeEnterTransition is called on the parent ImagePagerFragment, so the
                        // startPostponedEnterTransition() should also be called on it to get the transition
                        // going when the image is ready.
                        getParentFragment().startPostponedEnterTransition();
                        return false;
                    }
                })
                .into((ImageView) view.findViewById(R.id.image));
        return view;
    }
}

所有工作完成！你可以运行这段代码并获得上面GIF演示中所实现的效果。在这里，你可以看到我没有添加或删除片段。只是用共享转换元素替换当前片段。

注意：在这个例子中，我只使用了5个项目。如果你想要获取更多项目并动态加载URL，那么你也可以使用这个方法。

- android

---

感谢您花时间提供完整详细的答案。不幸的是，当启动viewpager时，我无法使用replace，因为我的第一个片段是一个复杂的页面，替换它将结束其生命周期，因此返回并从头开始初始化它是昂贵的。是否有任何使用hide和show来避免白色ImageView的解决方案？ - Amir

所以另一个选项可以是：1. 分离片段，2. 尝试使用Glide将图像存储在RecyclerView的缓存中，3. 将您的ViewPager的offscreenpagelimit设置为三。 - android

我使用detach和attach得到了相同的结果。如果有一种方法可以将imageview状态刷新为正常状态，问题就会得到解决。我不知道过渡是如何将图像变成白色的。我尝试使用setVisibility、setAlpha和requestLayout来刷新视图。 - Amir

是的。我正在使用Picasso库并缓存图像。我还尝试了setOffscreenPageLimit。 - Amir

你能分享一下ViewPager和RecyclerView的整个类文件吗？也许我可以帮你。 - android

抱歉，代码和类太复杂了，我不能分享整个项目。 - Amir