租用网站的服务器,开源商城小程序,网站三个月没排名,如何推广游戏Navigation实现底部导航栏 前言导入和基本使用导入基础使用创建nav文件编辑Nav文件添加页面#xff08;代码版#xff09;添加页面#xff08;图解版#xff09; 创建导航动作 action创建action#xff08;代码版#xff09;创建action#xff08;图解版#xff09; 编… Navigation实现底部导航栏 前言导入和基本使用导入基础使用创建nav文件编辑Nav文件添加页面代码版添加页面图解版 创建导航动作 action创建action代码版创建action图解版 编辑action参数launchSingleToppopUpTopopUpToInclusivepopUpToSaveStaterestoreState注 使用nav文件跳转Fragment 底部导航栏实现方法创建nav文件点击导航注 结语 前言
底部导航栏一直是大部分App不可缺失的一部分 最近注意到Jetpack中的Navigation支持Fragment的切换操作 特此浅研究一下
导入和基本使用
选择性跳过
导入
此处使用Google开发者文档中介绍
dependencies {def nav_version 2.5.3// Java使用这两行导入implementation androidx.navigation:navigation-fragment:$nav_versionimplementation androidx.navigation:navigation-ui:$nav_version// Kotlin使用这两行导入implementation androidx.navigation:navigation-fragment-ktx:$nav_versionimplementation androidx.navigation:navigation-ui-ktx:$nav_version// 多模块使用implementation androidx.navigation:navigation-dynamic-features-fragment:$nav_version// 测试使用androidTestImplementation androidx.navigation:navigation-testing:$nav_version// Jetpack Compose使用implementation androidx.navigation:navigation-compose:$nav_version
}基础使用
使用nav文件配合 FragmentContainerView组件 实现Fragment的切换操作
创建nav文件
导入后在项目的res文件夹下右键选择Android Resource File弹出弹窗Resource type下拉选择Navigation即可剩下的就是填写文件名 完成后会在res文件下创建一个navigation文件夹 里面就存放着nav文件
编辑Nav文件
打开Nav文件可以看到顶部有一排按钮
分别是
添加页面 Fragment、Activiry、include创建分组 选择一个或多个页面进行分组设置初始页 选择一个页面设置为初始页即默认页设置为默认页的页面左上角会出现一个房子图标创建depplink 选择一个页面创建深层链接添加 action 选择一个页面 添加跳转动作整理布局 全部页面重排优化布局
首先使用添加页面 添加三个已经写好的Fragment 当然使用写代码的方式也是可以的
添加页面代码版
?xml version1.0 encodingutf-8?
navigation xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsapp:startDestination默认页id!--例--fragmentandroid:idid/标识此fragment的idandroid:namefragment类文件路径android:labelfragment名称tools:layoutfragment对应的layout //navigation添加页面图解版 可以通过搜索框搜索点击需要添加的页面即可 此时在代码处会生成一个fragment标签 如图所示 成功添加了一个页面 如果需要添加页面预览 则在fragment处添加标签 layout 值为 fragment对应的layout
创建导航动作 action
action是跳转到fragment的关键要素
创建action代码版
最基本的写法
actionandroid:idid/标识此action的idapp:destinationid/目的地的fragment Id /创建action图解版
点击起始的fragment右边有一个可以拖动的箭头将箭头拖至目的地fragment即可 上述操作完成后会在 testFragment 中生成一段action标签 当然action的内容不止这些
编辑action参数
通过查看NavAction的源码参数 可以看到action有数个标签可以定义 按住Ctrl鼠标点击action中的destination属性即可 declare-styleable nameNavActionattr nameandroid:id/!-- destination 目的地的id --attr formatreference namedestination/attr formatboolean namelaunchSingleTop/attr formatboolean namerestoreState/attr formatreference namepopUpTo/attr formatboolean namepopUpToInclusive/attr formatboolean namepopUpToSaveState/attr formatreference nameenterAnim/attr formatreference nameexitAnim/attr formatreference namepopEnterAnim/attr formatreference namepopExitAnim//declare-styleable同时可以通过右侧Attributes 页进行参数查看
launchSingleTop
默认false类似Activity的singleTop 设为true后 activity的singleTop会判断顶部的activity是否为当前activity是则复用否则新建 navigation的singleTop会判断顶部的fragment是的为目的地fragment 是则销毁顶部重新创建放置在顶部 可见图 唯一的区别就是 执行了action动作后有无删除旧fragment 此处使用了以下action actionandroid:idid/action_testFragment_self_singleTopapp:launchSingleToptrueapp:destinationid/testFragment /actionandroid:idid/action_testFragment_selfapp:destinationid/testFragment /popUpTo
默认为空 设为某个fragment的id后 执行此action 会挨个出栈 直到出栈的fragment为popUpTo指定的fragment 此fragment不出然后再创建 目的地fragment 以下为图解主要看右下角处 2-1 popUpTo 1 当popUpTo指定1后 会把所有不是 1 的fragment出栈再在旧的1上面入栈新的1 如下图即使多个1存在只会弹出最上层的1之上的fragment
popUpToInclusive
默认false 结合popUpTo使用当popUpToInclusive为true的时候会把旧的1也出栈 如下图区别与上图 本次连黄色的1都出栈了
popUpToSaveState
默认false 结合popUpTo使用 设为true后 popUpTo操作弹出的fragment 都会保存状态 以便restoreState 恢复操作
restoreState
默认false 结合popUpToSaveState使用 设为true后 还原目的地fragment的状态 如果之前没有保存状态 此参数不起效 如图 当popUpToSaveState为true后 弹出的fragment会保存到一个Map内 之后再调用action action中restoreState为true action的目的地为2 此时就会取出map中ID为2的fragment 重新放进栈中 取出顺序为 先popup的后入栈 也就先显示 顺序和popup前一样 需要注意的是 这样子的状态保存实际上需要view model配合使用 当fragment销毁onDestroy后fragment绑定的viewmodel没有跟着销毁 此时恢复状态fragment依旧会onCreate就需要从view model中获取数据所以数据需要保存在viewmodel才是最优选
注
当 popUpTo和起始idfragment不同时会发生不同情况popUpToInclusive 会影响状态恢复 如图当fragment3跳转至fragment4时 弹出2以上的所有fragment此时两个fragment3都会保存状态直到fragment4跳至fragment2并使用restoreStatetrue属性后会把两个fragment3恢复这时就与之前冲突了。 这时再把popUpToInclusive改为true就会发生以下情况 可以看到把popUpToInclusive设为true后弹出了fragment2以上所有页面包括fragment2自己在随后的恢复中原先的fragment3被置顶明明是4-2却显示3 原因未知如果上面描述有错误或者有更好的见解欢迎评论区讨论。
使用nav文件
这里需要使用官方的组件进行fragment的显示具体步骤如下 在activity的layout中添加 androidx.fragment.app.FragmentContainerViewandroid:idid/main_fragment_containerandroid:nameandroidx.navigation.fragment.NavHostFragmentandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:defaultNavHosttrueapp:navGraphnavigation/nav文件名 /这里有两个属性需要说明 app:defaultNavHost设为false时返回就退出Activity 设为true时返回就是fragment出栈 app:navGraph设置nav文件 跳转Fragment
引用官方文档中的话 使用 FragmentContainerView 创建 NavHostFragment或通过 FragmentTransaction 手动将 NavHostFragment 添加到您的 Activity 时尝试通过 Navigation.findNavController(Activity, IdRes int) 检索 Activity 的 onCreate() 中的 NavController 将失败。您应改为直接从 NavHostFragment 检索 NavController。 简单来说就是先尝试下列方法获取控制器 Kotlin
Fragment.findNavController()
View.findNavController()
Activity.findNavController(viewId: Int)Java
NavHostFragment.findNavController(Fragment)
Navigation.findNavController(Activity, IdRes int viewId)
Navigation.findNavController(View)如果报错获取不了应该改为 val navHostFragment supportFragmentManager.findFragmentById(R.id.main_fragment_container) asNavHostFragmentval controller navHostFragment.navControllerNavHostFragment f (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.main_fragment_container);NavController controller;if (f ! null) {controller f.getNavController();}Activity所继承的必须为 AppCompatActivity 拿到控制器后只需要 controller.navigate( action的ID )即可完成页面跳转例 fragmentandroid:idid/testFragmentandroid:namecom.a.demo.ui.nav.TestFragmentandroid:labelTestFragmenttools:layoutlayout/fragment_testactionandroid:idid/action_testFragment_to_test2Fragmentapp:destinationid/test2Fragment //fragmentfragmentandroid:idid/test2Fragmentandroid:namecom.a.demo.ui.nav.Test2Fragmentandroid:labelTest2Fragmenttools:layoutlayout/fragment_test2/fragmentcontroller.navigate(R.id.action_testFragment_to_test2Fragment)这样就完成了从testFragment跳转至test2Fragment的操作
底部导航栏实现方法
假如现在底部导航栏有五个按钮和五个fragment
创建nav文件 fragmentandroid:idid/mainFragment1android:namecom.a.demo.ui.activity.main.MainFragment1android:labelMainFragment1tools:layoutlayout/fragment_1 /fragmentandroid:idid/mainFragment2android:namecom.a.demo.ui.activity.main.MainFragment2android:labelMainFragment2 /fragmentandroid:idid/mainFragment3android:namecom.a.demo.ui.activity.main.MainFragment3android:labelMainFragment3 /fragmentandroid:idid/mainFragment4android:namecom.a.demo.ui.activity.main.MainFragment4android:labelMainFragment4 /fragmentandroid:idid/mainFragment5android:namecom.a.demo.ui.activity.main.MainFragment5android:labelMainFragment5 /点击导航
在activity处设置五个点击事件 分别对应五个按钮此处不展示详细代码
//获取控制器val navHostFragment supportFragmentManager.findFragmentById(R.id.main_fragment_container) as NavHostFragmentval controller navHostFragment.navController//设置导航配置val builder NavOptions.Builder().setLaunchSingleTop(true).setRestoreState(true)builder.setPopUpTo(controller.graph.findStartDestination().id,inclusive false,saveState true)//设置点击事件vb.but1.setOnClickListener {controller.navigate(R.id.mainFragment1,null,builder.build())}vb.but2.setOnClickListener {controller.navigate(R.id.mainFragment2,null,builder.build())}vb.but3.setOnClickListener {controller.navigate(R.id.mainFragment3,null,builder.build())}vb.but4.setOnClickListener {controller.navigate(R.id.mainFragment4,null,builder.build())}vb.but5.setOnClickListener {controller.navigate(R.id.mainFragment5,null,builder.build())}解释一下上面代码 navigate方法可以传fragment的id直接跳转而不使用action ID这时等同于 当前fragment-传递的fragment NavOptions.Builder是导航配置等同于action中其他参数 但有更高的自定义程度相当于动态控制 controller.graph.findStartDestination().id 可以拿到当前当前fragment ID 注
此时的activity的布局需要修改 app:defaultNavHost“false” 这种导航栏方式fragment1始终被压在栈底如果将返回键交予fragment分发就会出现先退到fragment1再退出activity的情况 androidx.fragment.app.FragmentContainerViewandroid:idid/main_fragment_containerandroid:nameandroidx.navigation.fragment.NavHostFragmentandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:defaultNavHostfalseapp:navGraphnavigation/nav_main /结语
到此Nav自定义导航栏已经实现基本使用的模块来源日常使用经验。 至于底部导航栏网上大部分人都推荐使用 BottomNavigationView 配合使用 com.google.android.material.bottomnavigation.BottomNavigationViewandroid:idid/main_bottomNavigationViewandroid:layout_widthmatch_parentandroid:layout_heightdimen/dp_50app:menumenu/menu_main /好用但自定义样式比较难然后就只能翻BottomNavigationView的源码看它是怎么实现切换页面而不销毁fragment
