BottomNavigation选中图标不显示及文本截断问题求助

我来帮你搞定这两个常见的BottomNavigationView问题，一步步来拆解：

问题1：选中状态的SVG图标和文本无法显示 #

BottomNavigationView需要明确区分选中/未选中状态的图标和文本样式，单一的SVG图标没法自动切换状态，得用状态选择器（Selector）来实现：

步骤1：创建图标状态选择器 #

在res/drawable目录下给每个图标创建选择器XML，比如ic_home_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态的深色图标 -->
    <item android:drawable="@drawable/ic_home_dark" android:state_selected="true"/>
    <!-- 未选中状态的浅色图标 -->
    <item android:drawable="@drawable/ic_home_light"/>
</selector>

提示：你需要准备对应图标的深色（选中）和浅色（未选中）SVG版本，其他菜单项（meditation、lesson等）都要做同样的选择器。

步骤2：创建文本颜色选择器 #

在res/color目录下创建bottom_nav_text_color.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态的文本颜色 -->
    <item android:color="@color/your_selected_color" android:state_selected="true"/>
    <!-- 未选中状态的文本颜色 -->
    <item android:color="@color/your_unselected_color"/>
</selector>

步骤3：修改BottomNavigationView布局 #

把图标和文本颜色的选择器绑定到控件上：

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:labelVisibilityMode="labeled"
    <!-- 绑定图标状态选择器 -->
    app:itemIconTint="@drawable/bottom_nav_icon_selector" 
    <!-- 绑定文本颜色选择器 -->
    app:itemTextColor="@color/bottom_nav_text_color"
    app:menu="@menu/navigation"/>

步骤4：更新导航菜单 #

把菜单里的android:icon替换成刚才创建的选择器：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_selector"
        android:title="@string/str_home"/>
    <item
        android:id="@+id/navigation_medidate"
        android:icon="@drawable/ic_meditation_selector"
        android:title="@string/str_meditade"/>
    <!-- 其他菜单项同理替换 -->
</menu>

这样设置后，选中菜单项时就会自动切换图标和文本颜色了。

问题2：标签数量多、文本长时出现截断 #

当BottomNavigationView的item数量超过3个时，默认会压缩文本甚至截断。你已经设置了app:labelVisibilityMode="labeled"强制显示所有文本，接下来可以通过以下方式优化：

方案1：缩小文本字号 #

在res/styles.xml里定义BottomNavigationView的文本样式：

<style name="BottomNavigationTextStyle" parent="TextAppearance.Design.BottomNavigation">
    <item name="android:textSize">10sp</item> <!-- 根据需求调整大小 -->
</style>

然后在布局里引用这个样式：

<android.support.design.widget.BottomNavigationView
    ...
    app:itemTextAppearanceActive="@style/BottomNavigationTextStyle"
    app:itemTextAppearanceInactive="@style/BottomNavigationTextStyle"/>

方案2：调整item的内边距 #

通过代码动态减小每个item的padding，给文本更多空间：

// 在MainActivity的onCreate里添加
val bottomNavigation = findViewById<BottomNavigationView>(R.id.navigation)
val menuView = bottomNavigation.getChildAt(0) as BottomNavigationMenuView
for (i in 0 until menuView.childCount) {
    val itemView = menuView.getChildAt(i)
    val params = itemView.layoutParams as MarginLayoutParams
    params.setMargins(0, 0, 0, 0) // 减小左右内边距
    itemView.layoutParams = params
    menuView.updateMenuView()
}

方案3：使用自定义labelVisibilityMode（可选） #

如果不需要一直显示所有文本，可以设置app:labelVisibilityMode="auto"，这样只有选中的item显示文本，其他隐藏，避免截断。

内容的提问来源于stack exchange，提问作者P A Gosai