导航组件 RecyclerView 返回共享元素过渡。

Question

我在项目中使用导航组件。尝试从recycler设置共享元素过渡。第二个片段的进入转换效果很好，但是当我返回到第一个片段时，没有返回转换。

我尝试像在第二个片段中一样显式地设置第一个片段的进入和返回转换，如下所示：

val transition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)

sharedElementEnterTransition = transition

sharedElementReturnTransition = transition

但它并没有起到帮助作用。

还尝试过删除进出片段动画。对于第二个片段，进入转换与动画配合使用，但谁知道呢。

也尝试使用此问题中的解决方案，但在我的情况下它没有起作用。 https://dev59.com/P6_la4cB1Zd3GeqPpDGD#52922835

mainFragment

stickyAdapter.onItemClick = { event, imageView, textView ->
            val args = bundleOf(EventDetailFragment.EVENT to event)
            val extras = FragmentNavigatorExtras(
                imageView to imageView.transitionName,
                textView to textView.transitionName
            )
            findNavController().navigate(R.id.action_global_eventDetailFragment, args, null, extras)
        }

在适配器的onClick事件中，我为视图设置了唯一的过渡名称：

mainFragmentAdapter

eventImageView.setOnClickListener {
            titleTextView.transitionName = "${event.title}$TRANSITION_TITLE"
            eventImageView.transitionName = "${event.title}$TRANSITION_IMAGE" 
            onItemClick?.invoke(event, eventImageView, titleTextView) 
        }

在detailsFragment中，我从参数中获取了过渡名称（复制粘贴它们以确保没有错误，并且对于进入转换效果，它起作用了）。 我在OnCreate方法中调用postponeEnterTransition()来等待直到我可以设置过渡名称、sharedElementEnterTransition和sharedElementReturnTransition，在onViewCreated中调用startPostponedEnterTransition()。

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        postponeEnterTransition()
    }

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.fragment_event_detail, container, false).apply {
        val event = arguments?.getSerializable(EVENT) as Event?
        toolbarImageView.transitionName = "${event?.title}$TRANSITION_IMAGE"
        titleTextView.transitionName = "${event?.title}$TRANSITION_TITLE"

        val transition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
        sharedElementEnterTransition = transition
        sharedElementReturnTransition = transition
        startPostponedEnterTransition()

        toolbar.setupWithNavController(findNavController())

        event?.let {
            Picasso.get()
                .load("${EventGroupAdapter.BASE_SMALL_IMAGE_URL}${event.smallimage}")
                .into(toolbarImageView)
        }
    }
}

main_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".view.activity.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:background="?android:colorBackground"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true">

                <androidx.viewpager.widget.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:fitsSystemWindows="true" />

                <com.rd.PageIndicatorView
                    android:id="@+id/pageIndicatorView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignBottom="@id/viewPager"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="7dp"
                    app:piv_dynamicCount="true"
                    app:piv_interactiveAnimation="true"
                    app:piv_radius="3.5dp"
                    app:piv_selectedColor="@color/colorIndicatorSelected"
                    app:piv_unselectedColor="@color/colorIndicatorUnselected"
                    app:piv_viewPager="@id/viewPager" />

                <include
                    android:id="@+id/horizontalScrollView"
                    layout="@layout/fragment_main_horizontal_scroll_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/viewPager" />

            </RelativeLayout>

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

        <RelativeLayout
            android:id="@+id/relativeLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:id="@+id/emptyMessage"
                android:layout_marginTop="40dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layoutAnimation="@anim/layout_animation_from_bottom"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/ic_empty_events"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="@string/empty_events_message"
                    android:textSize="18sp" />
            </LinearLayout>

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="48dp"
                android:nestedScrollingEnabled="true"

                tools:listitem="@layout/fragment_main_event_item" />

        </RelativeLayout>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/programTextView"
        android:layout_gravity="center"
        android:visibility="gone"
        tools:visibility="visible" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:colorBackground"
        app:menu="@menu/bottom_navigation" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

请分享使用导航组件实现共享元素返回过渡效果的方法。

- Ruslan Sharipov

---

你可以在这个链接上查看我对这个问题的答案 答案链接! - João Vitor Monteiro Nandes

这是另一个解决此问题的答案 https://dev59.com/LlQJ5IYBdhLWcg3wimk1#56956248 - Rainmaker

Answer 1

前几天我遇到了这个问题：从MainFragment到DetailFragment的过渡效果表现良好，但当我按下返回键时，sharedElementReturnTransition并没有起作用。

对我来说，解决方法是将MainFragment上的过渡效果延迟。首先，我想在onCreate方法中实现延迟，但当返回时并不总是调用onCreate方法，所以我选择在onViewCreated（我猜onCreateView也可以）中延迟执行，并在RecyclerView准备就绪后开启过渡效果。

DetailFragment：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val transition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
    sharedElementEnterTransition = transition
    sharedElementReturnTransition = transition
}

主碎片：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    postponeEnterTransition()
    recycler_view.post { startPostponedEnterTransition() }
}

- tcox

---

我会将这个答案标记为被接受的，但是我无法检查它是否有效。不过看起来是行得通的。 - Ruslan Sharipov