备注：BottomNavigationView中5个菜单已经是极限了，再多它就崩溃了。

个性化

更换标题（title）

更换menu item中title即可。

更换图标（Icon）

更换图标在介绍menu的时候也说过了，AS可以帮你生成Verctor的图标，理论上各个场景的图标，都有提供。但是，注意这里的但是！AS自动帮我们生成的是VectorDrawable，本身没有什么问题，相对png来说体积小，可是5.0以下的设备不支持，不支持...

目前来说，5.0以下的市场还不能丢，所以我们就老老实实的换成png吧。

可是，实现起来，却是这样的...

Bottom Navigation 图标错误

一脸懵逼.png

虽然不知道为什么，但是可以肯定的是一定是自己的姿势不对，于是赶紧翻源码，不翻不知道，一翻更懵逼，就这个BottomNavigationView原来实现这么复杂，但是还是硬着头皮看下去。下面来理一下给icon着色的步骤。

首先我们没有给icon设置tintList的时候，BottomNavigationView会生成一个默认的ColorStateList:

privateColorStateListcreateDefaultColorStateList(intbaseColorThemeAttr){finalTypedValue value =newTypedValue();if(!getContext().getTheme().resolveAttribute(baseColorThemeAttr, value,true)) {returnnull;        }        ColorStateList baseColor = AppCompatResources.getColorStateList(                getContext(), value.resourceId);if(!getContext().getTheme().resolveAttribute(                android.support.v7.appcompat.R.attr.colorPrimary, value,true)) {returnnull;        }intcolorPrimary = value.data;intdefaultColor = baseColor.getDefaultColor();returnnewColorStateList(newint[][]{                DISABLED_STATE_SET,                CHECKED_STATE_SET,                EMPTY_STATE_SET        },newint[]{                baseColor.getColorForState(DISABLED_STATE_SET, defaultColor),                colorPrimary,                defaultColor        });    }

可以看到，选中状态是使用的colorPrimary而未选中状态则使用的默认颜色，这个默认颜色可以通过属性android.R.attr.textColorSecondary去源码中查看。发现跟实际的效果表现一致.

那么问题来了，图片呢，怎么会变成一个小色块呢，接着往下看，图标颜色设置的代码，进入BottomNavigationMenuView.setIconTintList，又调用了BottomNavigationItemView.setIconTintList,再继续又调用了DrawableCompat.setTintList,最终是调用了Drawable.setTintList,而具体的实现则在BitmapDrawble.setColorFilter。

这里有一篇关于setColorFilter的介绍，可以参考下。这样就不难解释为什么是一个小色块，吐槽下我们UED的切图，居然图标周边不是透明的，而是白色，白色...

所以，划重点了！！！图标周边要是透明的！图标周边要是透明的！！图标周边要是透明的！！！

周边透明.png

非透明的区域，都会被着色，着色分选中[android.R.attr.state_checked]和未选中[-android.R.attr.state_checked]对，没看错，就是-，减号，负号

现在换成周边透明的图标（这次更彻底，除了线条都是透明的），效果图如下：

有效图标

作者：seph_von

链接：https://www.jianshu.com/p/7b2d842267ab

还有一种方式就是直接由用户设置图标，不利用系统的着色方案

<?xml version="1.0" encoding="utf-8"?>

<Selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="false" android:drawable="@mipmap/icon_nav_02_de"/>

<item android:state_checked="true" android:drawable="@mipmap/icon_nav_02_hi"/>

<.selector>

然后在BottomNavigationView中设置

app:itemIconTint="@null"

更换文字颜色

在drawable文件加载创建文件 drawable_colcor.xml

<?xml version="1.0" encoding="utf-8"?>

<Selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="false" android:color="@color/icon_nav_02_de"/>

<item android:state_checked="true" android:color="@color/icon_nav_02_hi"/>

</Selector >

然后在BottomNavigationView中设置

app:itemTextColor="@drawable/drawable_color"

修改图标颜色

