GridLayout 共享元素转换无法正常工作

Question

我正在尝试在带有GridLayoutManager 的RecyclerView 和片段之间创建一个过渡。网格显示用户图片缩略图，当我点击缩略图时，它会显示用户的详细信息。但是，当我点击缩略图并显示详细信息时，过渡总是从屏幕的左上角开始，而不是从缩略图位置开始。

如何从缩略图位置开始过渡？

这是我想要的结果：

这就是我得到的：

这是我的代码：

// 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)
        }
    }

}

Answer 1

从您共享的代码中，假设您已共享所有添加的与共享元素转换相关的代码，我相信您会错过推迟和恢复共享元素转换调用。

我们想要转换的图像被加载到网格和寻呼机中，并且需要一些时间来加载。为了使其正常工作，我们需要推迟过渡，直到参与的视图准备好（例如布局并加载图像数据）。

为此，我们在 Fragment 的 onCreateView() 中调用了推迟EnterTransition()，一旦图像被加载，我们通过调用 startPostponedEnterTransition() 开始过渡。

注意：在导航应用时，grid 和 pager 片段都调用了推迟，以支持向前和向后的转换。

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