返回

Android底部导航栏图标无法正确高亮？3种解决方案！

Android

Android 底部导航栏图标无法正确高亮：问题与解决方案

问题概述

在使用 Android Navigation Component 版本 2.7.7 时，当用户在选项卡 B 的子片段中并点击选项卡 C 后，返回选项卡 B 的子片段时，底部导航栏中高亮的图标仍然停留在选项卡 C 上，而不是选项卡 B。

原因分析

这个问题是由于以下原因引起的：

  • 当返回选项卡 B 时，B 中的子片段会重新加载，而不是加载 B 的主片段。
  • 在 bottom_nav_menu.xml 文件中，B 的主片段的片段 ID 与 nav_graph.xml 文件中菜单位置和加载片段的片段 ID 不匹配。

解决方案

有以下几种方法可以解决这个问题：

方法 1：确保片段 ID 匹配

确保 nav_graph.xml 文件中 B 的主片段的片段 ID 与 bottom_nav_menu.xml 文件中的菜单位置和加载片段的片段 ID 相匹配。

方法 2：启用 PopUps

在 bottom_nav_menu.xml 文件中添加 app:navGraphPopUpsAllowed="true" 属性，以允许弹出导航栈中的片段。

方法 3：使用 PopUpToInclusive

在 nav_graph.xml 文件中，使用 popUpToInclusive 属性来指定应该弹出的目标片段。

代码示例

方法 1：确保片段 ID 匹配

// nav_graph.xml
<fragment
    android:id="@+id/tab_b"
    android:name="com.example.myapp.TabBFragment"
    android:label="@string/tab_b"
    tools:layout="@layout/fragment_tab_b" />

// bottom_nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <item
        android:id="@+id/tab_b"
        android:icon="@drawable/ic_tab_b"
        android:title="@string/tab_b"
        app:destination="@id/tab_b" />
</menu>

方法 2：启用 PopUps

// bottom_nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <item
        android:id="@+id/tab_b"
        android:icon="@drawable/ic_tab_b"
        android:title="@string/tab_b"
        app:navGraphPopUpsAllowed="true" />
</menu>

方法 3：使用 PopUpToInclusive

// nav_graph.xml
<fragment
    android:id="@+id/tab_b"
    android:name="com.example.myapp.TabBFragment"
    android:label="@string/tab_b"
    tools:layout="@layout/fragment_tab_b"
    app:popUpToInclusive="true" />
</menu>

结论

通过采用上述解决方案，你可以解决 Android 底部导航栏图标无法正确高亮的普遍问题。确保片段 ID 匹配、启用弹出或使用 popUpToInclusive 属性，可以确保导航栈管理得当，从而防止图标高亮问题。

常见问题解答

1. 如何判断底部导航栏图标是否匹配正确片段？

在调试时，使用 Log.d() 语句打印片段 ID，并将其与 bottom_nav_menu.xml 文件中菜单项的目标 ID 进行比较。

2. 为什么启用弹出或使用 popUpToInclusive 可以在某些情况下解决问题？

启用弹出或使用 popUpToInclusive 可以强制导航栈在返回到 B 选项卡时弹出到 B 的主片段。

3. 如何处理 app:navGraphPopUpsAllowed 属性不再受支持的情况？

从 Navigation Component 版本 2.5.0 开始，app:navGraphPopUpsAllowed 属性已被弃用，可以使用 app:popUpTo 属性来指定要弹出的目标。

4. 如何将这些解决方案应用到现有的项目？

仔细检查 nav_graph.xml 和 bottom_nav_menu.xml 文件，确保片段 ID 匹配，并根据需要启用弹出或使用 popUpToInclusive 属性。

5. 有没有其他方法可以解决这个问题？

其他可能的方法包括：

  • 重新创建主片段
  • 使用 setOnItemSelectedListener() 侦听导航栏项的点击事件并手动更新高亮
  • 在子片段内使用嵌套导航组件，并确保主片段在返回时总是被加载