网格布局共享元素转换未正确工作

3
我想创建一个在RecyclerView和Fragment之间的过渡效果,RecyclerView使用GridLayoutManager来显示用户图片缩略图,当我点击缩略图时,它会显示用户详细信息。然而,当我点击缩略图并显示详细信息时,过渡效果总是从屏幕的左上角开始,而不是从缩略图位置开始。
如何使过渡效果从缩略图位置开始?
这是我想要的结果:

Expected result

这就是我得到的:

Transition result

这是我的代码:

// UsersAdapter.kt
override fun onBindViewHolder(holder: UserViewHolder, position: Int) {
        ViewCompat.setTransitionName(holder.itemView.picture, "picture_$position")
}

// MasterFragment.kt
// This is called when i click an item in the grid
itemClickSubject.subscribe { position ->
        val user = users[position]
        val transitionName = "picture_$position"

        fragmentManager
                ?.beginTransaction()
                ?.addSharedElement(picture, transitionName)
                ?.replace(R.id.content, DetailsFragment.create(user, transitionName))
                ?.addToBackStack(null)
                ?.commit()
    }.addTo(disposables)

// DetailsFragment.kt
class DetailsFragment : Fragment() {

    companion object {

        fun create(user: User, transitionName: String): DetailsFragment {
            val args = Bundle()
            args.putParcelable("user", user)
            args.putString("transition_name", transitionName)

            val fragment = DetailsFragment()
            fragment.arguments = args

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {                   
                fragment.sharedElementEnterTransition = ChangeBounds()
                fragment.sharedElementReturnTransition = ChangeBounds()
            }

            return fragment
        }

    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_details, container, false).apply {
            val transitionName = arguments?.getString("transition_name", "")
            ViewCompat.setTransitionName(findViewById(R.id.picture), transitionName)
        }
    }

}

请复制并粘贴以下内容:Google 的 Android 过渡示例之一,它将展示如何使用共享元素过渡从一个网格视图转换到一个详细的页面视图。该示例演示了如何在 Android 应用中实现流畅的界面效果。 - JunJie Wang
1个回答

3
根据您分享的代码,假设您已经分享了所有与共享元素转换相关的代码,我认为您可能会缺少推迟和恢复共享元素转换调用。
我们希望过渡的图像加载到网格和分页器中,并需要时间来加载。为了使其正常工作,我们需要推迟转换,直到参与的视图准备就绪(例如,布局完成并加载了图像数据)。
为此,在片段的onCreateView()中调用postponeEnterTransition(),一旦图像加载完成,我们通过调用startPostponedEnterTransition()开始转换。
注意:为了支持应用程序导航时的正向和反向转换,网格和分页器片段都要调用postpone。

https://android-developers.googleblog.com/2018/02/continuous-shared-element-transitions.html

更深入解释的额外资源:

https://www.androiddesignpatterns.com/2015/03/activity-postponed-shared-element-transitions-part3b.html


1
这解决了部分问题。此外,我使用Kotlin的合成视图作为共享元素,这导致了问题。 - Mariano Córdoba

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接