BottomNavigationView的通用修改记录(新解决方案)

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

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

修改文字切换颜色

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

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



   
   


app:itemTextColor="@drawable/selector_navigation"
修改文字切换颜色.png

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

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

默认的图片切换颜色.png

我们需要修改setItemIconTintList()

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

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

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

修改为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都显示,包括文字


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文件中添加属性值修改文字大小


16sp

16sp
修改文字大小.png

修改图片文字间距大小

10dp

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

margin=0dp


BottomNavigationView的通用修改记录(新解决方案)_第1张图片
margin:0dp.png

margin=10dp


BottomNavigationView的通用修改记录(新解决方案)_第2张图片
margin:10dp.png

从图中我们很明显就能看出,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博客

你可能感兴趣的:(BottomNavigationView的通用修改记录(新解决方案))