标题:BottomNavigationView的通用修改记录(新解决方案)
作者:space0o0
原文链接: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数量在大于三个的时候,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后,在这里,我再记录另外一种方法。
我在design-28版本中发现他多了一个属性
BottomNavigationView_labelVisibilityMode
这个属性就可以帮助我们关闭shifting mode
Label behaves as "labeled" when there are 3 items or less, or "selected" when there are 4 items or more.
自动模式,该模式使用item数来确定是否显示或隐藏标签,即自动开启shifting mode,默认的模式。
Label is shown on all navigation items.
所有item都显示,包括文字
官方解释: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
168dp //选中时的最大宽度
14sp //选中时的字体大小
8dp //阴影的大小
56dp //高度
96dp //未选中的最大宽度
56dp //未选中的最小的宽度
8dp //icon与文本之间的间距
1dp //阴影高度
12sp //未选中时的字体大小
Google BottomNavigationView 文档
Material Design系列之BottomNavigationView详解 - 简书
BottomNavigationView实现底部导航栏的实现(一) - kunkun5love的博客 - CSDN博客