Android Material Design 系列之 BottomNavigationView + ViewPager + Fragment + BadgeView 开发详解

前言

BottomNavigationView 是 Material Design 提供的一个标准底部导航栏的实现，可以轻松的实现导航栏菜单之间的切换与浏览。底部导航使用户更方便的查看和切换最高层级的导航界面，适用于有三到五个 Tab 的情况。

APP 底部导航栏目中，有新消息提示用户，并在导航栏底部显示具体消息数，这种效果主流 APP 都有应用。本文就介绍 BottomNavigationView + ViewPager + Fragment + BadgeView 可以达到微信消息角标效果和 QQ 消息拖拽效果。

一、BottomNavigationView 相关属性

方法	介绍
setSelectedItemId(int itemId)	设置选择的菜单项 ID
setElevation(float elevation)	设置此视图的基本高程（以像素为单位）
setItemBackground(Drawable background)	将菜单项的背景设置为给定的可绘制对象
setItemBackgroundResource(int resId)	将菜单项的背景设置为给定资源
setItemIconSize(int iconSize)	设置大小以提供菜单项图标
setItemIconTintList(ColorStateList tint)	设置应用于菜单项图标的色彩
setItemRippleColor(ColorStateList itemRippleColor)	将菜单项的背景设置为具有给定颜色的波纹
setItemTextAppearanceActive(int textAppearanceRes)	设置用于菜单项标签的文本样式
setItemTextAppearanceInactive(int textAppearanceRes)	设置用于非活动菜单项标签的文本样式
setItemTextColor(ColorStateList textColor)	设置颜色以用于菜单项文本的不同状态（正常，选中，聚焦等）
setLabelVisibilityMode(int labelVisibilityMode)	设置导航项目的标签可见性模式
setItemHorizontalTranslationEnabled(boolean itemHorizontalTranslationEnabled)	设置当合并的项目宽度填满屏幕时，菜单项是否在选择时水平平移
setOnNavigationItemReselectedListener(BottomNavigationView.OnNavigationItemReselectedListener listener)	设置一个侦听器，当重新选择当前选择的底部导航项时将通知该侦听器
getMenu()	返回 Menu 与此底部导航栏关联的实例
getMaxItemCount()	返回最大 Menu 数量

二、BottomNavigationView 基础使用

1、依赖引入

implementation 'com.android.support:design:29.0.0'

2、XML 布局文件

在 xml 布局文件中直接引入控件

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/activity_bottom_nav" />

3、menu 创建

BottomNavigationView 需要添加一个 menu 布局，之前在 DarwerLayout+NavigationView 文章中讲过 menu 创建注意事项，底部导航栏使用至少需要 android:id、android:icon、android:title 三个属性，此处就不做具体讲解，直接附上代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item_home"
        android:icon="@drawable/ic_vector_bottom_home"
        android:title="主页" />

    <item
        android:id="@+id/menu_item_project"
        android:icon="@drawable/ic_vector_bottom_book"
        android:title="项目" />

    <item
        android:id="@+id/menu_item_movie"
        android:icon="@drawable/ic_vector_bottom_movie"
        android:title="电影" />
</menu>

4、三个以上 Tab 文本与动画效果

经过以上三步，基本上就可以看到 BottomNavigationView 的展示效果，但是发现 3 个以上菜单时会出现文本显示异常现象，动画效果也变了。要想解决这个问题，在最新版的 API 中，已经为大家提供了解决方案，只需要一行代码就可以完美解决。

bottomNavigationView.setLabelVisibilityMode(LABEL_VISIBILITY_LABELED);
//或者在xml文件中使用属性
app:labelVisibilityMode="labeled"

因为本文是根据 androidx 讲解，如果需要旧版本兼容，使用以下方法：

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++) {
   
            B