Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换

效果:

Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第1张图片

实现:

创建空白项目
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第2张图片
首先要对BottomNavigationView中的item(下面的按钮文字) 创建menu.xml:

1.在res资源文件夹内创建menu资源文件:
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第3张图片

Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第4张图片
2.在menu文件夹中创建menu.xml:
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第5张图片
其中的icon是底部导航栏的每个按钮的图标,可以用Android studio 自带的图片资源 (我也是刚发现的0.0)

Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第6张图片

menu.xml中每个item就是bottomNavigationview中的按钮和文字,这里的id要特别注意一定要和等一下创建的navigation中的fragment中的id一致否则没有切换的效果的 (别问我是怎么知道的)

3.BottomNavigationView 的menu弄好以后要准备 fragment 的集合了 一样的在res文件夹中创建navigation文件夹,创建navigation.xml用于存放每一个fragment.:
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第7张图片
4.然后就要创建每一个fragment了 :
创建带有ViewModel的fragment 方便以后每个fragment中的数据存储.
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第8张图片
创建完成后 Layout文件夹:
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第9张图片

5.接着在navigation.xml中添加创建的fragment:

在navigation.xml的Design界面点击添加 以此添加每一个页面,添加的每一个fragment的id一定要与 menu.xml中id所对应
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第10张图片

6.都准备好后要在MainActivity.xml中进行编辑了. 在MainActivity.xml中添加控件BottomNavigationView:
Android 学习笔记 BottomNavigationView(底部导航栏)控制多个fragment切换_第11张图片
(布局就不仔细说了,menu属性设置为@menu/menu按钮图标就会显示了)

7.然后使用NavHostFragment来释放存储的navigation中的fragment集合.也就是底部导航栏上方的 fragment.
布局也不细说了,重要的属性是 navGraph:设置为@navigation/navigation
我是用可视化工具编写的就不附源码了.

8.设置完这些后运行程序会有效果图中的效果,但是点击后没有跳转.

实现跳转要在MainActivity.java中进行编写.

        BottomNavigationView bottomNavigationView = findViewById(R.id.nav_view);
         //获取bottomNavigationView
        
        NavController navController = Navigation.findNavController(this,R.id.fragment);
        //利用 NavController (导航控制器) 链接fragment
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(bottomNavigationView.getMenu()).build();
       //利用AppBarConfiguration 把fragment串联起来;
        NavigationUI.setupActionBarWithNavController(this,navController,appBarConfiguration);
        NavigationUI.setupWithNavController(bottomNavigationView,navController);
       //用(NavigationUI)导航UI构造器 把bottomNavigationview和appBarConfiguration相互匹配

大功告成!!! 运行程序就有了底部导航栏点击按钮切换上方fragment的效果了

如果有报错的话 试试吧mainActivity.xml中的NavHostFragment标签改为"fragment" 还有检查一下menu中的id是否与navigation中每个fragment的id一致.

你可能感兴趣的:(Android学习,android,安卓,java)