BottomNavigationBar使用指北

一.简介
　　当下Android项目中，十之八九都采用底部导航栏的样式做导航菜单交互，Google Material Design库中为开发者提供了BottomNavigationBar，此篇将介绍BottomNavigationBar的简单使用指北。

image.png

GitHub:https://github.com/Ashok-Varma/BottomNavigation
添加依赖：
　　compile 'com.ashokvarma.android:bottom-navigation-bar:2.0.5'

二.布局文件添加布局

<android.support.constraint.ConstraintLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <com.ashokvarma.bottomnavigation.BottomNavigationBar
       android:id="@+id/bottomNavigationBar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintBottom_toBottomOf="parent">

   </com.ashokvarma.bottomnavigation.BottomNavigationBar>

</android.support.constraint.ConstraintLayout>

三.在Java代码中添加属性配置

class IndexAty: BaseActivity() {

    override fun getLayoutId(): Int {
        return R.layout.index_aty
    }

    override fun onViewCreate(savedInstanceState: Bundle?) {
        bottomNavigationBar
                .setMode(MODE_FIXED) // 设置mode
                .setBackgroundStyle(BACKGROUND_STYLE_RIPPLE)  // 背景样式
                .setBarBackgroundColor("#2FA8E1") // 背景颜色
                .setInActiveColor("#929292") // 未选中状态颜色
                .setActiveColor("#ffffff") // 选中状态颜色
                .addItem(BottomNavigationItem(R.drawable.message,"消息").setInactiveIconResource(R.drawable.message_no)) // 添加Item
                .addItem(BottomNavigationItem(R.drawable.kaoqing,"考勤").setInactiveIconResource(R.drawable.kaoqing_no))
                .addItem(BottomNavigationItem(R.drawable.job,"工作").setInactiveIconResource(R.drawable.job_no))
                .addItem(BottomNavigationItem(R.drawable.user,"我的").setInactiveIconResource(R.drawable.user_no))
                .setFirstSelectedPosition(0) //设置默认选中位置
                .initialise()  // 提交初始化（完成配置）
    }

}

1. 显示效果以及颜色配置说明

setMode(int mode):　设置点击的动画效果
　　MODE_DEFAULT
　　MODE_FIXED （title不选中也会显示，itemicon效果自己尝试）
　　MODE_SHIFTING （title只有选中才会显示，不选中隐藏，icon效果自己尝试）
　　MODE_FIXED_NO_TITLE （不显示title，icon效果与MODE_FIXED一致）
　　MODE_SHIFTING_NO_TITLE （不显示title，icon效果与MODE_SHIFTING一致）
setBackgroundStyle(int style): 背景点击样式
　　BACKGROUND_STYLE_DEFAULT
　　BACKGROUND_STYLE_STATIC（普通点击效果）
　　BACKGROUND_STYLE_RIPPLE（点击有水波扩散效果）
setBarBackgroundColor()：bar背景颜色，在 BACKGROUND_STYLE_RIPPLE 下为图标和文本被激活或选中的颜色；
setInActiveColor()：item未选中icon、title颜色；
setActiveColor()：item选中icon、title颜色，在BACKGROUND_STYLE_RIPPLE下，为整个控件的背景颜色；

2.添加BottomNavigationItem

BottomNavigationItem(R.drawable.message,"消息") //构造方法设置选中图片及标题
                .setInactiveIconResource(R.drawable.message_no) //设置未选中图片
                .setBadgeItem(TextBadgeItem())  // 设置文字角标
                .setBadgeItem(ShapeBadgeItem()) // 设置图形角标
//              .setActiveColor("#929292")  // 可单独定制选中颜色
//              .setInActiveColor("#ffffff")

2.1 TextBadgeItem,ShapeBadgeItem

TextBadgeItem()
    .setBackgroundColor("#ff0000") 
    .setGravity(Gravity.RIGHT or Gravity.TOP) // 默认为右上角
    .setTextColor("#ffffff")
    .setText("3")
    .setHideOnSelect(true)//true：当选中状态时消失，非选中状态显示,moren false

ShapeBadgeItem()
    .setShape(SHAPE_STAR_5_VERTICES) //形状
    .setShapeColor(Color.BLUE) //颜色
    .setShapeColorResource(R.color.colorAccent) //颜色，资源文件获取
    .setEdgeMarginInDp(this,0) //距离Item的margin，dp
//    .setEdgeMarginInPixels(20) //距离Item的margin，px
    .setSizeInDp(this,20,20) //宽高，dp
//    .setSizeInPixels(5,5) //宽高，px
    .setAnimationDuration(200) //隐藏和展示的动画速度，单位毫秒,和    setHideOnSelect一起使用
//    .setGravity(Gravity.LEFT) //位置，默认右上角
    .setHideOnSelect(true) //true：当选中状态时消失，非选中状态显示,moren false

image.png

三.添加监听

.setTabSelectedListener(object:BottomNavigationBar.OnTabSelectedListener{
                    override fun onTabReselected(position: Int) {
                        //重复选择的item
                    }
                    override fun onTabUnselected(position: Int) {
                       //上一次选中的item
                    }
                    override fun onTabSelected(position: Int) {
                        //当前选中的item
                    }
                })