Jetpack Navigation 中从 RecyclerView 到 Detail Fragment 的共享元素转换

Shared element transition in Jetpack Navigation from RecyclerView to Detail Fragment

我正在尝试使用 Fragment 之间共享元素的简单动画进行转换。在第一个片段中,我在 RecyclerView 中有元素,在第二个片段中 - 完全相同的元素(在单独的 xml 布局中定义,在列表元素中也是这种类型)在顶部,在视图的其余部分中有细节。我正在为 bindViewHolder 中的所有元素和目标片段的 onCreateView 中的所有元素提供各种 transitionNames 我正在阅读它们并将它们设置为我想要进行过渡的元素。无论如何动画没有发生,我没有任何其他想法。下面是我从源和目标片段和列表适配器中获取的代码片段:

列表适配器:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val item = list[position]
    ViewCompat.setTransitionName(holder.view, item.id)
    holder.view.setOnClickListener {
        listener?.onItemSelected(item, holder.view)
    }
    ...
}

interface interactionListener {
    fun onItemSelected(item: ItemData, view: View)
}

ListFragment(来源):

override fun onItemSelected(item: ItemData, view: View) {
    val action = ListFragmentDirections.itemDetailAction(item.id)
    val extras = FragmentNavigatorExtras(view to view.transitionName)
    val data = Bundle()
    data.putString("itemId", item.id)
    findNavController().navigate(action.actionId, data, null, extras)
}

SourceFragmentLayout:

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/pullToRefresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/item_overview_row" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

DetailFragment(目标):

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    val rootView = inflater.inflate(R.layout.fragment_detail, container, false)

    val itemId = ItemDetailFragmentArgs.fromBundle(arguments).itemId

    (rootView.findViewById(R.id.includeDetails) as View).transitionName = itemId

    sharedElementEnterTransition = ChangeBounds().apply {
        duration = 750
    }
    sharedElementReturnTransition= ChangeBounds().apply {
        duration = 750
    }
    return rootView
}

DetailFragmentLayout:

<include
android:id="@+id/includeDetails"
layout="@layout/item_overview_row"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

ItemOverviewRowLayout(这个作为项目包含在 recyclerView 和目标片段中作为 header):

<androidx.cardview.widget.CardView 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:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical" >

我还制作了另一个使用 Jetpack 导航、共享元素和相同 layout.xml 描述的元素的应用程序,它正在运行,因为我没有从 recyclerView 过渡到目标片段。也许我在这里错了,将 transitionName 设置为在目标片段中找到视图?我不知道如何以另一种方式实现它,因为目标包含布局的 ID 应该是唯一的,因为 recyclerView 项目。

好的,我发现使用共享元素进入动画应该是什么样子: 在 DetailFragment(目标)中,您应该 运行 postponeEnterTransition() 开始 onViewCreated(我的 onCreateView 代码可以移动到 onViewCreated)。现在您有时间使用 transitionName 签署目标视图元素。加载数据和查看结束后,您必须 运行 startPostponedEnterTransition()。如果你不这样做,ui 会卡住,所以你不能在 postponeEnterTransition 和 startPostponedEnterTransition 之间进行耗时操作。

无论如何,现在的问题是 return 转换。因为当然是同样的情况——你必须在释放动画之前重新加载 recyclerView。当然你也可以使用postponeEnterTransition(即使是return过渡)。就我而言,我有 LiveData 包装的列表。在源片段中,生命周期观察者正在检查数据。还有另一个挑战——如何确定数据是否加载。理论上,对于 recyclerView,您可以使用有用的内联函数:

inline fun <T : View> T.afterMeasure(crossinline f: T.() -> Unit) {
viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        if (measuredWidth > 0 && measuredHeight > 0) {
            viewTreeObserver.removeOnGlobalLayoutListener(this)
            f()
        }
    }
})

}

...在您应用布局管理器和适配器的代码中,您可以像这样使用它:

recyclerView.afterMeasure { startPostponedEnterTransition() }

它应该确定 return 动画应该开始的时间(你必须确定 recyclerView 项目中的 transitionNames 是否正确,以便过渡可以有目标视图项目)

从回答来看使用ViewTreeObserver是相当耗资源的。而且还有很多流程要做。所以我建议你使用 doOnPreDraw 而不是在测量 recyclerView 之后等待。代码实现如下所示。

recyclerView.doOnPreDraw {
    startPostponedEnterTransition()
}