添加依賴
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 {
//第一個(gè)參數(shù) 選中的圖標(biāo)
//第二個(gè)參數(shù) 文本
val mHomeItem = BottomNavigationItem(R.drawable.main_tab1_select,"待辦")
mHomeItem.apply {
//選中文本顏色
setActiveColorResource(R.color.col474)
//未選中文本顏色
setInActiveColorResource(R.color.col464)
//未選中圖標(biāo)
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)
}
//設(shè)置導(dǎo)航欄模式(配合setBackgroundStyle實(shí)現(xiàn)不同效果)
setMode(BottomNavigationBar.MODE_FIXED)
//設(shè)置導(dǎo)航欄背景模式 (要放在addItem前)
setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)
//背景色
setBarBackgroundColor(R.color.common_white)
//將item添加到布局中
addItem(mHomeItem)
addItem(mCheckItem)
addItem(mMeItem)
setFirstSelectedPosition(0)
//一定要加上這個(gè)否則不會(huì)顯示
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的個(gè)數(shù)<=3就會(huì)使用MODE_FIXED模式,否則使用MODE_SHIFTING模式
MODE_FIXED (固定大写涣啤)
填充模式糠悼,未選中的Item會(huì)顯示文字,沒有換擋動(dòng)畫铝条。
寬度=總寬度/action個(gè)數(shù)
最大寬度: 168dp
最小寬度: 80dp
Padding:6dp(8dp)、10dp贤壁、12dp
字體大胁和:12sp、14sp
MODE_SHIFTING (不固定大忻)
換擋模式旨怠,未選中的Item不會(huì)顯示文字,選中的會(huì)顯示文字迷扇。在切換的時(shí)候會(huì)有一個(gè)像換擋的動(dòng)畫
setBackgroundStyle
BACKGROUND_STYLE_DEFAULT
如果設(shè)置的Mode為MODE_FIXED谋梭,將使用BACKGROUND_STYLE_STATIC 倦青。如果Mode為MODE_SHIFTING將使用BACKGROUND_STYLE_RIPPLE。
BACKGROUND_STYLE_STATIC
點(diǎn)擊的時(shí)候沒有水波紋效果
航條的背景色是白色隘庄,加上setBarBackgroundColor()可以設(shè)置成你所需要的任何背景顏色
BACKGROUND_STYLE_RIPPLE
點(diǎn)擊的時(shí)候有水波紋效果
導(dǎo)航條的背景色是你設(shè)置的處于選中狀態(tài)的 Item的顏色(ActiveColor)丑掺,也就是setActiveColorResource這個(gè)設(shè)置的顏色
mode+style
MODE_FIXED+BACKGROUND_STYLE_STATIC效果
fixed_static.gif
MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果
fixed_ripple.gif
MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果
shift_static.gif
MODE_FIXED+BACKGROUND_STYLE_RIPPLE效果
shift_ripple.gif
模式跟背景的設(shè)置都要在添加tab前面,不然不會(huì)有效果
標(biāo)記
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))
bradge.png