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

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"
修改文字切换颜色.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文件中添加属性值修改文字大小

<!--修改默认(未选中)的文字大小 -->
<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>
修改文字大小.png

修改图片文字间距大小

<dimen name="design_bottom_navigation_margin" tools:override="true">10dp</dimen>

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

margin=0dp


margin:0dp.png

margin=10dp


margin:10dp.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345