效果:

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_java

实现:

创建空白项目

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_底部导航栏_02


首先要对BottomNavigationView中的item(下面的按钮文字) 创建menu.xml:1.在res资源文件夹内创建menu资源文件:

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_安卓_03

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_android_04


2.在menu文件夹中创建menu.xml:

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_安卓_05


其中的icon是底部导航栏的每个按钮的图标,可以用Android studio 自带的图片资源 (我也是刚发现的0.0)

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_android_06

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

3.BottomNavigationView 的menu弄好以后要准备 fragment 的集合了 一样的在res文件夹中创建navigation文件夹,创建navigation.xml用于存放每一个fragment.:

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_xml_07


4.然后就要创建每一个fragment了 :

创建带有ViewModel的fragment 方便以后每个fragment中的数据存储.

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_底部导航栏_08


创建完成后 Layout文件夹:

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_xml_09

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

在navigation.xml的Design界面点击添加 以此添加每一个页面,添加的每一个fragment的id一定要与 menu.xml中id所对应

Android RadioButton 实现顶部导航 android studio fragment底部导航栏_安卓_10

6.都准备好后要在MainActivity.xml中进行编辑了. 在MainActivity.xml中添加控件BottomNavigationView:

Android RadioButton 实现顶部导航 android studio 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一致.