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

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

margin:0dp.png
margin=10dp

margin:10dp.png
从图中我们很明显就能看出,margin类似于margin_top。这里的值是对应于上边距的。这点需要注意。
修改图片大小
xml中自带属性arrt:BottomNavigationView_itemIconSize
app:itemIconSize = 24dp
其他dimens修改