Android BottomNavigationView底部导航栏的使用

基础使用

先导入依赖(这里以AndroidX为例)

implementation 'com.google.android.material:material:1.0.0'

在布局中使用

其中app:itemTextColor="@drawable/sl_tab_color"为设置按钮选中与未选中时字体的颜色选择。navigation_item.xml文件为：

其中android:icon="@drawable/sl_tab_main_system"为设置按钮选中与未选中时的图标选择
显示效果：

image.png

注意：

在BottomNavigationView的源码内有如下一段代码

public int getMaxItemCount() {
        return 5;
}

所以当我们在menu文件内添加的item个数大于5个时会报错

常见的效果显示

1.去除点击时出现的水波纹背景效果

app:itemBackground="@null"

2.去除点击时的动画效果以及位移现象

app:labelVisibilityMode="labeled"

属性取值有labeled、unlabeled、selected、auto
labeled：所有按钮中都显示图标与标签。
unlabeled：所有按钮中都不显示标签，只显示图标。
selected：只有选中的按钮才显示标签与图标，其他未选中的只显示图标。
auto：自动模式，该模式使用item数来确定是否显示或隐藏标签。当按钮个数小于等于3个时使用labeled模式，大于3个时使用selected模式。

此方法仅限当前使用的api大于28时才可使用。当api小于28时可采用下面这种方式：

@SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView view) {
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            item.setShiftingMode(false); 
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e( "TAG","Unable to get shift mode field");
    } catch (IllegalAccessException e) {
        Log.e( "TAG","Unable to change value of shift mode");
    }
}

3.去除点击时默认的图标颜色修改

bottomNavigationView.itemIconTintList = null

4.修改文字大小

在资源文件dimens.xml中添加

12sp
12sp

Activity内使用

bottomNavigationView.setOnNavigationItemSelectedListener {
         when (it.itemId) {
                R.id.menu_main -> {
                         //todo
                }
                R.id.menu_project -> {
                        //todo
                }
                R.id.menu_system -> {
                           //todo
                }
                R.id.menu_wechat -> {
                          //todo
                }
            }
            true
        }

如果需要获取具体某个按钮的相关信息时，可以调用下面的代码

image.png