[移动开发]navigation中共享元素过渡，并传递参数

到 Fragment 目的地的共享元素过渡

在两个目的地之前共享某个视图时，可以使用共享元素过渡来定义一个目的地导航到另一个目的地时该视图如何过渡。如何使用共享元素过渡，首先要为每个共享元素视图分配一个唯一的过渡名称transitionName，login_fragment中共享元素如下，过渡名为avatar

<ImageView
        android:id="@+id/ivAvatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:transitionName="avatar"
        android:src="@mipmap/ic_launcher"/>

register_fragment中为共享元素添加相同的过渡名称

<ImageView
        android:id="@+id/ivAvatar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:transitionName="avatar"
        android:src="@mipmap/ic_launcher"/>

借助?FragmentNavigator.Extras?类，您可以按过渡名称将共享元素从一个目的地映射到另一个目的地，这与使用?FragmentTransaction.addSharedElement()?类似。您随后可以将 extra 传递给?navigate()，LoginFragment中代码如以下示例所示：

 binding.btnRegister.setOnClickListener {
            //跳转到注册页面
            //avatar为布局文件中设置的transitionName
            val imagePair = Pair<View,String>(binding.ivAvatar,"avatar")
          //  val extras = FragmentNavigatorExtras(binding.ivAvatar to "avatar")
            //如共享元素不只一个，可以传入多个，用逗号隔开
            val extras = FragmentNavigatorExtras(imagePair)
            findNavController().navigate(R.id.action_loginFragment_to_registerFragment,
            null,
            null,
            extras)
        }

接着到目的地RegisterFragment中设置过渡效果：

sharedElementEnterTransition = TransitionInflater.from(requireContext())
            .inflateTransition(R.transition.shared_image)

?该shared_image过渡的定义如下：

<!-- res/transition/shared_image.xml -->
<transitionSet>
    <autoTransition />
</transitionSet>

以上就完成了到fragment目的地的共享元素过渡效果，接下来接续看看如何到activity目的地的共享元素过渡吧。

到 Activity 目的地的共享元素过渡?

Activity 依靠?ActivityOptionsCompat?来控制共享元素过渡（启动包含共享元素的 Activity?文档对此进行了详细介绍），LoginFragment中添加以下代码就可以实现到activity共享元素的过渡了。（别忘了同样要为activity的布局中为共享元素设置transitionName哦）

binding.btnAgree.setOnClickListener {
            //跳转到用户协议activity
            val imagePair = androidx.core.util.Pair<View,String>(binding.ivAvatar,"avatar")
            val options = ActivityOptionsCompat.makeSceneTransitionAnimation(requireActivity(),
                imagePair)
            val extras = ActivityNavigatorExtras(options)
            findNavController().navigate(R.id.action_loginFragment_to_agreementActivity
            ,null,null,extras)
        }

下面来看看效果吧?

使用 Bundle 对象在目的地之间传递参数?

使用?Bundle?对象在目的地之间传递参数。创建?Bundle?对象并使用?navigate()?将它传递给目的地，如下所示：

 val bundle = bundleOf("name" to binding.etName.text.toString())
 findNavController().navigate(R.id.action_loginFragment_to_registerFragment,
        bundle,
        null,
        extras)

传入目的地如果是fragment，使用getArguments()?方法来获得Bundle数据?，如果是activity用getIntent()方法来获得数据。

?

如果想进一步学习可以到Google官方文档上了解更多内容：

在目的地之间添加动画过渡效果 ?|? Android 开发者 ?|? Android Developers

Navigate between fragments using animations ?|? Android Developers