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//kotlinbottomBar.setItemIconTintList(null)//java

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

创建一个选择器

`

   

   

   

   

`

找到相应item中 android:icon属性 （此处可直接设图片但切换时不会变化 若没有设置一中内容则会变为原图投影的灰色。）

设置以上选择器。

（注:如果选择器在设置mimap 时无提示 请不要在乎 ）

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

修改为null后

关闭item切换动画

1. 通过反射

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

反射关闭shifting mode

//kotlinfundisableShiftingMode(bottomBar:BottomNavigationView){varmenuView=bottomBar.getChildAt(0)asBottomNavigationMenuViewvarshiftingMode=menuView.javaClass.getDeclaredField("mShiftingMode")shiftingMode.isAccessible=trueshiftingMode.setBoolean(menuView,false)shiftingMode.isAccessible=falsefor(indexin0until menuView.childCount){varitem=menuView.getChildAt(index)asBottomNavigationItemView      item.setShifting(false)item.setChecked(item.itemData.isChecked)}}

2. 通过设置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文件中添加属性值修改文字大小

16sp16sp

修改图片文字间距大小

10dp

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

margin=0dp

margin：0dp.png

margin=10dp

margin：10dp.png

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

修改图片大小

xml中自带属性arrt：BottomNavigationView_itemIconSize

app:itemIconSize = 24dp

其他dimens修改

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