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 的视觉和交互行为，轻松实现设计需求！
