学习|Android JepPack组件---导航Navigation

学更好的别人，

做更好的自己。

——《微卡智享》

本文长度为2176字，预计阅读6分钟

写在最前

本来做这个是因为公司的内部需要一个扫描的小程序，开始想就是全部重新用JetPack组件做，不过想到了后台产品中有一个可以应用到现在的使用场景，于是花了一天时间修改了一下那个程序就可以直接用了，所以这篇文章就做为学习的Android的组件了。

实现效果

项目创建

微卡智享

我们新建一个Android的项目，程序中只存在两个界面，进入后显示未上传的单据列表，然后一个按钮可以新建扫描单进行扫描界面。

创建好的项目中，我们新建两个Fragment（分别是OrderFragment和ScanFragment），创建时候选择（with ViewModel)，这样创建出来的Fragment会自己也带一个ViewModel类出来了，这里创建好了后面会讲到ViewModel的使用。

创建好后的目录

界面布局

在Order_Fragment的布局界面中，我们加入了一个RecyclerView用于显示未上传的单据列表，然后下面加入一个按钮，就是新建单据的按钮，这样通过这个按钮跳转到扫描界面，整个布局界面我都是用的可视化编辑，采用的ConstraintLayout，和组件拖拽的方式，细节的时候才会在xml中进行简单修改。

ScanFragment.xml这个我就什么也没动，因为还没到那。接下来我们就在实现页面的导航跳转。

Navigation导航

微卡智享

01

创建Navigation导航

我们新建一个Res的资源文件，资源的类型选择Navigation，步骤如下：

创建完成后就可以在目录下看到新创建好的nav.xml

TIPS

创建好后它会提示你需要引用库，点击sysc now就会在build.gradle中引入相关的库了，当然也可以提前手动引入。

    implementation 'androidx.navigation:navigation-fragment-ktx:2.2.1'
    implementation 'androidx.navigation:navigation-ui-ktx:2.2.1'

02

添加跳转的Fragment

点开nav.xml后可以看到里面是空的，这里需要我们手动把两个要跳转的Fragment添加进来

因为我们加入的时候orderfragment就是启动项了，可以看到后面有个Start，如果我们想更改启动项，就把鼠标选到对应的Fragment后，右键选如下

03

设置跳转

在界面中右边有个小圆点，可以设置从这跳转到另一个界面，我们设置的两个，主要是OrderFragment跳转到ScanFragment，然后ScanFragment还要跳转回来，如下图：

点击里面的箭头，右边会显示出跳转的动作ID，在这里可以设置对应的动画

04

主界面中加入导航

上面的设置导航基本差不多了，下面我们就在要activity_main.xml中设置导航了，在里面加入一个Containers中的NavHostFragment，然后我们刚才创建的nav的Navigation就会显示出来，点击它加入即可，如下图：

Navigation代码部分

微卡智享

代码中主要是OrderFragment中的新增单据按钮点击后调用Navigation，再就是主程序中为了加入返回的标题样式，加入了NavigationUI，代码相对来说也很简单。

MainActivity

里面定义一个NavController，然后在创建的时候加载fragment，这个id在我们上面添加NavHostFragment时设置的id名称，然后再重写一下onSupportNavigationUp的事件，改为定义的NavController的navigateup即可。

TIPS

   NavigationUI.setupActionBarWithNavController(this,controller)

这句的作用，就是在从OrderFragment中点击进入ScanFragment后，在ActionBar中加入了一个向左返回的键头，如下图：

OrderFragment

在OrderFragment的新增单据按钮中，在点击事件里我们直接也是定义NavController，进入跳转。

        //实现NavControl的跳转
        binding.btnAdd.setOnClickListener{
            //根据当前视图获取controlor
            val controlor= Navigation.findNavController(it)
            controlor.navigate(R.id.action_orderFragment_to_scanFragment)
        }

上面中it的参数因为是用kotlin写的，it就是lambda表达式中代替view，这里的参数实际上就是view，后面再通过navigate进行跳转，参数中的R.id.action_orderFragment_to_scanFragment就是我们图中设置跑转的那个箭头的ID，如下：

按上面的步骤，我们的Navigation就这样简单的实现了，代码比原来用fragmentmanage要简单很多。

完

扫描二维码

获取更多精彩

微卡智享

「 往期文章 」

实测|A*寻路与JPS寻路同一地图运行效率

实战|JPS跳点寻路实现运行路径规划

实战|A*寻路算法遇到的问题及解决方法