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

原文出处

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

作者：space0o0

原文链接：BottomNavigationView的通用修改记录（新解决方案） - 简书

BottomNavigationView

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

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

修改文字切换颜色

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

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

app:itemTextColor="@drawable/selector_navigation"

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

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

我们需要修改setItemIconTintList()

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

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

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

关闭item切换动画（反射）

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

反射关闭shifting mode

//kotlin
fun 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都显示，包括文字

selected（LABEL_VISIBILITY_SELECTED）：

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

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

修改文字大小

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

16sp

16sp

修改图片文字间距大小

10dp

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

margin=0dp

margin=10dp

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

修改图片大小

xml中自带属性arrt：BottomNavigationView_itemIconSize

app:itemIconSize = 24dp

其他dimens修改

168dp//选中时的最大宽度
14sp//选中时的字体大小
8dp//阴影的大小
56dp//高度
96dp//未选中的最大宽度
56dp//未选中的最小的宽度
8dp//icon与文本之间的间距
1dp//阴影高度
12sp//未选中时的字体大小

参考

Google BottomNavigationView 文档
Material Design系列之BottomNavigationView详解 - 简书
BottomNavigationView实现底部导航栏的实现(一) - kunkun5love的博客 - CSDN博客