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