BottomNavigationBar的使用

最近在写底部导航栏,平时用到的就常见了,不过Material Desigh的导航栏却用的不多。在谷歌官方文档上有这种设计,可惜却没用过。所以学习了一下,这里记录下来。

那么BottomNavigationBar是什么样子呢?请看图

这里写图片描述

下面看下我的效果图:

这里写图片描述

添加依赖

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

布局代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.student.kevin.bottomnavigationbar.MainActivity">

    <LinearLayout
        android:id="@+id/ll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:text="Hello World!"></LinearLayout>

    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"></com.ashokvarma.bottomnavigation.BottomNavigationBar>
</RelativeLayout>
 

也就是与其他布局使用方法一样,直接在布局里面添加就行了。

代码中的使用
 mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
 mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one, R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem))
                .addItem(new BottomNavigationItem(R.drawable.icon_two, R.string.tab_two).setActiveColorResource(R.color.orange))
                .addItem(new BottomNavigationItem(R.drawable.icon_three, R.string.tab_three).setActiveColorResource(R.color.lime))
                .addItem(new BottomNavigationItem(R.drawable.icon_four, R.string.tab_four))//依次添加item,分别icon和名称
                .setFirstSelectedPosition(0)//设置默认选择item
                .initialise();//初始化
 

 这样底部导航栏就有了,是不是很简单。相比平时写的导航栏确实简单的很多。这样还不行,光有导航栏了,还要有监听,因为我们要根据点击导航栏的tab来切换不同的fragment。所以要添加监听事件。

这里写图片描述

 添加监听,重写方法,我们最常做的事情 
这样在重写的方法里进行Fragment的切换即可

 @Override
    public void onTabSelected(int position) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        switch (position) {
            case 0:
                if (mFragmentOne == null) {
                    mFragmentOne = FragmentOne.newInstance("First Fragment");
                }
                transaction.replace(R.id.ll_content, mFragmentOne);
                break;
            case 1:
                if (mFragmentTwo == null) {
                    mFragmentTwo = FragmentTwo.newInstance("Second Fragment");
                }
                transaction.replace(R.id.ll_content, mFragmentTwo);
                break;
            case 2:
                if (mFragmentThree == null) {
                    mFragmentThree = FragmentThree.newInstance("Third Fragment");
                }
                transaction.replace(R.id.ll_content, mFragmentThree);
                break;
            case 3:
                if (mFragmentFour == null) {
                    mFragmentFour = FragmentFour.newInstance("Forth Fragment");
                }
                transaction.replace(R.id.ll_content, mFragmentFour);
                break;
            default:
                if (mFragmentOne == null) {
                    mFragmentOne = FragmentOne.newInstance("First Fragment");
                }
                transaction.replace(R.id.ll_content, mFragmentOne);
                break;
        }
        transaction.commit();

    }

    @Override
    public void onTabUnselected(int position) {

    }

    @Override
    public void onTabReselected(int position) {

    }

这样出现的只是默认的效果,我们如果要自己需要的颜色背景呢? 
当然有方法

个性化BottomNavigationBar
BottomNavigationBar已经提供给了我们方法

mBottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
 

 Mode和BackgroundStyle分别有三种,分别包含一种Default模式

效果图

这里截取几种效果图:

  • Default默认效果

这里写图片描述

  • FIXED+STATIC

这里写图片描述

  • FIXED+RIPPLE

这里写图片描述

  • SHIFTING+RIPPLE

这里写图片描述

SHIFTING+STATIC效果这里就不传了,通过对比可以发现,默认的效果其实就是SHIFTING+STATIC效果 

设置导航栏颜色

当然导航栏的颜色也是可以设置成固定颜色的,刚开始的效果图可以看到导航栏是蓝色。默认颜色的colorAccent

 mBottomNavigationBar.setBarBackgroundColor(R.color.blue);//set background color for navigation bar,设置底部导航栏颜色

添加黄色小圆点
还上面的效果图上可以看到,第一个tab上面有一个黄色的小圆点。这跟小红点是一样的,只是我设置颜色为黄色的了。 
这个就是添加了一个BadgeItem.

BadgeItem badgeItem = new BadgeItem();
        badgeItem.setHideOnSelect(false)
                .setText("10")
                .setBackgroundColorResource(R.color.orange)
                .setBorderWidth(0);

//导航栏中的tab添加小圆点
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_one, R.string.tab_one).setActiveColorResource(R.color.green).setBadgeItem(badgeItem));

 

Demo下载

下载一

下载二(github)

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
很抱歉,由于提供的引用内容过于简略,我无法确定您在使用BottomNavigationBar时遇到了什么具体的错误。但是,我可以提供一些可能有用的信息来帮助您解决问题。 1. 检查您的依赖项:BottomNavigationBar是一个第三方库,因此请确保您已正确添加依赖项。您可以在项目的build.gradle文件中添加以下行来添加BottomNavigationBar库: ```gradle dependencies { implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.4' } ``` 2. 检查您的XML布局:请确保您已正确设置BottomNavigationBar的XML布局。例如,以下是一个简单的BottomNavigationBar布局: ```xml <com.ashokvarma.bottomnavigation.BottomNavigationBar android:id="@+id/bottom_navigation_bar" android:layout_width="match_parent" android:layout_height="wrap_content" app:bbn_backgroundColor="@android:color/white" app:bbn_activeColor="@color/colorPrimary" app:bbn_inActiveColor="@android:color/darker_gray" app:bbn_mode="MODE_FIXED" app:bbn_itemWidth="80dp" app:bbn_elevation="8dp" app:bbn_tabPaddingLeftRight="16dp" app:bbn_tabPaddingTopBottom="8dp" app:bbn_tabMargin="4dp" app:bbn_tabGravity="GRAVITY_CENTER" app:bbn_shadowVisible="true"/> ``` 3. 检查您的代码:请确保您已正确设置BottomNavigationBar的代码。例如,以下是一个简单的BottomNavigationBar设置代码: ```java BottomNavigationBar bottomNavigationBar = findViewById(R.id.bottom_navigation_bar); bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED); bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC); bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home, "Home").setActiveColorResource(R.color.colorPrimary)) .addItem(new BottomNavigationItem(R.drawable.ic_music, "Music").setActiveColorResource(R.color.colorPrimary)) .addItem(new BottomNavigationItem(R.drawable.ic_video, "Video").setActiveColorResource(R.color.colorPrimary)) .addItem(new BottomNavigationItem(R.drawable.ic_books, "Books").setActiveColorResource(R.color.colorPrimary)) .setFirstSelectedPosition(0) .initialise();``` 如果您仍然遇到问题,请提供更多详细信息,例如错误消息或代码示例,以便我可以更好地帮助您解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值