添加依赖
implementation 'com.ashokvarma.android:bottom-navigation-bar:2.2.0'
使用
class BottomNavBar @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : BottomNavigationBar(context, attrs, defStyleAttr) {
init {
//第一个参数 选中的图标
//第二个参数 文本
val mHomeItem = BottomNavigationItem(R.drawable.main_tab1_select,"待办")
mHomeItem.apply {
//选中文本颜色
setActiveColorResource(R.color.col474)
//未选中文本颜色
setInActiveColorResource(R.color.col464)
//未选中图标
setInactiveIconResource(R.drawable.main_tab1_normal)
}
val mCheckItem = BottomNavigationItem(R.drawable.main_tab2_select,"检查信息")
mCheckItem.apply {
setActiveColorResource(R.color.common_yellow)
setInActiveColorResource(R.color.col464)
setInactiveIconResource(R.drawable.main_tab2_normal)
}
val mMeItem = BottomNavigationItem(R.drawable.main_tab3_select,"我的")
mMeItem.apply {
setActiveColorResource(R.color.colfc4)
setInActiveColorResource(R.color.col464)
setInactiveIconResource(R.drawable.main_tab3_normal)
}
//设置导航栏模式(配合setBackgroundStyle实现不同效果)
setMode(BottomNavigationBar.MODE_FIXED)
//设置导航栏背景模式 (要放在addItem前)
setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)
//背景色
setBarBackgroundColor(R.color.common_white)
//将item添加到布局中
addItem(mHomeItem)
addItem(mCheckItem)
addItem(mMeItem)
setFirstSelectedPosition(0)
//一定要加上这个否则不会显示
initialise()
}
}
//选中事件
mBottomBar.setTabSelectedListener(object : BottomNavigationBar.OnTabSelectedListener{
override fun onTabReselected(position: Int) {
}
override fun onTabUnselected(position: Int) {
}
override fun onTabSelected(position: Int) {
updateFragment(position)
}
})
setMode
MODE_DEFAULT
如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式
MODE_FIXED (固定大小)
填充模式,未选中的Item会显示文字,没有换挡动画。
宽度=总宽度/action个数
最大宽度: 168dp
最小宽度: 80dp
Padding:6dp(8dp)、10dp、12dp
字体大小:12sp、14sp
MODE_SHIFTING (不固定大小)
换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画
setBackgroundStyle
BACKGROUND_STYLE_DEFAULT
如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC
点击的时候没有水波纹效果
航条的背景色是白色,加上setBarBackgroundColor()可以设置成你所需要的任何背景颜色
BACKGROUND_STYLE_RIPPLE
点击的时候有水波纹效果
导航条的背景色是你设置的处于选中状态的 Item的颜色(ActiveColor),也就是setActiveColorResource这个设置的颜色
mode+style
MODE_FIXED+BACKGROUND_STYLE_STATIC效果
MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果
MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果
MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果
模式跟背景的设置都要在添加tab前面,不然不会有效果
标记
BadgeItem numberBadgeItem = new BadgeItem()
.setBorderWidth(4)
.setBackgroundColorResource(R.color.blue)
.setText("5")
.setHideOnSelect(autoHide.isChecked());
bottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem))