android - 共享过渡不适用于 recyclerview 到 fragment

Question

我正在尝试在我的应用中实现共享过渡。我想要 RecyclerView 中的 ImageView 将出现在下一个 fragment 中，以共享从 RecyclerView 到 fragment 的转换。但它不起作用。这是我是怎么做到的。

回收商的项目布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/iv_cover"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:transitionName="cover"
        android:src="@drawable/ic_check_circle" />

    <View
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#30000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="150dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/tv_title"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/colorPrimary"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="BBC"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"
            android:textColor="#fff"
            android:textSize="16dp" />

        <TextView
            android:id="@id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/colorPrimary"
            android:maxLines="3"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="NEWS TITLE"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:textColor="#fff"
            android:textSize="20sp" />
    </RelativeLayout>
</RelativeLayout>

fragment 布局

<?xml version="1.0" encoding="utf-8"?>
<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/iv_cover"
        android:transitionName="cover"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_story"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Read Full Story"
        android:layout_gravity="center"/>
</LinearLayout>

这是我使用的java代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //ImageView ivCover = (ImageView) getActivity().findViewById(R.id.iv_cover);
            getActivity().getSupportFragmentManager()
                    .beginTransaction()
                    .replace(android.R.id.content, feedFragment, "Feed")
                    .addSharedElement(cover, "cover")
                    .addToBackStack("Feed")
                    .commit();
        } 

这是 fragment 代码

@Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        postponeEnterTransition();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
        }
    }
 private void loadData() {
    String title = null;
    String description = null;
    String urlToImage = null;
    String url = null;
    try {
        title = getArguments().getString(ARG_PARAM1);
        description = getArguments().getString(ARG_PARAM2);
        url = getArguments().getString(ARG_PARAM3);
        urlToImage = getArguments().getString(ARG_PARAM4);
    } catch (Exception e) {
        e.printStackTrace();
    }
    if (title != null)
        tvTitle.setText(title);
    if (tvDescription != null)
        tvDescription.setText(description);
    if (urlToImage != null)
        Picasso.with(getActivity()).load(urlToImage).into(ivCover, new Callback() {
            @Override
            public void onSuccess() {
                startPostponedEnterTransition();
            }

            @Override
            public void onError() {
                startPostponedEnterTransition();
            }
        });
}

这是风格

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowContentTransitions">true</item>
</style>

我做错了什么？请在这里指导我。谢谢

Answer 1

在您的 onBindViewHolder 中，添加以下行:

holder.ivCover.setTransitionName("trans_image" + position);

每个共享元素都应该有一个唯一的过渡名称。

所以代替 .addSharedElement(cover, "cover") ,

编写.addSharedElement(cover, imageTransitionName)

在哪里，

imageTransitionName = rv_imageView.getTransitionName(); 

并且，根据您的实现(onClickListener 将需要 view.findViewById() 而不是 getActivity()...)，

ImageView rv_imageView =(ImageView) getActivity().findViewById(R.id.iv_cover);

您也可以尝试fade 或slide_right 或您自己的自定义过渡。

当您单击一个项目并出现一个新的详细 fragment 时，所有这些都将在场景中起作用

所以你需要在一个包中发送 imageTransitionName ......并在细节(比如) fragment 中获取该参数，比如

String imageTransitionName = bundle.getString("TRANS_NAME");
view.findViewById(R.id.iv_cover).setTransitionName(imageTransitionName);