Android Navigation + Fragment 制作APP主页面导航（步骤 + 源码）

• • 1. 添加依赖

• 2. 添加导航图

• 3. 添加NavHost

• 4. NavController控制显示Fragment

• 5. Fragment之间跳转并传值

• 6. 添加底部导航

• 7. 底部导航栏控制Fragment切换

• 8. 运行效果图和源码

• 总结

---

前言

===============================================================

我相信你肯定见过这样的App主页面，底部或者顶部有多个按钮，点击之后会切换当前的页面，滑动当前页面也会切换底部按钮，这里我用几个App的主页面来说明一下吧

淘宝

微博

优快云 App

支付宝

可以说绝大部分App都是这种主页面布局模式，当然还有很多，在这里举列子是让你有一个概念而已。

那么来看看本文中实现的效果是怎么样的。如果不满意，我想也就不浪费你的时间了。

---

正文

===============================================================

从上面的一些APP主页面，在之前这种页面是通过什么来做的呢？这里有好几种组合：

① Activity + Fragment + TabLayout + ViewPager。

② Activity + Fragment + RadioGroup(RadioButton) + ViewPager。

相信你在很多的博客上或者自己的项目上看过或者使用过。而现在可以通过另一个更简洁的方式，那就是Activity+ Navigation + Fragment。虽然你看着只是少了一个控件而已，但实际上，大部分的工作都是由Navigation （导航）来完成。

说了这么多也该正式操作了，既然是写博客，自然要详细一些了，那么我们就从创建AS项目开始吧。这应该够详细了吧，首先创建一个名为AppHomeNavigation的项目。如下图所示，包名我就缩减了一下。

创建好之后如下图所示：

从这个图来看，项目本身没有任何问题，为了保险起见，建议先运行一下。

1. 添加依赖

---

Navigation 是JetPack中的组件，感兴趣可以去查看Google JetPack官方文档。而如果你想单独查看的Navigation 内容，可以点击Navigation 文档。

打开你的app下的build.gradle。在dependencies闭包中添加如下依赖：

def nav_version = “2.3.2”

// navigation依赖 ui 和 fragment

implementation “androidx.navigation:navigation-fragment:$nav_version”

implementation “androidx.navigation:navigation-ui:$nav_version”

添加位置如下图所示：

添加好之后，点击Sync进行项目同步，同步时会自动下载这些依赖库并配置到你的项目中。

添加完了依赖，就得先来简单介绍一下这个Navigation了，Navigation分为三大件：导航图、NavHost、NavController。

为了方便我介绍下面的三个概念，这里假设有A、B、C三个Fragment。

现在要从A切换到B

导航图：读取这个切换目标及路径

NavHost：包含A、B、C的容器，用于显示Fragment。

NavController：在得知切换目标时，控制NavHost去显示B这个Fr