Android 底部导航栏未选中菜单项显示文本title

学习笔记

前言、很多自己在写题目遇到的问题有时候网上真难找到解，有时候解答以后往往是很简单的问题，无奈+999

一、效果对比

显示

未显示

二、代码实现

4. 重点：强制显示 title

如果你希望无论在什么情况下都显示文本（即使菜单项较多），你可以通过以下方式强制显示 title。

4.1 设置 labelVisibilityMode

BottomNavigationView 提供了一个属性 labelVisibilityMode 来控制文本的显示方式。可以使用以下方式确保文本在所有情况下都显示：

labelVisibilityMode="labeled"：始终显示文本。

labelVisibilityMode="unlabeled"：仅显示图标。

labelVisibilityMode="auto"：根据屏幕空间自动决定。

4.2 修改 BottomNavigationView 的属性（activity_main.xml）
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomnavigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom"
    app:labelVisibilityMode="labeled" />
设置 app:labelVisibilityMode="labeled" 后，无论菜单项的数量或屏幕空间如何，BottomNavigationView 都会显示文本和图标。

OK，在这里设置完，就能够显示了，按需设置。后面就是一些简单介绍，效果实现就行。

三、简单介绍原理

在 Android Studio 中，BottomNavigationView 默认情况下是不会显示菜单项的文本（title）的，尤其是当使用 icon 时，通常只会显示图标。如果你希望底部导航栏显示文本（title）而不仅仅是图标，可以通过以下几种方法来实现。

1. 使用 `BottomNavigationView` 显示 `title`

BottomNavigationView 显示文本需要确保以下几点：

确保菜单项中包含 title，而不仅仅是 icon。
正确配置 itemTextColor，使文本在选中和未选中的状态下都能显示。

2. 通过 `BottomNavigationView` 显示文本（`title`）

首先，确保你的菜单项中有 title 字段，它会在 BottomNavigationView 中显示。例如：

1.1 定义菜单项（`res/menu/bottom.xml`）

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/ic_home"
        android:title="首页"/>
    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:title="搜索"/>
    <item
        android:id="@+id/menu_profile"
        android:icon="@drawable/ic_profile"
        android:title="我的"/>
</menu>

在这个菜单项文件中，android:title 定义了每个菜单项的文本，它将出现在底部导航栏上。

1.2 设置 `BottomNavigationView` 的布局（`activity_main.xml`）

确保 BottomNavigationView 中使用了 app:menu 属性来引用菜单项，并且正确显示了 title。

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

3. 显示 `title` 和图标

默认情况下，BottomNavigationView 在显示图标时，会根据屏幕大小和菜单项的数量，决定是否显示文本。大部分情况下，如果菜单项较少（例如3个），BottomNavigationView 会同时显示图标和文本。如果菜单项较多，可能只会显示图标，而隐藏文本。

4. 重点：强制显示 title

如果你希望无论在什么情况下都显示文本（即使菜单项较多），你可以通过以下方式强制显示 title。

4.1 设置 labelVisibilityMode

BottomNavigationView 提供了一个属性 labelVisibilityMode 来控制文本的显示方式。可以使用以下方式确保文本在所有情况下都显示：

labelVisibilityMode="labeled"：始终显示文本。

labelVisibilityMode="unlabeled"：仅显示图标。

labelVisibilityMode="auto"：根据屏幕空间自动决定。

4.2 修改 BottomNavigationView 的属性（activity_main.xml）
<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomnavigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom"
    app:labelVisibilityMode="labeled" />
设置 app:labelVisibilityMode="labeled" 后，无论菜单项的数量或屏幕空间如何，BottomNavigationView 都会显示文本和图标。

5. 设置 `itemTextColor`

如果文本颜色没有显示，可能是因为没有设置 itemTextColor。你可以通过以下方式控制菜单项文本的颜色。

5.1 创建颜色选择器（`res/drawable/nav_item_text_color.xml`）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 选中状态 -->
    <item android:color="@color/colorPrimary" android:state_checked="true"/>
    <!-- 未选中状态 -->
    <item android:color="@android:color/black"/>
</selector>

5.2 设置 `itemTextColor`（在 `BottomNavigationView` 中）

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomnavigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom"
    app:labelVisibilityMode="labeled"
    app:itemTextColor="@drawable/nav_item_text_color" />

6. 自定义 `BottomNavigationView` 样式（可选）

如果你希望更进一步自定义 BottomNavigationView 的外观（如背景色、选中项的效果等），可以通过样式来定义：

6.1 在 `styles.xml` 中定义样式

<resources>
    <style name="CustomBottomNavStyle" parent="Widget.MaterialComponents.BottomNavigationView">
        <!-- 背景颜色 -->
        <item name="android:background">@color/bottom_nav_background</item>

        <!-- 图标颜色 -->
        <item name="itemIconTint">@drawable/nav_item_icon_tint</item>
        
        <!-- 文本颜色（选中和未选中的颜色） -->
        <item name="itemTextColor">@drawable/nav_item_text_color</item>

        <!-- 波纹颜色 -->
        <item name="itemRippleColor">@color/bottom_nav_item_ripple</item>
    </style>
</resources>

6.2 应用样式到 `BottomNavigationView`

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomnavigation_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom"
    style="@style/CustomBottomNavStyle"
    app:labelVisibilityMode="labeled" />

总结

BottomNavigationView 显示 title：只要在菜单项中设置了 android:title，BottomNavigationView 默认会显示文本和图标。
强制显示文本：使用 labelVisibilityMode="labeled" 属性来确保文本始终显示。
设置文本颜色：通过 itemTextColor 和颜色选择器控制文本颜色的变化。
自定义样式：如果需要更复杂的定制，可以通过样式来控制背景、图标、文本颜色等属性。

这样就可以确保在 BottomNavigationView 中显示标题（title）了。