美文网首页
底部导航栏BottomNavigationBar

底部导航栏BottomNavigationBar

作者: Method | 来源:发表于2021-05-25 15:23 被阅读0次

github地址

添加依赖

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效果

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

模式跟背景的设置都要在添加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))
bradge.png

相关文章

网友评论

      本文标题:底部导航栏BottomNavigationBar

      本文链接:https://www.haomeiwen.com/subject/bufcsltx.html