Jetpack:018-Jetpack中的导航一

文章目录

  • 1. 概念介绍
  • 2. 使用方法
    • 2.1 基本概念
    • 2.2 传统用法
    • 2.3 新的用法
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了Jetpack库中对话框相关的内容,本章回中主要介绍 导航。闲话休提,让我们一起Talk Android Jetpack吧!

1. 概念介绍

我们在这里介绍的导航是指页面之间的跳转,早期的页面都是基于Activity进行开发,页面之间的跳转也就是Activity之间的跳转。后来推出了Fragment,它也可以承载一部分页面,不过Fragment之间的跳转不方便,只能是基于同一个Fragment容器内的Fragment进行切换,常见的是底部导航栏,每个导航栏对应一个Fragment,点击导航栏时开始页面切换。还有一种方法就是在Activity中嵌套Fragment,通过切换Activity来实现Fragment的跳转,不过在本质上仍然是Activity之间的跳转。

后来Google推出了Jetpack库,该库提供了Navigation来实现导航,Navigation可以解决Fragment之间跳转的难题,本章回中将详细介绍它的使用方法。

2. 使用方法

2.1 基本概念

我们先介绍一下Navigation库中基本的概念,这些概念会贯穿整个导航知识,是导航系列知识中必备的内容:

  • NavDestination也叫导航目的地:主要用来表示导航的目标,它本质上是一个页面;
  • Navigaiton Graph也叫导航图:它包含整个程序中所有导航线路;
  • NavController也就导航控制器:它要用来实现页面的跳转;
  • NavHost也叫导航容器:它是所有页面和导航控制器的载体(容器);

明白这些基本概念后,我们综合使用它们:在实际项目中每个页面都可以看作是导航目的地,所有的页面都要添加到导航容器中,所有页面之间的跳转关系组成了导航图,导航容器通过导航控制器实现导航,导航的会按照导航图中的内容进行导航,这便是导航运行的原理。下面是官方文档中的一个导航示意图,请大家参考。

Jetpack:018-Jetpack中的导航一_第1张图片

2.2 传统用法

这里说的传统用法是指使用Activity和Fragment进行页面设计,并且页面的布局通过xml文件实现。传统用法会在页面的布局文件中(xml文件)添加导航信息,通过这些导航信息建立统一的导航图,然后导航控制器就通过导航图实现各个页面之间的导航。这里提到的导航图可以通过代码实现(xml代码)或者通过可视化编辑器编辑。我没有使用这种方法进行导航,因此不会介绍这种传统用法,比较compse中已经不再使用这种传统用法了,如果有看官想使用这种方法实现导航,可以参考官方文档。

2.3 新的用法

我们在这里说的新用法是在compose组成的页面中使用导航。下面是详细的使用步骤和方法:

  • 在导航容器中创建导航图,主要包含导航路由和导航目的地;
  • 获取导航控制器,通过导航控制器的navigate()方法和路由实现导航;
  • 通过popup方法沿着原来的路由原路返回;

导航图本质上是一个堆栈,当前显示的页面位于堆栈顶部,导航控制器主要对页面进行入栈和出栈操作,进而实现导航效果;

3. 示例代码

@Composable
fun AppNavigation() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home" ) {

        //程序主页
        composable("home") {
            MainFramework(navController)
        }

       
        composable(ScreenData.screeList[0].route) {
            LayoutPage()
        }

        composable(ScreenData.screeList[1].route) {
            KindsOfText()
        }
        composable(ScreenData.screeList[2].route) {
            ExButton()
        }
        composable(ScreenData.screeList[3].route) {
            ExProgress()
        }
        composable(ScreenData.screeList[4].route) {
            ExScaffold()
        }
    }
}

上面的示例代码中,位于composable函数中的其它函数都可以看作是导航目的地,它们表示具体的页面,比如ExButton()表示按钮相关的页面。NaHost就是导航容器,它可以控制导航控制器(navController).composable函数的参数就是导航图中的路由信息,通常用一个字符串表示。

4. 内容总结

最后,我们对本章回的内容做一个全面的总结:

  • 导航表示程序中各个页面之间的跳转关系;
  • 导航包含四个基本概念:导航目的地,导航图,导航容器和导航控制器;
  • 导航通过Navigation库实现,它可实现传统的Activity导航也可以实现compose可组合函数之间的导航;

看官们,与Jetpack中导航相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,AndroidJetPack吧,移动开发,jetpack,compose,导航,navigation)