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

运行效果图

Navigation + Fragment制作APP主页面

• 前言

• 正文

• • 1. 添加依赖

• 2. 添加导航图

• 3. 添加NavHost

• 4. NavController控制显示Fragment

• 5. Fragment之间跳转并传值

• 6. 添加底部导航

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

• 8. 运行效果图和源码

• 总结

---

前言

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

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

淘宝

微博

CSDN 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”

添加位置如下图