BottomNavigationBar

这个空间用于构建底部导航栏
可以添加导航栏的文字和图片，切换颜色，还可以添加右上角的消息

引入

在gradle中引入相应的包

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

在xml文件中添加BottomNavigationBar
标准高度是56dp，如果高度不为这个会出现一些不适配的问题，所以高度最好设为56dp

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        />

设置相应的属性

1 获取控件

private BottomNavigationBar bottomNavigationBar;
bottomNavigationBar=(BottomNavigationBar)findViewById(R.id.bottom_bar);

2 设置MODE

bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);

有两种MODE
MODE_FIXED
这种方式所有的图标和文字是固定的，而且文字和图片都会展现，在点击不同按钮时不会出现滑动的效果
MODE_SHIFTING
这种方式在没有选中时只显示标，不显示文字，选中是才会同时显示两者，而且切换时会有滑动的效果
大多数时是选用MODE_FIXED的，MODE_SHIFTING过于炫酷，有点乱。

3 设置BackgroundStyle

bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);

有两种
BACKGROUND_STYLE_STATIC
这种风格下，设置的选中颜色就是每一项被选中时文字和图片的颜色，
设置的未选中颜色就是图片和文字没有被选中时的颜色，
背景颜色就是导航条的背景色
BACKGROUND_STYLE_RIPPLE
这种风格下，每一项被选中时，这一项被设置的选中颜色就会变成导航条的背景色，设置的导航条的背景色就会变成这一项被选中时的颜色，这个正好和上面相反。
设置的未选中颜色就是图片和文字没有被选中时的颜色，这一项和上面一样。
一般使用BACKGROUND_STYLE_STATIC

4 设置背景色

注意是setBarBackgroundColor，不是setBackgroundColor

bottomNavigationBar.setBarBackgroundColor(R.color.black);

5 设置监听事件

bottomNavigationBar.setTabSelectedListener(new MyTabSetectedListener());
public class MyTabSetectedListener implements BottomNavigationBar.OnTabSelectedListener
    {
        @Override
        public void onTabReselected(int position) {

        }

        @Override
        public void onTabSelected(int position) {

        }

        @Override
        public void onTabUnselected(int position) {

        }
    }

6 添加条目

1 最基本的方式

 /*新建BottomNavigationItem对象，传入图片资源和文字，
        setActiveColor:设置选中时图片和文字的颜色
        setInActiveColor：设置未被选中时图片和文字的颜色
        这里这两个方法是作用在 BottomNavigationItem上的，代表只对这个条目有效
        */
