Android底部导航栏BottomNavigationBar

最新推荐文章于 2025-02-20 18:18:38 发布

JunLi_YNU

最新推荐文章于 2025-02-20 18:18:38 发布

阅读量1.2k

点赞数 2

分类专栏： Android工具依赖库文章标签：底部导航栏 BottomNavigationBar

本文链接：https://blog.youkuaiyun.com/qq_36607515/article/details/82222740

版权

Android工具依赖库专栏收录该内容

1 篇文章

订阅专栏

BottomNavigationBar是一个可以快速建立底部导航栏的依赖库

github依赖库地址：https://github.com/Ashok-Varma/BottomNavigation

BottomNavigationBar的使用

添加依赖：

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4'

添加控件：

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:id="@+id/bottom_navigation_bar_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    >

设置大Item上面的小Item（徽章）项（例如提示你有几条消息）：

文本徽章：

//设置Item上面的小Item(文本标记Item）
TextBadgeItem textBadgeItem = new TextBadgeItem()
        //设置Item的文本颜色
        .setTextColor(R.color.littleItemTextColor)
        //设置边界的颜色(默认为白色)
        .setBorderColor(R.color.littleItemColor)
        //设置边框像素的宽度
        .setBorderWidth(10)
        //设置隐藏和显示动画的时间
        .setAnimationDuration(200)
        //设置Item的文本
        .setText("100")
        //设置选中后为隐藏
        .setHideOnSelect(true)
        //设置Item的背景颜色
        .setBackgroundColorResource(R.color.red);

图形徽章：

//设置Item上面的图形标记Item
ShapeBadgeItem shapeBadgeItem = new ShapeBadgeItem()
        //设置图形标记的形状(0-6)目前有七种形状
        .setShape(2)
        //设置图像的颜色
        .setShapeColorResource(R.color.red)
        .setGravity(Gravity.TOP|Gravity.END)
        //设置选中后为隐藏
        .setHideOnSelect(true);

设置BottomNavigationBar的基本属性：

//设置被选中Item的模式
bottomNavigationBar
        .setMode(BottomNavigationBar.MODE_SHIFTING_NO_TITLE);
//设置控件的Style
bottomNavigationBar
        .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_DEFAULT);
//设置控件的背景颜色
bottomNavigationBar
        .setBarBackgroundColor(R.color.BarBackgroundColor);

设置BottomNavigationBar的Item：

//添加按钮
bottomNavigationBar
        .addItem(new BottomNavigationItem(R.drawable.ic_textsms_black_24dp,
                R.string.NavigationItem_One)
                //设置当Item未选中状态的图标
                .setInactiveIcon(ContextCompat.getDrawable
                        (MainActivity.this,R.drawable.ic_sms_failed_black_24dp)))
        .addItem(new BottomNavigationItem(R.drawable.ic_person_black_24dp,
                R.string.NavigationItem_Two)
        .setBadgeItem(textBadgeItem))
        .addItem(new BottomNavigationItem(R.drawable.ic_star_border_black_24dp,
                R.string.NavigationItem_Three)
        .setBadgeItem(shapeBadgeItem))
        //设置默认选中的选项
        .setFirstSelectedPosition(2)
        .initialise();

设置选项的点击事件：

bottomNavigationBar
        .setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {
    @Override
    //未选中———>选中
    public void onTabSelected(int position) {
        switch (position) {
            case 0:
                Toast.makeText(MainActivity.this, "第"+(position+1)+"项被点击了",
                        Toast.LENGTH_SHORT).show();
                break;
            case 1:
                Toast.makeText(MainActivity.this,"第"+(position+1)+"项被点击了",
                        Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(MainActivity.this, "第"+(position+1)+"项被点击了",
                        Toast.LENGTH_SHORT).show();
                break;
                default:
                    break;
        }
    }
    //选中———>不被选中
    @Override
    public void onTabUnselected(int position) {

        switch (position) {
            case 0:
                Toast.makeText(MainActivity.this, "第"+(position+1)+"项不被选中了",
                        Toast.LENGTH_SHORT).show();
                break;
            case 1:
                Toast.makeText(MainActivity.this,"第"+(position+1)+"项不被选中了",
                        Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(MainActivity.this, "第"+(position+1)+"项不被选中了",
                        Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }

    }

    //选中———>再次选中
    @Override
    public void onTabReselected(int position) {

        switch (position) {
            case 0:
                Toast.makeText(MainActivity.this, "第"+(position+1)+"项再次被点击了",
                        Toast.LENGTH_SHORT).show();
                break;
            case 1:
                Toast.makeText(MainActivity.this,"第"+(position+1)+"项再次被点击了",
                        Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(MainActivity.this, "第"+(position+1)+"项再次被点击了",
                        Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }

    }
});

效果：

第一项位被选中：

第一项位未被选中：

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() 返回是否隐藏

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任意组合

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

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)