安卓APP_ jetPack —— Bottom Navigation 底部页面导航实现

本文为学习笔记，所用的图片、案例均为教学视频截图

源视频地址：BottomNavigation：实现一下底部导航
作者：longway777

实现效果

快速实现底部导航切换页面功能

创建工程的时候，这个底部导航的模板可以直接拿来用

但是为了更好地运用这个模板，我们必须了解他的结构，所以自己创建一个。

需要做的事情大致为：创建三个fragment构成三个静态页面，每个fragment要保存一些UI的数据，所以每个fragment还要创建对应的viewModel,菜单（底部导航条）,navigation组件控制页面切换。

一、获取三个图标

选择创建位图

二、创建三个带ViewModel的Fragment

一般底部导航的几个页面功能都是比较独立的，所以给每个页面都配带有专门的ViewModel比较合适。

如图

三、创建底部菜单

拖动Menu Item放入，title就是显示在图标下面的文字，选择icon,id(要跟后面navigation的id一致)

四、页面的切换：navigation

这里的id要更改为和上面那个id一致，否则是导航不过来的

五、添加BottomNavigationView

在activity_main中，创建如下图所示的BottonView,然后点击创建左右，下约束，高度选择适应内容，这样导航栏自适应靠底部。

六、添加NavHost

添加约束，高度选择适应约束

七、图标与fragment对应起来

需要进行一系列的配置

这是不需要的返回箭头

是因为传递参数的时候用了这个参数，导航图表
更改为传递menu进去即可消除这个箭头

部分源码

因为除了MainActivity.java，其他都是直接图形化创建出来的，在上文已经有体现，故不贴出。

public class MainActivity extends AppCompatActivity {
     

    @Override
    protected void onCreate(Bundle savedInstanceState) {
     
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottomNavigationView);
        //                                                                 这个id是NavHost的id
        NavController navController = Navigation.findNavController(this,R.id.fragment);
        //底部工具条的配置                  获取导航图标传递进去
        AppBarConfiguration configuration = new AppBarConfiguration.Builder(bottomNavigationView.getMenu()).build();
        //装配
        NavigationUI.setupActionBarWithNavController(this,navController,configuration);
        NavigationUI.setupWithNavController(bottomNavigationView,navController);

    }
}