1.github地址

https://github.com/zhouxu88/BottomNavigationBar

2.基本使用

2,1添加依赖

implementation 'com.ashokvarma.android:bottom-navigation-bar:2.0.5'

2.2布局中使用

 <com.ashokvarma.bottomnavigation.BottomNavigationBar

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:id="@+id/bottom_nav_bar"

        android:layout_alignParentBottom="true"

        ></com.ashokvarma.bottomnavigation.BottomNavigationBar>

2.3代码中设置

        /**

         * 导航基础设置 包括按钮选中效果 导航栏背景色等

         */

        bottomNavigationBar.setTabSelectedListener(this)

                .setMode(BottomNavigationBar.MODE_FIXED)

                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)

                .setActiveColor("#ffffff")//选中颜色

                .setInActiveColor("#2B2B2B")//未选中颜色

                .setBarBackgroundColor("#EDC18E");//导航栏背景色

        badgeItem = new TextBadgeItem()

                .setBorderWidth(2)

                .setTextColor(Color.BLACK)

                .setBackgroundColor(Color.RED)

                .setText("99");

         /**

         *添加导航按钮

         */

        bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首页"))

                .addItem(new BottomNavigationItem(R.mipmap.setting,"设置"))

                .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))

                .addItem(new BottomNavigationItem(R.mipmap.person,"个人").setBadgeItem(badgeItem))//添加小红点数据

                .initialise();//initialise 一定要放在 所有设置的最后一项

2.4添加监听

bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener() {//这里也可以使用SimpleOnTabSelectedListener

         @Override

         public void onTabSelected(int position) {//未选中 -> 选中

         }

         @Override

         public void onTabUnselected(int position) {//选中 -> 未选中

         }

         @Override

         public void onTabReselected(int position) {//选中 -> 选中

         }

     });

3.知识点，用法说明。

3.1设置导航栏模式：setMode（）

setMode() 内的参数有三种模式类型：

     MODE_DEFAULT 自动模式：导航栏Item的个数<=3 用 MODE_FIXED 模式，否则用 MODE_SHIFTING 模式

     MODE_FIXED 固定模式：未选中的Item显示文字，无切换动画效果。

     MODE_SHIFTING 切换模式：未选中的Item不显示文字，选中的显示文字，有切换动画效果。

3.2设置导航栏背景模式：setBackgroundStyle（）

setBackgroundStyle() 内的参数有三种样式

   BACKGROUND_STYLE_DEFAULT: 默认样式 如果设置的Mode为MODE_FIXED，将使用BACKGROUND_STYLE_STATIC，如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。

   BACKGROUND_STYLE_STATIC: 静态样式 点击无波纹效果，航条的背景色是白色，加上setBarBackgroundColor（）可以设置成你所需要的任何背景颜色

   BACKGROUND_STYLE_RIPPLE: 波纹样式 点击有波纹效果，导航条的背景色是你设置的处于选中状态的 Item的颜色（ActiveColor），也就是setActiveColorResource这个设置的颜色

3.3设置默认颜色

bottomNavigationBar

              .setActiveColor("#ff0000") //设置选中的颜色

              .setInActiveColor("#FFFFFF")//设置选中的颜色

              .setBarBackgroundColor("#000000");//设置bar背景

in-active color:

表示未选中Item中的图标和文本颜色。默认为 Color.LTGRAY

active color :

在BACKGROUND_STYLE_STATIC下，表示选中Item的图标和文本颜色。而在BACKGROUND_STYLE_RIPPLE下，表示整个容器的背景色。默认Theme's Primary Color

background color :

在BACKGROUND_STYLE_STATIC下，表示整个容器的背景色。而在BACKGROUND_STYLE_RIPPLE下，表示选中Item的图标和文本颜色。默认 Color.WHITE

3.4定制Item的选中未选中颜色

//设置Item未选中颜色方法

new BottomNavigationItem().setInActiveColorResource(R.color.white)) 或者

new BottomNavigationItem().setInActiveColor()

//设置Item选中颜色方法

new BottomNavigationItem().setActiveColorResource()或者

new BottomNavigationItem().setActiveColor()

3.5Icon的定制

如果使用颜色的变化不足以展示一个选项Item的选中与非选中状态，可以使用BottomNavigationItem.setInActiveIcon()方法来设置。

 .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))

3.6手动隐藏与显示

bottomNavigationBar.hide();//隐藏

bottomNavigationBar.hide(true);//隐藏是否启动动画，这里并不能自定义动画

bottomNavigationBar.unHide();//显示

