自定义 BottomNavigationView 以显示选定项目的文本，以及未选定项目的图标

Question

我正在尝试制作这个NavigationBottomView：

我想要的只是使所选项目成为文本而不是图标。

我用谷歌搜索并尝试制作自定义 navigationBottomView 项目，但我没有找到我想要的。

Answer 1

有可能是文本吗？甚至我可以隐藏图标并只显示项目标题吗？

是的。

要控制切换 BottomNavigationView 项目文本，请将 app:itemTextColor 与自定义选择器一起使用

• 在您的情况下，您需要在选中项目时显示文本，否则将其隐藏。

要控制切换项目图标，请使用 app:itemIconTint 和自定义选择器

• 在您的情况下，您需要在未选中项目时显示图标，否则将其隐藏。

对于文本/图标两种情况，您都可以使用透明颜色作为隐藏状态的技巧。

例子：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemTextColor="@drawable/text_selector"
    app:itemIconTint="@drawable/icon_selector"

text_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FFEB3B" android:state_checked="true" />
    <item android:color="@android:color/transparent" android:state_checked="false" />
</selector>

icon_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FFEB3B" android:state_checked="false" />
    <item android:color="@android:color/transparent" android:state_checked="true" />
</selector>

更新

我之前尝试过，但我得到的所有图标都被隐藏了，文字仍然在 底部没有像你发送的 gif 那样移动到中心

您可以通过更改 BottomNavView 文本大小来获得相同的行为：

创建以下样式以增加项目文本：

<style name="BottomNavigationViewActiveItemText" parent="@style/TextAppearance.AppCompat.Caption">
    <item name="android:textSize">20sp</item>
</style>

将其应用于BottomNavigationView 和app:itemTextAppearanceActive="@style/BottomNavigationViewActiveItemText"

如果您的项目文本可以是两行，也可以使用：

<style name="BottomNavigationStyle">
    <item name="android:gravity">center</item>
    <item name="android:lines">2</item>
</style>

并使用android:theme="@style/BottomNavigationStyle" 应用它