如何为Toolbar自定义使用Navigation Component时的Menu和返回按钮图标

实现方案 #

你可以直接在已有的目的地变更监听中，通过判断当前页面是否为顶层目的地（即需要显示菜单按钮的页面），分别替换对应图标，原有导航逻辑完全不会受影响。

前置准备

确保你的AppBarConfiguration已经正确配置了所有需要显示菜单按钮的顶层目的地，示例如下：

val appBarConfiguration = AppBarConfiguration(
    // 此处配置所有顶层页面ID，这些页面会显示菜单按钮
    setOf(R.id.dashboardFragment, R.id.homeFragment, R.id.settingsFragment),
    binding.navigationDrawer
)

核心实现

在你的addOnDestinationChangedListener中加入图标替换逻辑即可：

navController.addOnDestinationChangedListener { _, destination, _ ->
    supportActionBar?.let {
        // 判断当前页面是否为顶层目的地（应该显示菜单按钮）
        val isTopLevel = appBarConfiguration.topLevelDestinations.contains(destination.id)
        if (isTopLevel) {
            // 替换自定义菜单按钮图标
            it.setHomeAsUpIndicator(R.drawable.ic_custom_menu)
        } else {
            // 替换自定义返回按钮图标
            it.setHomeAsUpIndicator(R.drawable.ic_custom_back)
        }
    }
}

注意事项

• 不需要删除原有setupActionBarWithNavController等基础配置，原有点击逻辑会全部保留：菜单按钮仍然可以正常打开抽屉，返回按钮仍然可以正常回退上一级页面
• 如果需要给个别特殊页面单独设置专属图标，只需要在上述逻辑中新增针对destination.id的判断即可

内容的提问来源于stack exchange，提问作者user924