【Android】BottomNavigationView的使用笔记

原文出处

标题：【Android】BottomNavigationView的使用笔记

作者：IT音符

原文链接：【Android】BottomNavigationView的使用笔记 - 简书

一、控件基础简介

• 常用属性

app:itemTextColor 文字的颜色，可以通过selector来控制选中和未选中的颜色
app:itemIconTint 图标的颜色，可以通过selector来控制选中和未选中的颜色
app:itemIconSize 图标大小，默认24dp
app:iteamBackground 背景颜色，默认是主题的颜色
app:itemRippleColor 点击后的水波纹颜色
app:itemTextAppearanceActive 设置选中时文字样式
app:itemTextAppearanceInactive 设置默认的文字样式
app:itemHorizontalTranslationEnabled 在label visibility 模式为selected时item水平方向移动
app:elevation 控制控件顶部的阴影
app:labelVisibilityMode 文字的显示模式
app:menu 指定菜单xml文件（文字和图片都写在这个里面）

• 常用事件
  主要用两个事件OnNavigationItemSelectedListener和OnNavigationItemReselectedListener

nav_view.setOnNavigationItemSelectedListener(
    BottomNavigationView.OnNavigationItemSelectedListener {
    when (it.itemId) {
        R.id.navigation_item1 -> {
            Log.e("bottomMenuView:", "home")
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_item2 -> {
            Log.e("bottomMenuView:", "dashboard")
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_item3 -> {
            Log.e("bottomMenuView:", "notification")
            return@OnNavigationItemSelectedListener true
        }
    }
    false
})

nav_view.setOnNavigationItemReselectedListener(
    BottomNavigationView.OnNavigationItemReselectedListener {
    Log.e("bottomMenuView:", it.itemId.toString())
})

两个事件的用法是一样的，区别在于：OnNavigationItemSelectedListener在item由未选中到选中状态时触发，而OnNavigationItemReselectedListener在item处于选中状态再次点击时触发。

• 最大Item数量
  BottomNavigationView对显示的item数量做了显示，最多5个，超过就会抛出异常，源码如下：

public final class BottomNavigationMenu extends MenuBuilder {
    public static final int MAX_ITEM_COUNT = 5;
    // ...
    @Override
    protected MenuItem addInternal(int group, int id, int categoryOrder, CharSequence title) {
    if (size() + 1 > MAX_ITEM_COUNT) {
      throw new IllegalArgumentException(
          "Maximum number of items supported by BottomNavigationView is "
              + MAX_ITEM_COUNT
              + ". Limit can be checked with BottomNavigationView#getMaxItemCount()");
    }
    // ...
    return item;
  }
}

Google这么做的原因大概是一般不会有超过5个的需求，而且超过5个以后就会显得很拥挤，UI效果比较差。

二、BottomNavigationView遮挡其它控件问题

1.原因分析
我们在使用控件的时候，总是有两个必须填写的值，一个是width，一个是height，而它们分别对应我们印象中的物体的长度和宽度。当控件被遮盖住，这时候我们就需要指定控件的Z轴高度了。

何为Z轴高度？比如我们在三维空间中定义一个物体的具体位置，需要知道它的空间属性值，通过XYZ轴来精确定。这里的Z轴高度，其实就是指真正的“高度”，而不是宽度！

总结： 让添加的ImageView在Z轴上的高度 大于等于BottomNavigationView的。

2.解决方式
在使用BottomNavigationView的过程中，如果我们需要放置其它控件在其之上，需要通过以下几种方式来实现，否则控件将被其遮挡而无法正常显示：

• 布局中使用BottomNavigationView标签将需要在导航栏之上显示的其他控件包起来，也就是其他控件在它的层级之下；
• 设置控件的Z轴高度，在我的测试中发现BottomNavigationView的默认Z轴高度为8dp，所以你设置控件的Z轴高度大于或等于8dp就可以显示在BottomNavigationView上了。
• 在Activity中指定BottomNavigationView的Z轴高度。代码种设置其Z轴高度：

mNavigationView.elevation = 0f

• 直接在BottomNavigationView布局中使用

app：elevation="0dp"

跟其他控件同样的Z轴高度，因为默认的是：android：elevation="0dp"，需要改为app。

三、修改文字大小

在styles.xml中新建样式：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--选中的样式-->
    <style name="bottom_tab_title_active">
        <item name="android:textSize">16sp</item>
    </style>

    <!--没有选中的样式，导航默认的字体大小就是14sp-->
    <style name="bottom_tab_title_inactive">
        <item name="android:textSize">14sp</item>
    </style>
</resources>

在布局文件中，为BottomNavigationView导入对应的样式设置：

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemTextAppearanceActive="@style/bottom_tab_title_active"
        app:itemTextAppearanceInactive="@style/bottom_tab_title_inactive" />

四、修改图标选中色、文字选中色

在res/drawable下新建selector_bottom_tab.xml文件：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/选中色" android:state_checked="true" />
    <item android:color="@color/为选中色，默认效果" android:state_checked="false" />
</selector>

然后在布局BottomNavigationView标签中添加如下代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
        ...
        app:itemIconTint="@drawable/selector_bottom_tab"
        app:itemTextColor="@drawable/selector_bottom_tab"/>

五、设置图标与文字之间的间距

---

六、显示badge(角标/悬浮徽章)

在BottomNavigationView上添加badge很简单，它提供了如下操作badge的方法：

• getBadge(int menuItemId) 获取badge
• getOrCreateBadge(int menuItemId) 获取或创建badge
• removeBadge(int menuItemId) 移除badge
  因此添加一个badge只需要如下代码：

val navView: BottomNavigationView = findViewById(R.id.nav_view)
val badge = navView.getOrCreateBadge(R.id.navigation_dashboard)

拓展阅读

• 关于BottomNavigationView的使用姿势都在这里了
• 底部导航BottomNavigation的使用
• Android:BottomNavigationView自定义选中颜色和文字
• 如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果
• 完美解决BottomNavigationView使用过程中遮盖其他控件无法显示的问题