BottomNavigation使用说明

#BottomNavigation

##使用说明

###基本用法

maven

<dependency>
  <groupId>com.ashokvarma.android</groupId>
  <artifactId>bottom-navigation-bar</artifactId>
  <version>1.3.0</version>
  <type>pom</type>
</dependency>

Gradle

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

在你的Activity xml中

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

在你的类中

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();

添加 TabSelectedListener

bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
    @Override
    public void onTabSelected(int position) {
    }
    @Override
    public void onTabUnselected(int position) {
    }
    @Override
    public void onTabReselected(int position) {
    }
});

##定制化

###BottNavigationBar 定制化

  1. Modes

Attribute: bnbMode Values: mode_default, mode_fixed, mode_shifting

Method: setMode() Values:MODE_DEFAULT, MODE_FIXED, MODE_SHIFTING

设置Mode的代码片段：

bottomNavigationBar
                 .setMode(BottomNavigationBar.MODE_FIXED)

MODE_DEFAULT:如果tabs的数量少于或等于3，使用MODE_FIXED，否则使用MODE_SHIFTING

  1. Background Styles

Attribute: bnbBackgroundStyle Values:background_style_default, background_style_static,background_style_ripple

Method: setBackgroundStyle() Values: BACKGROUND_STYLE_DEFAULT, BACKGROUND_STYLE_STATIC, BACKGROUND_STYLE_RIPPLE

设置background style的代码片段：

bottomNavigationBar
                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE)

BACKGROUND_STYLE_RIPPLE: 如果模式是MODE_FIXED，那么使用BACKGROUND_STYLE_STATIC，如果模式是MODE_SHIFTING，那么使用BACKGROUND_STYLE_RIPPLE

  1. Colors

Attributes: bnbActiveColor, bnbInactiveColor, bnbBackgroundColor Value: Color value or resource

Methods: setActiveColor, setInActiveColor, setBarBackgroundColor Value: Color value or resource

设置颜色的代码片段：

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

in-active color: Tab没使用时候图标和文字的颜色

active color： 当style是BACK_GROUND_STYLE_STATIC，active color是图标和文字被选中的颜色；当style是BACK_GROUND_STYLE_RIPPLE时，active color是底部导航条的背景色

背景颜色： 当style是BACK_GROUND_STYLE_STATIC时，背景颜色是底部条的背景;当style是BACK_GROUND_STYLE_RIPPLE时，背景颜色是图标和文字被选中的颜色

默认颜色：

  1. active color：Theme的Primary color
  2. in active color: Color.LTGRAY

  3. background color: Color.WHITE

  4. BottomNavigationItem 颜色定制

为BottomNavigationItem设置颜色：如果需要为不同的tab设置不同的激活和非激活颜色，当然也可以设置激活和非激活颜色

代码片段：

bottomNavigationBar
               .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home").setActiveColor(R.color.orange).setInActiveColor(R.color.teal))
               .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books").setActiveColor("#FFFF00"))
               .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music").setInActiveColor("#00FFFF"))
               .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
               .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games").setActiveColor(R.color.grey))

如果没有设置 bottomNavigationItem的激活和非激活颜色，则从 bottomNavigationBar 来继承。

  1. Elevation 高度

Attribute： bnbElevation

默认8dp， 可以设置为0dp

  1. BottomNavigationItem图标定制

如果Icon的激活/非激活态只是颜色不同还不能满足你，该控件还允许设置激活/非激活态的不同图标

代码片段：
new BottomNavigationItem(R.drawable.ic_home_white_24dp, “Home”).setInactiveIcon(R.drawable.ic_home_black)

##动作设置

###自动隐藏

如果控件是在Co-ordinator Layout中，默认地，当用户滑动时，自动隐藏，反方向则出现，若想关闭这个特性：

bottomNavigationBar.setAutoHideEnabled(false);

###隐藏/出现

在代码的任何地方，都可以实现BottomNavigationBar的隐藏和出现 

bottomNavigationBar.hide();
bottomNavigationBar.show();

##Badges（类似微博微信的小红点）

代码片段：

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))

可以设置具体的动作等等。

FAB&SnackBar（Floating Action Bar和SnackBar）

都可以一起使用

FAB和BottomNavigationBar应该写在一个Coordinator Layout中

用setFab在bottomNavigationBar上连接所有的部件

代码片段：

FloatingActionButton fabHome = (FloatingActionButton) findViewById(R.id.fab_home);
BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bnb);
bottomNavigationBar.setFab(fabHome);