bottomNavigationBar.hide(true);//隐藏是否启动动画，这里并不能自定义动画

3.7为Item添加Badge，一般用作消息提醒的

badgeItem = new TextBadgeItem()

                .setBorderWidth(2)//Badge的Border(边界)宽度

                .setBorderColor(Color.BLUE)//Badge的Border颜色

                .setBackgroundColor(Color.RED)

                .setTextColor(Color.BLACK)//文本颜色

                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默认右上角

                .setAnimationDuration(2000)

                .setHideOnSelect(true)//当选中状态时消失，非选中状态显示

                .setText("99");

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

4案例

public class MainActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {

    private BottomNavigationBar bottomNavigationBar;

    private HomeFragment homeFragment;

    private PersonFragment personFragment;

    private SettingFragment settingFragment;

    private MenuFragment menuFragment;

    private FragmentManager fm;

    private TextBadgeItem badgeItem;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        bottomNavigationBar=findViewById(R.id.bottom_nav_bar);

        fm=getFragmentManager();

        initBottomBar();

    }

    private void initBottomBar() {

        /**

         * 导航基础设置 包括按钮选中效果 导航栏背景色等

         */

        bottomNavigationBar.setTabSelectedListener(this)

                .setMode(BottomNavigationBar.MODE_FIXED)

                .setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC)

                .setActiveColor("#ffffff")//选中颜色

                .setInActiveColor("#2B2B2B")//未选中颜色

                .setBarBackgroundColor("#EDC18E");//导航栏背景色

        badgeItem = new TextBadgeItem()

                .setBorderWidth(2)//Badge的Border(边界)宽度

                .setBorderColor(Color.BLUE)//Badge的Border颜色

                .setBackgroundColor(Color.RED)

                .setTextColor(Color.BLACK)//文本颜色

                .setGravity(Gravity.RIGHT| Gravity.TOP)//位置，默认右上角

                .setAnimationDuration(2000)

                .setHideOnSelect(true)//当选中状态时消失，非选中状态显示

                .setText("99");

         /**

         *添加导航按钮

         */

        bottomNavigationBar.addItem(new BottomNavigationItem(R.mipmap.home,"首页"))

                .addItem(new BottomNavigationItem(R.mipmap.setting,"设置"))

                .addItem(new BottomNavigationItem(R.mipmap.menu,"菜单").setInActiveColor("#ffff00"))

                .addItem(new BottomNavigationItem(R.mipmap.person,"个人").setBadgeItem(badgeItem))//添加小红点数据

                .initialise();//initialise 一定要放在 所有设置的最后一项

        //设置默认导航栏

        homeFragment=HomeFragment.newInstance("首页");

        fm.beginTransaction().replace(R.id.fl,homeFragment).commit();

    }

    /**

     * 设置选中逻辑

     */

    @Override

    public void onTabSelected(int position) {

        FragmentTransaction transaction = fm.beginTransaction();

        switch (position){

            case 0:

                if(homeFragment==null){

                    homeFragment=new HomeFragment();

                }

                transaction.replace(R.id.fl,homeFragment);

                break;

            case 1:

                if(settingFragment==null){

                    settingFragment=new SettingFragment();

                }

                transaction.replace(R.id.fl,settingFragment);

                break;

            case 2:

                if(menuFragment==null){

                    menuFragment=new MenuFragment();

                }

                badgeItem.setText("4");

                transaction.replace(R.id.fl,menuFragment);

                break;

            case 3:

                if(personFragment==null){

                    personFragment=new PersonFragment();

                }

                transaction.replace(R.id.fl,personFragment);

                break;

            default:

                break;

        }

        transaction.commit();

    }

    /**

     * 设置未选中逻辑

     */

    @Override

    public void onTabUnselected(int position) {

    }

    /**

     * 设置释放逻辑

     */

    @Override

    public void onTabReselected(int position) {

    }

}

参考：

1.Android底部导航 BottomNavigationBar（Google官方）

2.BottomNavigationBar使用详解

3.安卓 BottomNavigationBar 底部导航栏最简单用法详解

秒客网

底部导航栏使用BottomNavigationBar

1.github地址

2.基本使用

2,1添加依赖

2.2布局中使用

2.3代码中设置

2.4添加监听

3.知识点，用法说明。

3.1设置导航栏模式：setMode（）

3.2设置导航栏背景模式：setBackgroundStyle（）

3.3设置默认颜色

3.4定制Item的选中未选中颜色

3.5Icon的定制

3.6手动隐藏与显示

3.7为Item添加Badge，一般用作消息提醒的

4案例

相关文章