BottomNavigationView - 如何禁用选定的图标突出显示

Question

我有一个底部导航视图，它根据状态设置一个图标，如果它被选中。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/icon_tree"
        android:title="Tree"
        android:icon="@drawable/bottomnav_icon_home">
    </item>

</menu>

bottomnav_icon_home：

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

</selector>

当 android:state_checked 为 true 时，bottomnavigation 如何自动突出显示图标。

如何完全禁用底部导航的图标选择突出显示？

我尝试将app:itemIconTint="@drawable/bottom_navigation_selector" 设置为@null，但这不起作用

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_navigation_menu"
            android:background="@color/colorWhite"
            app:itemTextColor="@drawable/bottom_navigation_selector"
            app:itemIconSize="28dp"
            app:itemIconTint="@drawable/bottom_navigation_selector"
            app:labelVisibilityMode="labeled"/>

bottom_navigation_selector：

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

Answer 1

如果我没听错的话，默认情况下，android 会在选择时在您的底部导航图标上设置一个色调，并且您希望将其删除。

我知道如何在你的 java 类而不是 xml 中做到这一点。

您需要将BottomNavigationView 的setItemIconTintList 方法设置为null。所以在任何你设置布局的地方写代码：

BottomNavigationView btmNav = findViewById(R.id.bottom_navigation);
btmNav.setItemIconTintList(null);

让我们知道这是否适合您。

Answer 2

尝试在dimens.xml中添加这一行

<dimen name="design_bottom_navigation_active_text_size" tools:override="true">@dimen/design_bottom_navigation_text_size</dimen>

Answer 3

您可以创建自定义样式。

有两个步骤。

1- 在可绘制文件夹中创建自定义bottom_navigation_bar_icon_color.xml。这是选择器显示突出显示或默认的图标。因此，您可以突出显示所有图标或将它们显示为默认值。创建bottom_navigation_bar_icon_color.xml时选择以下选项之一

• 突出显示的图标：<item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true"/>
• 图标默认：<item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>

bottom_navigation_bar_icon_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
</selector>

2- 将以下自定义样式添加到主题.xml 或样式.xml。 bottom_navigation_bar_icon_color 用于 itemIconTint 和 itemTextColor

<style name="BottomNavigationThemeCustom">
    <item name="enforceTextAppearance">true</item>
    <item name="enforceMaterialTheme">true</item>
    <item name="android:background">?attr/colorPrimary</item>
    <item name="itemIconTint">@drawable/bottom_navigation_bar_icon_color</item>
    <item name="itemRippleColor">@color/mtrl_navigation_bar_colored_ripple_color</item>
    <item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
    <item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
    <item name="itemTextColor">@drawable/bottom_navigation_bar_icon_color</item>
</style>

3- 为底部导航栏使用新样式

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            style="@style/BottomNavigationThemeCustom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="visible"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_menu" />

4- 如果你想在 Scroll 上隐藏 bottomNavigationBar，请将以下属性添加到 bottomNavigationBar

app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"

Answer 4

您考虑创建自己的底部导航实现吗？ 当我实现 Google BottomNavigationView 时，我遇到了很多问题，所以我创建了一个这样的新问题：

<LinearLayout android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:layout_alignParentBottom="true">

    <View android:layout_width="match_parent"
          android:layout_height="1dp"
          android:background="@color/grayBottomNavigationDelimiter"/>

    <RadioGroup android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorNavigationBar"
                android:orientation="horizontal">

        <android.support.v7.widget.AppCompatRadioButton
            android:id="@+id/homeButton"
            android:drawableTop="@drawable/ic_home_black_24dp"
            android:text="@string/navigation_home_text"
            style="@style/RadioButtonStyle"/>
...

那么，你能看出这比想象的要容易吗？

Answer 5

通过 XML 添加它：对于属性 IconItemTint 和 ItemTextColor，只需使用与默认图标相同的颜色即可。在这种情况下，突出显示颜色和默认颜色将相同。将在选择时为您提供所需的涟漪效果，但突出显示将不可见。

对于我的黑色图标，我使用了这个：

    app:itemIconTint="@color/black"
    app:itemTextColor="#000000"

我的整个底部导航看起来像这样：

    <com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/windowBackground"
    app:itemIconTint="@color/black"
    app:itemTextColor="#000000"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_nav_more_options_menu" />