BottomNavigationView的通用修改记录（新解决方案）

BottomNavigationView是design包下的一款底部导航控件，初次使用发现效果特别不错，可是到了实际开发中，我们要的效果就不能按照谷歌的标准来开发了。写文章时使用design版本为28.0.0

我在使用过程中发现好多类似的需求：
1.修改文字颜色
2.图片的切换
3.关闭item的切换动画
4.修改文字大小
5.修改文字与icon的间距
6.修改图片（icon）大小

修改文字切换颜色

我们需要使用itemTextColor属性来指定选中和未选中的颜色

创建一个selector来指定选中的颜色和默认的颜色

<!--selector_navigation.xml --><selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:color="#F14040" android:state_checked="true" />
   <item android:color="#959393"/></selector>

<!--BottomNavigationView的属性 -->app:itemTextColor="@drawable/selector_navigation"

修改文字切换颜色.png

图片的切换，不使用默认的修改图片颜色

一般item 图片的 选中 和 不选中 都会有美工给我们切好图，而我们把图片放入后，却被bottomNavigationView修改成了他默认的颜色切换，而有时候我们的图片就不是纯色的图。

默认的图片切换颜色.png

我们需要修改setItemIconTintList()

bottomBar.itemIconTintList = null//kotlinbottomBar.setItemIconTintList(null)//java

注意的是：在xml中设置app:itemIconTint="@null"是无效的

修改后图片就按照原图的颜色显示了

修改为null后

关闭item切换动画（反射）

item数量在大于三个的时候，BottomNavigationView会默认开启shifting mode。效果就是选中文字出现，图片上上下下，大大小小的。在我查阅如何关闭动画效果这一问题中，我发现好多都是通过反射的方式来关闭shifting mode

反射关闭shifting mode

//kotlinfun disableShiftingMode(bottomBar: BottomNavigationView) {  var menuView = bottomBar.getChildAt(0) as BottomNavigationMenuView  var shiftingMode = menuView.javaClass.getDeclaredField("mShiftingMode")

  shiftingMode.isAccessible = true
  shiftingMode.setBoolean(menuView, false)
  shiftingMode.isAccessible = false

  for (index in 0 until menuView.childCount) {      var item = menuView.getChildAt(index) as BottomNavigationItemView

      item.setShifting(false)

      item.setChecked(item.itemData.isChecked)
    }
}

其实谷歌看到很多人都在想办法关闭这个shifting mode后，在这里，我再记录另外一种方法。

关闭item切换动画（labelVisibilityMode）

我在design-28版本中发现他多了一个属性
BottomNavigationView_labelVisibilityMode
这个属性就可以帮助我们关闭shifting mode

labelVisibilityMode有多种选择(我用GIF来展示更加直观)

auto（LABEL_VISIBILITY_AUTO）：

Label behaves as "labeled" when there are 3 items or less, or "selected" when there are 4 items or more.
自动模式，该模式使用item数来确定是否显示或隐藏标签，即自动开启shifting mode，默认的模式。

labeled（LABEL_VISIBILITY_LABELED）：

Label is shown on all navigation items.
所有item都显示，包括文字

labeled

unlabeled（LABEL_VISIBILITY_UNLABELED）：

Label is not shown on any navigation items.
在所有item 中都不显示，包括底下都文字

unlabeled.gif

selected（LABEL_VISIBILITY_SELECTED）：

官方解释：Label is shown on the selected navigation item.
标签在选中的item 中显示，

selected 模式

我们就按照自己的效果选择显示效果吧～

修改文字大小

在dimens文件中添加属性值修改文字大小

<!--修改默认（未选中）的文字大小 --><dimen name="design_bottom_navigation_text_size" tools:override="true">16sp</dimen><!--修改选中的文字大小 --><dimen name="design_bottom_navigation_active_text_size" tools:override="true">16sp</dimen>

修改文字大小.png

修改图片文字间距大小

<dimen name="design_bottom_navigation_margin" tools:override="true">10dp</dimen>

这里注意margin的使用，不是越大，文字图片的间距就越大，还是拿修改参数看图说话

margin=0dp

margin：0dp.png

margin=10dp

margin：10dp.png

从图中我们很明显就能看出，margin类似于margin_top。这里的值是对应于上边距的。这点需要注意。

修改图片大小

xml中自带属性arrt：BottomNavigationView_itemIconSize

app:itemIconSize = 24dp

其他dimens修改

<dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>//选中时的最大宽度<dimen name="design_bottom_navigation_active_text_size">14sp</dimen>//选中时的字体大小<dimen name="design_bottom_navigation_elevation">8dp</dimen>//阴影的大小<dimen name="design_bottom_navigation_height">56dp</dimen>//高度<dimen name="design_bottom_navigation_item_max_width">96dp</dimen>//未选中的最大宽度<dimen name="design_bottom_navigation_item_min_width">56dp</dimen>//未选中的最小的宽度<dimen name="design_bottom_navigation_margin">8dp</dimen>//icon与文本之间的间距<dimen name="design_bottom_navigation_shadow_height">1dp</dimen>//阴影高度<dimen name="design_bottom_navigation_text_size">12sp</dimen>//未选中时的字体大小

作者：space0o0
链接：https://www.jianshu.com/p/4d1a01479f52