//调用addItem方法，传入BottomNavigationItem对象，需要几个条目，就用多少次addItem方法
//当所有的bottomNavigationBar都设置完以后，才能调用initialise方法，表示这个底部导航栏生效
bottomNavigationBar
          .addItem(new BottomNavigationItem(R.drawable.ic_home_tab_more_normal,"首页").setActiveColor(Color.BLUE).setInActiveColor(Color.BLACK))
          .initialise();```
2 整体设置选中颜色和为选中颜色

/*
这里添加了四个条目
第一个条目中BottomNavigationItem调用了setActiveColor和setInActiveColor方法
同时在bottomNavigationBar上也调用了setActiveColor和setInActiveColor
在bottomNavigationBar的这两个方法代表对所有没有设置自己的setActiveColor和setInActiveColor方法的条目有效
如果BottomNavigationItem中调用的这两个方法只对自己这个条目有效
*/
//setFirstSelectedPosition(0)表示默认第一个条目是选中状态
bottomNavigationBar
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_more_normal,"首页").setActiveColor(Color.BLUE).setInActiveColor(Color.BLACK))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_near_selected,"附近"))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_my_selected,"我的"))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_more_selected,"更多"))
.setActiveColor(R.color.bottom_selected)
.setInActiveColor(R.color.bottom_unselected)
.setFirstSelectedPosition(0)
.initialise();

3 用自己的图片做替换
用上面的方法只能改变图标和文字的颜色，如果一个图标是一个空心只有边框的图标，那么它只能改变边框的颜色，无法在图标内部填充颜色，如果想实现未选中是空心图标，选中是有颜色的实心图标的效果，就要用下面的方法。

/*
注意注意注意：
这时同样可以在BottomNavigationItem和bottomNavigationBar上调用setActiveColor和setInActiveColor方法在
但是，这时颜色的改变只对文字有效，对图片无效了，即如果自己设置选中和未选中状态的图片，那么就不能更改颜色了
如果想让文字和图片的颜色统一，就需要先获取选中状态和未选中状态的图标的颜色，然后setActiveColor和setInActiveColor方法
中传入这两个颜色，这样图片和文字的状态就统一了
*/
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_index_selected,"首页").setInactiveIconResource(R.drawable.ic_home_tab_index_normal))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_near_selected,"附近").setInactiveIconResource(R.drawable.ic_home_tab_near_normal).setActiveColor(Color.BLUE).setInActiveColor(Color.BLACK))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_my_selected,"我的").setInactiveIconResource(R.drawable.ic_home_tab_my_normal))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_more_selected,"更多").setInactiveIconResource(R.drawable.ic_home_tab_more_normal))
.setActiveColor(R.color.bottom_selected)
.setInActiveColor(R.color.bottom_unselected)
.setFirstSelectedPosition(0)
.initialise();

4 添加消息提示的圆圈
例如微信有新消息时会在图标的右上角有一个小圆点，提示有多少条未读消息。这里也可以做到
用BadgeItem对象

private BadgeItem badgeItem;
badgeItem=new BadgeItem();
/*
方法分别为
1 设置边框宽度
2 设置边框颜色
3 设置背景颜色
4 设置文字
5 设置文字颜色
6 设置显示消失的时间，就是一个渐变
7 设置位置，Gravity.RIGHT|Gravity.TOP代表右上角
8 设置点击是图标是否消失
*/
badgeItem.setBorderWidth(1)
.setBorderColorResource(R.color.black)
.setBackgroundColorResource(R.color.red)
.setText("4")
.setTextColorResource(R.color.white)
//.setAnimationDuration(1000)
.setGravity(Gravity.RIGHT|Gravity.TOP)
.setHideOnSelect(false);
//在BottomNavigationItem调用setBadgeItem把BadgeItem对象传入，每一个条目都可以设置自己的BadgeItem
//如果为多个条目设置BadgeItem，就要创建多个BadgeItem对象
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_index_selected,"首页").setInactiveIconResource(R.drawable.ic_home_tab_index_normal).setBadgeItem(badgeItem))

上面是基本过程
如果想动态操作小圆点的变化，可以灵活的调用下面两个方法

badgeItem.hide();
badgeItem.show();

例如用户读完了消息，就调用badgeItem.hide()隐藏
如果新来了消息,就设置消息的内容，然后显示

badgeItem.setText("5");
badgeItem.show();

badgeItem.hide()方法必须在initialise()方法之后调用，即必须导航栏创建完，才可以调用该方法。
####完整的例子
xml

<com.ashokvarma.bottomnavigation.BottomNavigationBar
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
/>

java

public class HomeActivity extends AppCompatActivity {
private BottomNavigationBar bottomNavigationBar;
private BadgeItem badgeItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
initView();
}
public void initView()
{
badgeItem=new BadgeItem();
badgeItem.setBorderWidth(1)
.setBorderColorResource(R.color.black)
.setBackgroundColorResource(R.color.red)
.setText("4")
.setTextColorResource(R.color.white)
//.setAnimationDuration(1000)
.setGravity(Gravity.RIGHT|Gravity.TOP)
.setHideOnSelect(false);
bottomNavigationBar=(BottomNavigationBar)findViewById(R.id.bottom_bar);
bottomNavigationBar.setMode(BottomNavigationBar.MODE_SHIFTING);
bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
bottomNavigationBar.setBarBackgroundColor(R.color.black);
bottomNavigationBar.setTabSelectedListener(new MyTabSetectedListener());
//在BottomNavigationItem调用setBadgeItem把BadgeItem对象传入，每一个条目都可以设置自己的BadgeItem
//如果为多个条目设置BadgeItem，就要创建多个BadgeItem对象
bottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_index_selected,"首页").setInactiveIconResource(R.drawable.ic_home_tab_index_normal).setBadgeItem(badgeItem))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_near_selected,"附近").setInactiveIconResource(R.drawable.ic_home_tab_near_normal).setActiveColor(Color.BLUE).setInActiveColor(Color.BLACK))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_my_selected,"我的").setInactiveIconResource(R.drawable.ic_home_tab_my_normal))
.addItem(new BottomNavigationItem(R.drawable.ic_home_tab_more_selected,"更多").setInactiveIconResource(R.drawable.ic_home_tab_more_normal))
.setActiveColor(R.color.bottom_selected)
.setInActiveColor(R.color.bottom_unselected)
.setFirstSelectedPosition(0)
.initialise();
badgeItem.hide();
}
public class MyTabSetectedListener implements BottomNavigationBar.OnTabSelectedListener
{
@Override
public void onTabReselected(int position) {

    }

    @Override
    public void onTabSelected(int position) {
        if(position==0)
        {
            badgeItem.hide();
        }
        else
        {
            badgeItem.setText("5");
            badgeItem.show();
        }
    }

    @Override
    public void onTabUnselected(int position) {

    }
}

}