好的! 我们今天主要要来设定Fab，以及跳页的动画!

1.先在我们的DashboardFragment新增Fab

搜寻的方式有很多种，除了有fab之外，我们也可以使用searchView或是Toolbar，我们这次要使用的则是fab，虽然有些人不太喜欢fab，因为它蛮挡住视线的。

更多fab的设计可以参考这篇喔!
https://material.io/components/buttons-floating-action-button#extended-fab

我们直接在fragment_dashboard_xml来新增fab

		<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_search"
        android:transitionName="search_fragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
		//调整icon的颜色
        app:tint="@android:color/white"
        android:src="@drawable/ic_baseline_search_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginBottom="5dp"
        android:layout_marginEnd="5dp"/>

这时候我们会有红字，不过没关系，我们就去新增icon，一样去Vector Asset，并且搜寻Search，也就是你想要的icon。

我们可以透过fab的onClick来导航到新的fragment。

2.新增我们的SearchFragment

建立完後，我们先设定好databinding跟在navigation新增并且SearchFragment。
我们layout明天再贴!

好的! 接下来只要在Dashboard设定点击就可以跳转页面了!

binding.fabSearch.setOnClickListener{
nav.navigate(R.id.action_navigation_dashboard_to_searchFragment)
}

3.设定跳转动画

我们可以在navigation里面设定几个预设的换页动画，我们点击fragment之间的线，就可以看到Animations，其中会有几个选项

参数如下

参考资料&图片来源:https://juejin.cn/post/6998067266365423646

navigation里面就有预设的动画
在res新增xml，命名为 fab_search_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
				//时间，单位是毫秒
        android:duration="200"
				//初始的X轴位置
        android:fromXDelta="100%"
				//初始的y轴位置
        android:fromYDelta="100%"
				//最终的x轴位置
        android:toXDelta="0%"
				//最终的y轴位置
        android:toYDelta="0%" />

</set>

并且按返回键的时候，也一样要有动画，所以我们一样新增一个名为 fab_search_out的xml，内容为

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">


    //这边我们新增透明度    
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1">

    </alpha>

    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="100%" />

</set>

★X轴的0%是在左边，Y轴的0%是在上面

最後在刚刚的navigation里面的 app:enterAnim新增fab_search_in，popExitAnim新增fab_search_out。这样就完成啦!