这个控件比较炫酷
一.简单使用
1.导包 添加依赖
compile'com.ashokvarma.android:bottom-navigation-bar:2.0.4'
2.在主布局里面添加代码
<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
3.主函数
bottomNavigationBar=findViewById(R.id.bottom_navigation_bar);
bottomNavigationBar
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Home"))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, "Books"))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Music"))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher_round, "Movies & TV"))
.addItem(new BottomNavigationItem(R.mipmap.ic_launcher, "Games"))
.initialise();//所有的设置需在调用该方法前完成
bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
@Override
public void onTabSelected(int position) {
//未选中时->选中就会调用
}
@Override
public void onTabUnselected(int position) {
//选中时->再选中下一个时调用
}
@Override
public void onTabReselected(int position) {
//选中时->再次选中调用
}
});
二.额外的效果
上面这些就是最简单的用法 下面就是添加一些别的属性和效果
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.代码示例 里面直接new 就可以了
//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);