欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

BottomNavigationBar使用详解

发布时间:2025/6/17 编程问答 3 豆豆
生活随笔 收集整理的这篇文章主要介绍了 BottomNavigationBar使用详解 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

gitHub地址:https://github.com/Ashok-Varma/BottomNavigation

一、基本使用

1.在AndroidStudio下添加依赖: 
compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.3' 
2.在布局文件中,添加布局

<com.ashokvarma.bottomnavigation.BottomNavigationBarandroid:id="@+id/bottom_navigation_bar"android:layout_width="match_parent"android:layout_height="wrap_content"/>

  

3.在代码中为BottomNavigationBar添加Item选项

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home")).addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books")).addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music")).addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV")).addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games")).initialise();//所有的设置需在调用该方法前完成

  

4.添加选项卡切换事件监听

bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){@Overridepublic void onTabSelected(int position) {//未选中->选中}@Overridepublic void onTabUnselected(int position) {//选中->未选中}@Overridepublic void onTabReselected(int position) {//选中->选中}});

  

二、BottomNavigationBar定制

1. 模式Modes

属性:bnbMode 
值:mode_default, mode_fixed, mode_shifting, mode_fixed_no_title, mode_shifting_no_title 
方法:setMode() 
参数:MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING, MODE_FIXED_NO_TITLE, MODE_SHIFTING_NO_TITLE

每种类型都会显示菜单Icon,只有名称显示方式不同

mode_default:如果选项大于3个,使用mode_shifting,否则使用mode_fixed

mode_fixed:每个item对应名称,不选中也会显示

mode_shifting:每个item对应名称,只有选中才会显示,不选中隐藏

mode_fixed_no_title:相当于mode_fixed只是不显示所有文字

mode_shifting_no_title:相当于mode_shifting只是不显示所有文字

2. 背景样式Background Styles

属性:app:bnbBackgroundStyle 
值:background_style_default, background_style_static, background_style_ripple 
方法:setBackgroundStyle() 
参数:BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

3种style

background_style_default:如果mode设为MODE_FIXED,默认使用BACKGROUND_STYLE_STATIC;如果mode设为MODE_SHIFTING,默认使用 BACKGROUND_STYLE_RIPPLE

background_style_static:点击的时候没有水波纹效果

background_style_ripple:点击的时候有水波纹效果

3.颜色Colors

属性:bnbActiveColor, bnbInactiveColor, bnbBackgroundColor 
方法:setActiveColor, setInActiveColor, setBarBackgroundColor 
值:颜色值或者资源 
例如:

bottomNavigationBar.setActiveColor(R.color.primary).setInActiveColor("#FFFFFF").setBarBackgroundColor("#ECECEC")

  

类型和默认值

in-active color:图标和文本未被激活或选中的颜色;默认颜色为Theme’s Primary Color

active color : 在BACKGROUND_STYLE_STATIC下,为图标和文本激活或选中的颜色;在BACKGROUND_STYLE_RIPPLE下,为整个控件的背景颜色;默认颜色为Color.LTGRAY

background color :在BACKGROUND_STYLE_STATIC 下,为整个空控件的背景色;在 BACKGROUND_STYLE_RIPPLE 下为图标和文本被激活或选中的颜色;默认颜色为Color.WHITE

4.自定义Item颜色Individual BottomNavigationItem Colors

如果Item的选中/未选中颜色需要特殊处理,可以调用

new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColor(R.color.orange)//设置选中的颜色.setInActiveColor(R.color.teal)//设为未选中的颜色

  

5.阴影高度Elevation

属性:bnbElevation

如果不需要阴影或者想要自定义,可以设置为0dp,默认为8dp

6.自定义选项图标BottomNavigationItem Icon Customisations

可以设置选项,选中和未选中使用不同的图标

//setInactiveIcon()设置未选中的图标 new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setInactiveIcon(R.drawable.ic_home_black)

  

7.自动隐藏/手动隐藏

自动隐藏:

如果容器在Co-ordinator Layout布局内,默认情况下,向下滚动会隐藏,向上滚动会展示;通过调用方法setAutoHideEnabled(false)可以关闭该特性

手动隐藏:

调用方法

bottomNavigationBar.hide();//隐藏 bottomNavigationBar.show();//显示

  

展示和隐藏时动画模式

默认都是动画模式,参数传false可以关闭动画

bottomNavigationBar.hide(false);//关闭动画效果 bottomNavigationBar.show(false);//关闭动画效果

  

isHidden() 返回是否隐藏

三、BottomNavigationBar角标(小红点)Badges

基本使用

1.如何添加

  • 每个item都可以添加badge
  • 每个item又一个badges
  • 首先创建一个BadgeItem,然后关联到item上

2.类型

  • TextBadgeItem
  • ShapeBadgeItem

3.代码示例

//setBadgeItem(badgeItem) TextBadgeItem numberBadgeItem = new TextBadgeItem(); ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem(); bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(shapeBadgeItem))numberBadgeItem.setText("")// 更新数据

  也可以自定义badgeItem

numberBadgeItem.setText("9") //显示的文本.setBackgroundColor("#FF0000") //背景色.setTextColor("#FFFFFF") //文本颜色.setBorderColor("#000000") //border颜色.setBorderWidth(5) //border宽度px.setBackgroundColorResource(R.color.colorPrimaryDark) //背景色,资源文件获取.setBorderColorResource(R.color.colorPrimary) //border颜色,资源文件获取.setTextColorResource(R.color.colorAccent) //文本颜色,资源文件获取.setAnimationDuration(30) //隐藏和展示的动画速度,单位毫秒,和setHideOnSelect一起使用.setGravity(Gravity.RIGHT|Gravity.TOP) //位置,默认右上角.setHideOnSelect(true); //true:当选中状态时消失,非选中状态显示,moren falseshapeBadgeItem.setShape(SHAPE_OVAL) //形状.setShapeColor(Color.BLUE) //颜色.setShapeColorResource(R.color.colorPrimaryDark) //颜色,资源文件获取.setEdgeMarginInDp(this,0) //距离Item的margin,dp.setEdgeMarginInPixels(20) //距离Item的margin,px.setSizeInDp(this,10,10) //宽高,dp.setSizeInPixels(5,5) //宽高,px.setAnimationDuration(200) //隐藏和展示的动画速度,单位毫秒,和setHideOnSelect一起使用.setGravity(Gravity.LEFT) //位置,默认右上角.setHideOnSelect(true); //true:当选中状态时消失,非选中状态显示,moren false

  

4.badgeItem方法简介

属性描述方法参数
Hide On Select选中时隐藏,默认falsesetHideOnSelect()boolean
Animation Duration显示隐藏的动画时间,默认200setAnimationDuration()int毫秒
Hide隐藏并有动画效果hide() 
Hide with animation control隐藏时动画效果,默认有(true)hide()boolean
UnHide/Show显示并有动画效果show() 
UnHide/Show with animation control显示时动画效果,默认有(true)show()boolean
Toggletoggles badge between hide/show with animationtoggle() 
Toggle with animation controltoggles badge between hide/show with/without animationtoggle() 
Is Hidden是否隐藏isHidden() 
Graviy设置位置,默认右上角setGravity()Gravity.TOP/BOTTOM/LEFT/RIGHT任意组合

5.textBadgeItem方法简介

属性描述方法参数
Textt设置文本setText()CharSequence
Text Color设置文本颜色,默认白色setTextColorResource(), setTextColor()Resource/ColorCode(String)/Color
BackgroundColor设置背景颜色setBackgroundColorResource(), setBackgroundColor()Resource/ColorCode(String)/Color
Border Width设置border宽度setBorderWidth()int (px值)
Border Color设置border颜色setBorderColorResource(), setBorderColor()Resource/ColorCode(String)/Color

6.shapeBadgeItem方法简介

属性描述方法参数
Shape设置形状setShape()SHAPE_OVAL(椭圆), SHAPE_RECTANGLE(矩形), SHAPE_HEART(心形), SHAPE_STAR_3_VERTICES(三角形), SHAPE_STAR_4_VERTICES(菱形), SHAPE_STAR_5_VERTICES(五角星), SHAPE_STAR_6_VERTICES(六角)
yanse设置颜色setShapeColorResource(), setShapeColor()Resource/ColorCode(String)/Color
Shape Size设置宽高setSizeInDp(), setSizeInPixels()int(width and height in pixels/dp)
Shape MarginMargin around the shapesetEdgeMarginInDp(), setEdgeMarginInPixels()int (margin in pixels/dp)

四、FAB & SnackBar

1.SnackBar

底部导航自动与snackBar同步,无需任何代码。

2.FAB

  • FAB和BottomNavigationBar必须在同一个Coordinator Layout.
  • 调用bottomNavigationBar的setFab()方法关联

3.示例代码

FloatingActionButton fabHome = (FloatingActionButton) findViewById(R.id.fab_home); BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb); bottomNavigationBar.setFab(fabHome);

  

转载于:https://www.cnblogs.com/geili/p/10247773.html

总结

以上是生活随笔为你收集整理的BottomNavigationBar使用详解的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。