Android BottomNavigationView 完全自定义指南：图标、文字颜色与选中状态

1. 核心功能概述

通过 Material Design 的 BottomNavigationView，你可以轻松实现以下自定义：

✅ 动态切换选中/默认图标

✅ 自定义选中与默认文字颜色

✅ 控制文字显示模式（始终显示/仅选中显示/自动隐藏）

✅ 添加动画和高级样式调整

2. 图标自定义
方法 1：通过 Menu XML 指定不同状态图标

在 res/menu/bottom_nav_menu.xml 中直接定义：

复制代码

<item 
    android:id="@+id/nav_home"
    android:icon="@drawable/ic_home_default"  <!-- 默认图标 -->
    android:title="Home" />

代码中动态切换选中图标：

复制代码

bottomNavigationView.setOnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.nav_home -> item.setIcon(R.drawable.ic_home_selected)
        R.id.nav_search -> item.setIcon(R.drawable.ic_search_selected)
        else -> false
    }
    true
}

方法 2：通过 Tint 自动着色（推荐）
创建颜色选择器 res/color/nav_icon_color_selector.xml：

复制代码

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF0000" android:state_checked="true" />  <!-- 选中为红色 -->
    <item android:color="#9E9E9E" android:state_checked="false" /> <!-- 默认灰色 -->
</selector>

在布局中应用：

复制代码

<com.google.android.material.bottomnavigation.BottomNavigationView
    app:itemIconTint="@color/nav_icon_color_selector"
    ... />

3. 文字颜色自定义
步骤 1：创建文字颜色选择器
res/color/nav_text_color_selector.xml：

复制代码

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF0000" android:state_checked="true" />  <!-- 选中红色 -->
    <item android:color="#60000000" android:state_checked="false" /> <!-- 默认半透明灰 -->
</selector>

步骤 2：绑定到 BottomNavigationView

复制代码

<com.google.android.material.bottomnavigation.BottomNavigationView
    app:itemTextColor="@color/nav_text_color_selector"
    app:labelVisibilityMode="labeled"  <!-- 仅选中显示文字 -->
    ... />

4. 控制文字显示模式

通过 labelVisibilityMode 调整文字显示行为：

模式值效果
labeled 仅选中项显示文字
unlabeled 全部隐藏文字
auto 根据空间自动调整（默认）
示例代码：

复制代码

<com.google.android.material.bottomnavigation.BottomNavigationView
    app:labelVisibilityMode="labeled"
    ... />

5. 完整样式定制
自定义样式 (styles.xml)

复制代码

<style name="AppBottomNavigation" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="itemIconTint">@color/nav_icon_color_selector</item>
    <item name="itemTextColor">@color/nav_text_color_selector</item>
    <item name="itemIconSize">24dp</item>
    <item name="itemPaddingTop">6dp</item>
</style>

应用样式

复制代码

<com.google.android.material.bottomnavigation.BottomNavigationView
    style="@style/AppBottomNavigation"
    app:menu="@menu/bottom_nav_menu" />

6. 高级技巧
动态切换选中状态

复制代码

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        bottomNavigationView.menu.getItem(position).isChecked = true
    }
})

添加点击动画

复制代码

bottomNavigationView.setOnNavigationItemSelectedListener { item ->
    item.actionView?.apply {
        scaleX = 0.8f; scaleY = 0.8f
        animate().scaleX(1f).scaleY(1f).setDuration(200).start()
    }
    true
}

7. 注意事项
依赖版本 ：确保使用 Material Components 1.3.0+：

复制代码

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

图标一致性 ：所有图标建议使用相同尺寸（如 24x24dp）。
主题兼容：应用主题需继承 Theme.MaterialComponents。

通过以上方法，你可以完全掌控 BottomNavigationView 的视觉和交互行为，轻松实现设计需求！