小编在使用BottomNavigationView控件之后，遇到了一些问题，比如BottomNavigationView导航icon图片没有保持原始图片的颜色；导航的icon图片与文字没有同时显示；在选择Tab选项的时候，不知道怎么切换选择后的图片以及文字的颜色等效果。

如图所示是小编实现自定义BottomNavigationView之后的效果，这就实现了导航选择之后的图片与文字的切换，在没有选择的情况下，图片是保持原始图片颜色的：

实现BottomNavigationView图片切换效果的前提：

要想实现BottomNavigationView的图片切换效果，首先要设置icon图标与文字的同时显示，因为默认情况下，BottomNavigationView控件只有在被选中的情况下，才会显示导航下方的文字，上图中默认状况下同时显示了icon图标与文字，是因为在“<android.support.design.widget.BottomNavigationView>”标签内加了如下这行代码：

app:labelVisibilityMode="labeled" #同时显示icon与文字描述

接着这样还不行，在默认状态下，即使我们的icon图标是黄色的，你把它放在BottomNavigationView里面的话，icon的图标都可能会变成绿色或者蓝色，失去了原来的色泽，这个时候我们就需要使用如下方法将icon图标的颜色设置成该图片的原始颜色，代码如下：

//修改为原图片颜色
mBottomNavigationView.setItemIconTintList(null);

经过上面这些步骤之后，我们就要开始学习如何切换selected选择后的图片与文字了，上方图片，小编是将灰白色的图片与文字，选择之后改成了橘黄色的样式，这个就需要用到color选择器与drawable选择器来实现文字与图片的切换了。

实现步骤：

小编在activity_main.xml文件中加入了BottomNavigationView的标签，用于实现app的底部导航，代码如下：

<android.support.design.widget.BottomNavigationView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="start"
    android:background="@color/colorPrimary"
    app:itemTextColor="@color/navigation_item_color"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_navigation_items" />

标签说明：

“navigation_item_color”是一个color选择器的xml文件名称，itemTextColor设置的就是导航的文字颜色，颜色来源于color选择器，color选择器的新建过程是在res目录下右键点击new-->new resource directory之后，选择resource type为color即可，具体步骤请百度一下，然后加入如下代码，分别设置了导航选择之后与未选择状态下的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选择状态下的颜色-->
    <item android:color="@color/colorSelectedBar"  android:state_enabled="true" android:state_checked="true" />
    <!--未选择状态下的颜色-->
    <item android:color="@color/colorDefaultBar" android:state_enabled="true" android:state_checked="false" />
</selector>

“bottom_navigation_items”这个xml里面放置的是每个menu菜单的图片与文字说明，如果我们想改变切换后的图片，就需要在这每项Item菜单下加入一个drawable选择器，“android:icon”表示每项菜单的图片，后面的“navigation_home_icon”选择器分别设置选择后的图片与未选择的图片，如下是上图中的每项菜单的配置：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_home"
        android:enabled="true"
        android:icon="@drawable/navigation_home_icon"
        android:title="首页"
        app:showAsAction="ifRoom" />
		
     #其它item菜单省略。。。。
</menu>

要实现图片的切换功能，只需要在“android:icon=”这里加入每项菜单的drawable选择器即可，"navigation_home_icon"就是其中的一个drawable选择器xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!--选择状态下的图片-->
    <item android:drawable="@mipmap/icon_home_selected" android:state_checked="true"/>
    <!--未选择状态下的图片-->
    <item android:drawable="@mipmap/icon_home" android:state_checked="false"/>
</selector>

所有菜单项的icon图标与文字颜色选择器加入完成之后，就会像如图所示这样：