BottomNavigationView

介绍

BottomNavigationView是一个底部导航视图，通过底部导航栏可以切换不同的视图。导航栏的内容可以通过菜单资源文件填充，显示菜单的文本和图标

使用

1. 新建Fragment

先新建三个Fragment，为后续导航栏切换切换做准备，这里我新建了FirstFragment、SecondFragment和ThirdFragment

2. 创建导航图文件

因为页面切换要用到之前的Navigation，所以需要创建导航图文件，并根据提示导入相关依赖

3. 创建菜单资源文件

前面说过，底部导航栏的内容可以通过菜单资源文件实现，所以创建一个菜单，加入三个选项即可

这里要注意，菜单中的每个选项的id必须要和导航图中的每个fragment对应，不然导航是不起作用的

4. 添加NavHostFragment和BottomNavigationView

打开activity_main.xml，在可视化界面的Containers中，把NavHostFragment和BottomNavigationView拖入到布局中

选中BottomNavigationView，在右侧Common Atributes中点击menu，选择刚刚创建的菜单资源文件

NavHostFragment还是和之前一样，选择之前创建的导航图资源文件

4. 修改Activity

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);
        NavController controller = Navigation.findNavController(this, R.id.fragment);
        AppBarConfiguration configuration = new AppBarConfiguration.Builder(controller.getGraph()).build();
        NavigationUI.setupActionBarWithNavController(this, controller, configuration);
        NavigationUI.setupWithNavController(bottomNavigationView, controller);
    }
}

这里可以看到有些部分和之前的Navigation Demo是不一样的，以下是不同的部分：

• 实例化了BottomNavigationView

• 实例化了AppBarConfiguration

• NavigationUI.setupActionBarWithNavController()相比之前多传入了一个configuration参数

• 多了一个设置NavigationUI.setupWithNavController(bottomNavigationView, controller)

这样就能够实现底部导航栏功能了

但是会有点瑕疵，就是当我们切换到其他页面的时候，左上角会出现一个返回箭头，所以需要修改AppBarConfiguration

先看看AppBarConfiguration.Builder()可以传入的参数：

image-20191112141540804.png

归类成三种方式：

• controller.getGraph()，但是会有返回图标

• bottomNavigationView.getMenu()

• R.id.firstFragment, R.id.secondFragment, R.id.thirdFragment

这样就能完美使用了