备注：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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
