运行效果图
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的项目。如下图所示,包名我就缩减了一下。
创建好之后如下图所示:
从这个图来看,项目本身没有任何问题,为了保险起见,建议先运行一下。
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”
添加位置如下图