现在基本知道了换图标的注意点，以及着色的流程，所以如果要给图标换个颜色的话，就简单了。BottomNavigationView提供了自定义属性R.styleable.BottomNavigationView_itemIconTint,因此在布局文件里添加itemIconTint的属性就可以了

color_state_menu_navi.xml

效果图如下（颜色有些浮夸，请忽略）:

设置Bottom Navigation颜色

如果是在代码中实现的话，是这样的

privatefuninitNavigationColor(){        val states = Array(2) { IntArray(1) }        states[0][0] = -android.R.attr.state_checked        states[1][0] = android.R.attr.state_checked        val colors = IntArray(2)        colors[0] = ContextCompat.getColor(this@BottomNaviActivity, android.R.color.red)        colors[1] = ContextCompat.getColor(this@BottomNaviActivity, R.color.green)        val csl = ColorStateList(states, colors)        navigation.itemTextColor = csl        navigation.itemIconTintList = csl    }

是的，你没有看错，未选中的状态是选中状态前面加一个负号

作者：seph_von

链接：https://www.jianshu.com/p/7b2d842267ab

来源：简书

点击效果

仔细看，会发现点击时，字体和图标会有一点位移：字体会变大，而图标也会相应的向上挪。大部分情况下，我们是不需要这样的效果的，那么怎么修改呢？

翻了下源码，居然没有提供接口，那是不是就没有办法了呢？也不是！我们来看下item的布局文件：

居然有两个TextView,再看BottomNavigationItemView里点击响应部分的实现

if(checked) {                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();                iconParams.gravity = Gravity.CENTER_HORIZONTAL| Gravity.TOP;                iconParams.topMargin = mDefaultMargin + mShiftAmount;                mIcon.setLayoutParams(iconParams);                mLargeLabel.setVisibility(VISIBLE);                mSmallLabel.setVisibility(INVISIBLE);                mLargeLabel.setScaleX(1f);                mLargeLabel.setScaleY(1f);                mSmallLabel.setScaleX(mScaleUpFactor);                mSmallLabel.setScaleY(mScaleUpFactor);            }else{                LayoutParams iconParams = (LayoutParams) mIcon.getLayoutParams();                iconParams.gravity = Gravity.CENTER_HORIZONTAL |Gravity.TOP;                iconParams.topMargin = mDefaultMargin;                mIcon.setLayoutParams(iconParams);                mLargeLabel.setVisibility(INVISIBLE);                mSmallLabel.setVisibility(VISIBLE);                mLargeLabel.setScaleX(mScaleDownFactor);                mLargeLabel.setScaleY(mScaleDownFactor);                mSmallLabel.setScaleX(1f);                mSmallLabel.setScaleY(1f);            }

也就是说，在选中和非选中的状态，是显示不一样的TextView，而且图标距离上边距的距离也不一样，那么我们先来看icon的上边距变化的区别就在mShiftAmount,这个是在构造函数中赋值的：

intinactiveLabelSize =                res.getDimensionPixelSize(R.dimen.design_bottom_navigation_text_size);intactiveLabelSize = res.getDimensionPixelSize(                R.dimen.design_bottom_navigation_active_text_size);        mDefaultMargin = res.getDimensionPixelSize(R.dimen.design_bottom_navigation_margin);        mShiftAmount = inactiveLabelSize - activeLabelSize;

看到这里就柳暗花明了，原来mShiftAmount的值就是两个TextView的字体大小的差，接下来就简单了，如果设置两个TextView的字体大小一样的话，就解决了所有的问题。

尽管并没有提供设置字体大小的接口，但是我们可以通过重新定义R.dimen.design_bottom_navigation_text_size和R.dimen.design_bottom_navigation_margin的值来设置这两个TextView的大小。

因此，只要在values.xml中新增两个属性即可:

14dp14dp

如果要设置icon距离上边距的距离，也可以通过重新定义R.dimen.design_bottom_navigation_margin来实现。

作者：seph_von

链接：https://www.jianshu.com/p/7b2d842267ab

来源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。