![Android Jetpack应用指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/927/32517927/b_32517927.jpg)
3.3 使用Navigation
接下来,我们一起来学习如何使用Navigation。
3.3.1 创建Navigation Graph
新建一个Android项目后,依次选中res文件夹→New→Android Resource File,新建一个Navigation Graph文件。如图3-1所示,将File name设置为“nav_graph”,Resource type设置为“Navigation”。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_46_1.jpg?sign=1739059184-athNgBosWKi2o5VCPUTlQiLOkInAOkyw-0-a4fc54ec8beaa7191cadb20720405aa6)
图3-1
单击“OK”按钮,Navigation Graph就创建完成了。
所生成的nav_graph.xml文件与普通布局文件类似,也有Design和Text面板。在此,我们能在Destinations面板中,看见“No NavHostFragments found”的提示,如图3-2所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_47_1.jpg?sign=1739059184-ws6NLQhtK8OlFiILgaeBWzfxYZa2fiMM-0-c26df8f39ae1f0e10e20176a1253bce2)
图3-2
需要注意的是,Navigation的使用需要依赖于相关支持库,因此Android Studio可能会询问你,是否自动帮你添加相关依赖,单击OK即可,如图3-3所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_47_2.jpg?sign=1739059184-BTyR6NU3NGEyyPxkYGYoszQGRkHjT7sl-0-29c1ce786e596626f6bf6c3948e8ae5f)
图3-3
当然,你也可以在build.gradle文件中手动添加依赖,示例如下。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_48_1.jpg?sign=1739059184-Zo3F6RnYY9iOa4lOdBIC2y0cWoQggbJW-0-c7bc7ac669a9b2627222a7c1969dd469)
3.3.2 添加NavHostFragment
NavHostFragment是一个特殊的Fragment,我们需要将其添加到Activity的布局文件中,作为其他Fragment的容器。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_48_2.jpg?sign=1739059184-40OkHZCWMTYbyTH5ynJz3s7DiJNPAIfE-0-7f12ba8368a2157079467dffa872200d)
请注意,下面这一行代码在告诉系统,这是一个特殊的Fragment。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_49_1.jpg?sign=1739059184-DMAwBeA9G7ggt4PfXsuAEuE8CDnxOOyB-0-c84da547f1a79f7341fa036074a0e901)
将app:defaultNavHost属性设置为true,则该Fragment会自动处理系统返回键。即当用户按下手机的返回按钮时,系统能自动将当前所展示的Fragment退出。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_49_2.jpg?sign=1739059184-mqrXHmz0kFNnop7WIC9eUTw4T08IKo7p-0-d1d491ef546527c12533064eb2945c3f)
app:navGraph属性用于设置该Fragment对应的导航图。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_49_3.jpg?sign=1739059184-N7W03hrObAeA6ydU9xpBfogjczj8nIUk-0-0cc0c67a26839cf729369df6fece3d2b)
添加NavHostFragment之后,再回到导航图上。此时,在Destinations面板中可以看见我们刚才设置的NavHostFragment,如图3-4所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_49_4.jpg?sign=1739059184-T7zPzoXWJGMk9m43yJKVmoMqtuB4SJnI-0-185b40a8f19910a9f3888862849a5720)
图3-4
3.3.3 创建destination
依次单击加号按钮、“Create new destination”按钮,创建一个destination,如图3-5所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_50_1.jpg?sign=1739059184-x9CRFVw0J323jrZmM8DI9Mefi9VjexN0-0-c600bf1ee6f6f7782f1282d1eae3889b)
图3-5
destination是“目的地”的意思,代表着你想去的页面。它可以是Fragment或Activity,但最常见的是Fragment,因为Navigation组件的作用是方便开发者在一个Activity中管理多个Fragment。在此,我们通过destination创建一个名为MainFragment的Fragment,如图3-6所示。
接着,再次单击加号按钮,此时出现了我们刚才创建的MainFragment对应的布局文件fragment_main,如图3-7所示。单击该文件。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_51_1.jpg?sign=1739059184-aQr2aUOlEk9mPDWTsXVi2rWjdV8iiUXU-0-589a1a31830fcbd55d3142e9ec9e7eb3)
图3-6
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_51_2.jpg?sign=1739059184-6hPTZlKSb7hU3h5RpYET9H4UlaQcbVIo-0-dd0bfeaeacab953735c93b60a77b3b33)
图3-7
面板中出现了一个mainFragment,如图3-8所示。“Start”表示该MainFragment是起始Fragment,即NavHostFragment容器首先展示的Fragment。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_52_1.jpg?sign=1739059184-K0t1Gj9woPLhaoAq4gAIhGQEr1HVXQde-0-9ffe49ac952f5798da18e88ef7b77784)
图3-8
单击图3-8左下方的Text面板,查看布局文件的内容。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_52_2.jpg?sign=1739059184-2y8FGfN5mdYuAVCdUUfFywmTLw6V9lKB-0-d14a9ee3689d8d8d961bd2d23320d920)
可以看到,在navigation标签下有一个startDestination属性,该属性指定起始destination为mainFragment。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_53_1.jpg?sign=1739059184-xaTxGYW7c2Re8mbB23Nr6NmQsZgzTd8t-0-bf4168eea441dc2dfca5e7d7e52af12a)
运行程序,可以看到一个空白的Fragment,即destination所指定的mainFragment,如图3-9所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_53_2.jpg?sign=1739059184-s1QRnlo0wHDS6tJVgdf6ygKoP5d5htXD-0-ef752936b04941ef6c2e39b3c6d3aad4)
图3-9
3.3.4 完成Fragment页面切换
接下来看看Navigation如何帮助我们实现Fragment页面的切换。
与创建MainFragment的方式类似,先创建一个SecondFragment。如图3-10所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_53_3.jpg?sign=1739059184-GkvKLoYCQ0uknk2cAPG3bgUjMeGUpYyk-0-33ae1571f47d94922401e8c1e5ff6011)
图3-10
单击mainFragment,用鼠标选中其右侧的圆圈,并拖拽至右边的secondFragment,松开鼠标,如图3-11所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_54_1.jpg?sign=1739059184-9oTSEb1GG0988IiZrqc9TIumoFM5hu0u-0-9958cf293689402ac4a9967fe86c3544)
图3-11
此时出现一个从mainFragment指向secondFragment的箭头,如图3-12所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_54_2.jpg?sign=1739059184-sAkwpJYeK48yH2Lkd8MEoVuG1hCzOGgH-0-fe57ef95aefb87092c6bd0023376fc88)
图3-12
切换到Text面板,查看布局文件。可以看到多了一个<action/>标签,app:destination属性表示它的目的地是secondFragment。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_55_1.jpg?sign=1739059184-eJrfgmMaJhbgD2F4mLxN7FMojg6zNkcr-0-e71d9cce11ba4ef0f6c43117568ebd6d)
3.3.5 使用NavControIIer完成导航
经过以上步骤后,我们还需要通过NavController对象,在代码中完成具体的页面跳转工作。
在MainFragment的布局文件中添加一个Button。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_56_1.jpg?sign=1739059184-gERZzCr6EaWxYDX7H5rMKAh2AldvMIXV-0-3533b834ab344f186877a3e5d2cafb21)
接着打开MainFragment,响应这个按钮的单击事件,完成具体的页面切换。需要注意的是,有两种方式可以完成页面的跳转,代码如下所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_57_1.jpg?sign=1739059184-ayYLsZxQl35Q9FxoLgPUmAjwTNrHYxNV-0-529f9447ab3e93db367d09f67035372e)
运行应用程序可以看到Fragment完成了切换,但切换没有动画效果,显得很生硬。Navigation组件考虑到了这一点,通过Android Studio,可以便捷地为页面切换添加动画。
3.3.6 添加页面切换动画效果
首先,在res/anim文件夹下加入常见的动画文件,如图3-13所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_58_1.jpg?sign=1739059184-k5Ky55WKbcrm7CfLgq0sawFhSZ68Y6d2-0-bd98a6946790849a12e3471f04339786)
图3-13
接着,打开导航文件的Design面板,选中箭头,并在右边的Animations面板中为其设置动画文件,如图3-14所示。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_58_2.jpg?sign=1739059184-vRgOutzh8wWq0kzA4oAYbKZ7nZYvtVid-0-2272b193660e64255cbb5bd4c04b6ee6)
图3-14
切换到Text面板,查看布局文件。可以看到它在<action/>标签中自动为我们添加了动画的相关代码。实际上,我们也可以直接在此编写代码,Design面板只是使用了可视化的方式以方便操作。
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_58_3.jpg?sign=1739059184-WXF0SXe5ibcntBOgP9Um9u4lWMKpb3W5-0-86eb7948bbf7290c4af61c8a93a96768)
![](https://epubservercos.yuewen.com/BC5419/17545851006441506/epubprivate/OEBPS/Images/39055_59_1.jpg?sign=1739059184-iLyWcl8AbffcS7c67jk3ADxBE9KlTHP8-0-08180e0c1ad4a77e354814977b6c23d5)
当然,我们还可以通过NavOptions对象在Java或Kotlin代码中,以代码的方式为Fragment添加页面切换动画,但导航图是比较方便和直观的方式。读者若有兴趣可以自己去尝试,这里就不做过多的介绍了。
运行应用程序,此时切换页面便可以看到动画效果。