如何在导航操作中使用共享元素转换

Question

我有两个片段，我想在它们之间使用共享元素转换。但我仍然想使用导航操作在它们之间传递数据。

从第一个片段开始，我只使用 Glide 加载了图像 uri，它来自 recyclerView。我正在传递图像描述以及图像 id-> fileId

  val action =
            MediaFragmentDirections.actionNavMediaToPhotoGalleryEditImageFragment(
                imageUri,
                description,
                fileId
            )
        findNavController().navigate(action)

在第二个片段中，我从 args 获取 uri 并再次使用 glide 显示它

private val args: MediaFragmentPhotoNameArgs by navArgs()
...


   val photoIV = args.imageData
        /*load the image sent from media fragment*/
        Glide.with(this)
            .load(photoIV)
            .into(photoGalleryImage)

在文档中是这样的

val extras = FragmentNavigatorExtras(view1 to "hero_image")

view.findNavController().navigate(
    R.id.confirmationAction,
    null, // Bundle of args
    null, // NavOptions
    extras)

我不知道如何通过它传递动作，因为我还需要第二个片段中的其他变量。

请问我该如何实现？

Answer 1

您需要创建一个Navigator.Extras 对象并将其作为第二个参数传递给navigate：

val extras = FragmentNavigatorExtras(imageView to "transition_name")

val action = MediaFragmentDirections.actionNavMediaToPhotoGalleryEditImageFragment(
                imageUri,
                description,
                fileId
            )
        findNavController().navigate(action, extras)

imageView 是用户点击它的视图，transition_name 是您还必须将其设置为目标视图的转换名称。

在 xml 中添加过渡名称：

android:transitionName="transition_name"

在类中添加过渡名称：

ViewCompat.setTransitionName(yourView,"transition_name")

请注意，对于回收站视图，您需要为每个视图设置一个唯一的名称。

---

RecyclerView 示例：

当用户点击视图时，将基于位置的名称设置为图像视图的过渡名称：

fun onClick(view: View, position : Int){
val imageView = view.findViewById<ImageView>(R.id.image)
ViewCompat.setTransitionName(imageView,"image$position")

//Pass the position to target fragment:
val extras = FragmentNavigatorExtras(imageView to "image$position")

val action = MediaFragmentDirections.actionNavMediaToPhotoGalleryEditImageFragment(
                imageUri,
                description,
                position
            )
        findNavController().navigate(action, extras)
}

在片段开始时将转换名称设置为目标图像视图：

ViewCompat.setTransitionName(targetImageView,"image$position")