Android学习之BottomNavigationBar实现Android特色底部导航栏

原文地址：http://blog.csdn.net/qq_16131393/article/details/51419901

感谢作者提供博文

下面是我的总结。

实现：

1、添加依赖

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

2、写入布局文件

<com.ashokvarma.bottomnavigation.BottomNavigationBar
    android:id="@+id/bnb"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:textAlignment="center"
    />

3、控件绑定并设置text和icon

控件绑定就不说了，直接贴代码

private BottomNavigationBar mBottomNavigationBar;

mBottomNavigationBar = findViewById(R.id.bnb);

//设置BottomNavigationBar的mode
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
//设置BottomNavigationBar的样式style
mBottomNavigationBar
        .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC
        );
mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "首页").setActiveColorResource(R.color.orange))
        .addItem(new BottomNavigationItem(R.drawable.legal, "法律知识").setActiveColorResource(R.color.teal))
        .addItem(new BottomNavigationItem(R.drawable.demand, "需求").setActiveColorResource(R.color.blue))
        .addItem(new BottomNavigationItem(R.drawable.setting, "设置").setActiveColorResource(R.color.colorPrimary))
        .setFirstSelectedPosition(0)
        .initialise();

mBottomNavigationBar.setTabSelectedListener(this);

特别注意：setMode()和setBackgroundstyle()一定要放在addItem()之前，要不没有想要的效果

bottomNavigationBar设置监听选项点击事件setTabSelectedListener。

//以下三个是bottomNavigationBar的监听
@Override
public void onTabSelected(int position) {
    switch (position) {
        case 0:
            showHomeFragment();
            break;
        case 1:
            showLegalAidKnowledgeFragment();
            break;
        case 2:
            showDemandFragment();
            break;
        case 3:
            showSettingFragment();
            break;
        default:
            break;
    }

}


@Override
public void onTabUnselected(int position) {

}

@Override
public void onTabReselected(int position) {

}

设置导航栏模式

Attribute: bnbMode Values: mode_default, mode_fixed, mode_shifting 
Method: setMode() Values:MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING

//设置BottomNavigationBar的mode
mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);

设置导航栏背景模式

Attribute: background_style_default, background_style_static, background_style_ripple

Method:BACKGROUND_STYLE_DEFAULT,BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

//设置BottomNavigationBar的样式style
mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC

注意：导航栏的模式和背景模式搭配不一下，效果也是不一样的。

颜色设置

Attributes: bnbActiveColor, bnbInactiveColor, bnbBackgroundColor Value: Color value or resource 
Methods: setActiveColor, setInActiveColor, setBarBackgroundColor Value: Color value or resource

mBottomNavigationBar.setActiveColor(R.color.primary).setInActiveColor("#FFFFFF").setBarBackgroundColor("#ECECEC")

in-active color : is the icon and text color of the in-active/un-selected tab

是图标和文字的颜色（选中/未选中）

active color : In BACKGROUND_STYLE_STATIC active color is the icon and text color of the active/selected tab. In BACKGROUND_STYLE_RIPPLE active color is the bottom bar background color (which comes with ripple animation)

在BACKGROUND_STYLE_STATIC 模式下颜色是图标和文字的颜色（选中/未选中），在BACKGROUND_STYLE_RIPPLE 模式下是底部导航栏背景色。

background color : In BACKGROUND_STYLE_STATIC background color is the bottom bar background color. In BACKGROUND_STYLE_RIPPLE background color is the icon and text color of the active/selected tab.

在BACKGROUND_STYLE_STATIC 模式下颜色是底部导航栏背景色，BACKGROUND_STYLE_RIPPLE模式下是图标和文字的颜色（选中/未选中）

默认颜色：

Default colors: 
1. Theme’s Primary Color will be active color. 
2. Color.LTGRAY will be in-active color. 
3. Color.WHITE will be background color.

1.主题的PrimaryColor将是active color 
2.Color.LTGRAY（灰色）是 in-active color 
3.白色是背景色

代码示例：

mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "首页").setActiveColorResource(R.color.orange))
        .addItem(new BottomNavigationItem(R.drawable.legal, "法律知识").setActiveColorResource(R.color.teal))
        .addItem(new BottomNavigationItem(R.drawable.demand, "需求").setActiveColorResource(R.color.blue))
        .addItem(new BottomNavigationItem(R.drawable.setting, "设置").setActiveColorResource(R.color.colorPrimary))
        .setFirstSelectedPosition(0)
        .initialise();

添加标记：

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, "首页").setActiveColorResource(R.color.orange).setBadgeItem(numberBadgeItem));