BottomNavigationView是design包下的一款底部导航控件,初次使用发现效果特别不错,可是到了实际开发中,我们要的效果就不能按照谷歌的标准来开发了。写文章时使用design版本为28.0.0
我在使用过程中发现好多类似的需求:
1.修改文字颜色
2.图片的切换
3.关闭item的切换动画
4.修改文字大小
5.修改文字与icon的间距
6.修改图片(icon)大小
修改文字切换颜色
我们需要使用itemTextColor属性来指定选中和未选中的颜色
创建一个selector来指定选中的颜色和默认的颜色
<!--selector_navigation.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#F14040" android:state_checked="true" />
<item android:color="#959393"/>
</selector>
<!--BottomNavigationView的属性 -->
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都显示,包括文字
unlabeled(LABEL_VISIBILITY_UNLABELED):
Label is not shown on any navigation items.
在所有item 中都不显示,包括底下都文字
selected(LABEL_VISIBILITY_SELECTED):
官方解释:Label is shown on the selected navigation item.
标签在选中的item 中显示,
我们就按照自己的效果选择显示效果吧~
修改文字大小
在dimens文件中添加属性值修改文字大小
<!--修改默认(未选中)的文字大小 -->
<dimen name="design_bottom_navigation_text_size" tools:override="true">16sp</dimen>
<!--修改选中的文字大小 -->
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">16sp</dimen>
修改图片文字间距大小
<dimen name="design_bottom_navigation_margin" tools:override="true">10dp</dimen>
这里注意margin的使用,不是越大,文字图片的间距就越大,还是拿修改参数看图说话
margin=0dp
margin=10dp
从图中我们很明显就能看出,margin类似于margin_top。这里的值是对应于上边距的。这点需要注意。
修改图片大小
xml中自带属性arrt:BottomNavigationView_itemIconSize
app:itemIconSize = 24dp
其他dimens修改
<dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>//选中时的最大宽度
<dimen name="design_bottom_navigation_active_text_size">14sp</dimen>//选中时的字体大小
<dimen name="design_bottom_navigation_elevation">8dp</dimen>//阴影的大小
<dimen name="design_bottom_navigation_height">56dp</dimen>//高度
<dimen name="design_bottom_navigation_item_max_width">96dp</dimen>//未选中的最大宽度
<dimen name="design_bottom_navigation_item_min_width">56dp</dimen>//未选中的最小的宽度
<dimen name="design_bottom_navigation_margin">8dp</dimen>//icon与文本之间的间距
<dimen name="design_bottom_navigation_shadow_height">1dp</dimen>//阴影高度
<dimen name="design_bottom_navigation_text_size">12sp</dimen>//未选中时的字体大小
参考:
Google BottomNavigationView 文档
Material Design系列之BottomNavigationView详解 - 简书
BottomNavigationView实现底部导航栏的实现(一) - kunkun5love的博客 - CSDN博客