BottomNavigationBar使用详解

---

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

一、基本使用

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

 <com.ashokvarma.bottomnavigation.BottomNavigationBar        android: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(){            @Override            public void onTabSelected(int position) {                //未选中->选中            }            @Override            public void onTabUnselected(int position) {                //选中->未选中            }            @Override            public 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 false shapeBadgeItem.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 选中时隐藏，默认false setHideOnSelect() boolean Animation Duration 显示隐藏的动画时间，默认200 setAnimationDuration() int毫秒 Hide 隐藏并有动画效果 hide() Hide with animation control 隐藏时动画效果，默认有(true) hide() boolean UnHide/Show 显示并有动画效果 show() UnHide/Show with animation control 显示时动画效果，默认有(true) show() boolean Toggle toggles badge between hide/show with animation toggle() Toggle with animation control toggles badge between hide/show with/without animation toggle() 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 Margin Margin around the shape setEdgeMarginInDp(), 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);