学更好的别人,
做更好的自己。
——《微卡智享》
本文长度为2176字,预计阅读6分钟
写在最前
本来做这个是因为公司的内部需要一个扫描的小程序,开始想就是全部重新用JetPack组件做,不过想到了后台产品中有一个可以应用到现在的使用场景,于是花了一天时间修改了一下那个程序就可以直接用了,所以这篇文章就做为学习的Android的组件了。
实现效果
项目创建
![](https://i-blog.csdnimg.cn/blog_migrate/3c49773a66a660b04cbe2b89c3b9f137.png)
微卡智享
我们新建一个Android的项目,程序中只存在两个界面,进入后显示未上传的单据列表,然后一个按钮可以新建扫描单进行扫描界面。
创建好的项目中,我们新建两个Fragment(分别是OrderFragment和ScanFragment),创建时候选择(with ViewModel),这样创建出来的Fragment会自己也带一个ViewModel类出来了,这里创建好了后面会讲到ViewModel的使用。
创建好后的目录
界面布局
在Order_Fragment的布局界面中,我们加入了一个RecyclerView用于显示未上传的单据列表,然后下面加入一个按钮,就是新建单据的按钮,这样通过这个按钮跳转到扫描界面,整个布局界面我都是用的可视化编辑,采用的ConstraintLayout,和组件拖拽的方式,细节的时候才会在xml中进行简单修改。
ScanFragment.xml这个我就什么也没动,因为还没到那。接下来我们就在实现页面的导航跳转。
Navigation导航
![](https://i-blog.csdnimg.cn/blog_migrate/3c49773a66a660b04cbe2b89c3b9f137.png)
微卡智享
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代码部分
![](https://i-blog.csdnimg.cn/blog_migrate/3c49773a66a660b04cbe2b89c3b9f137.png)
微卡智享
代码中主要是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要简单很多。
完
扫描二维码
获取更多精彩
微卡智享
「 往期文章 」