Android底部导航栏BottomNavigationBar使用方法

官方的support design包中其实也有底部导航栏的控件叫BottomNavigationView,但是很不爽的地方就是当底部导航栏的item个数大于4个的时候会自动的改变显示模式,隐藏了文字,相比之下,下面的导航栏就没有这个问题,而且还有一些官方没有的功能,比如徽章。

目前github上的版本更新到了2.02版本,使用上没什么太大的变化,下面是地址

https://github.com/Ashok-Varma/BottomNavigation


1.使用BottomNavigationBar首先要先添加依赖,更改为最新的版本即可
compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0’

2.接下来是布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.example.yzq.csdn_bottomnav.MainActivity">


    <!--内容区域-->
    <LinearLayout
        android:id="@+id/bottom_nav_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


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


    </com.ashokvarma.bottomnavigation.BottomNavigationBar>


</android.support.design.widget.CoordinatorLayout>

布局很简单,就是一个内容区域和一个底部的导航栏。
内容区域只是用来显示不同的fragment

3.接下来转到MainActivity中
先设置BottomNavigationBar的样式和添加选项

默认有3种样式,通过对setMode和setBackgroundStyle的进行不同的组合会有不同的效果,感兴趣的可以自己尝试。

  bottom_navigation_bar_container.setAutoHideEnabled(true);//自动隐藏

        //BottomNavigationBar.MODE_SHIFTING;
        //BottomNavigationBar.MODE_FIXED;
        //BottomNavigationBar.MODE_DEFAULT;
        bottom_navigation_bar_container.setMode(BottomNavigationBar.MODE_FIXED);

        // BottomNavigationBar.BACKGROUND_STYLE_DEFAULT;
        // BottomNavigationBar.BACKGROUND_STYLE_RIPPLE
        // BottomNavigationBar.BACKGROUND_STYLE_STATIC
        bottom_navigation_bar_container.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);


        bottom_navigation_bar_container.setBarBackgroundColor(R.color.white);//背景颜色
        bottom_navigation_bar_container.setInActiveColor(R.color.nav_gray);//未选中时的颜色
        bottom_navigation_bar_container.setActiveColor(R.color.colorPrimaryDark);//选中时的颜色

我们还可以设置角标
badgeItem = new BadgeItem().setBackgroundColor(Color.RED).setText(“99”).setHideOnSelect(true);//角标

接下来创建选项

msgItem = new BottomNavigationItem(R.drawable.msg, "消息");
        msgItem.setBadgeItem(badgeItem);
        taskItem = new BottomNavigationItem(R.drawable.task, "任务");
        noticeItem = new BottomNavigationItem(R.drawable.notice, "公告");

然后将选项添加并初始化,设置监听
bottom_navigation_bar_container.addItem(msgItem).addItem(taskItem).addItem(noticeItem);
bottom_navigation_bar_container.initialise();
bottom_navigation_bar_container.setTabSelectedListener(this);

这样 底部导航栏就出来啦

4.接下来就是对监听做处理 选择选项时显示相应的fragment

/*底部NaV监听*/
    @Override
    public void onTabSelected(int position) {
        hideAllFrag();//先隐藏所有frag
        switch (position) {
            case 0:
                if (msgFrag == null) {
                    msgFrag = new MsgFragment();
                }
                addFrag(msgFrag);
                getSupportFragmentManager().beginTransaction().show(msgFrag).commit();
                getSupportActionBar().setTitle("消息");

                break;
            case 1:
                if (taskFrag == null) {

                    taskFrag = new TaskFragment();
                }

                addFrag(taskFrag);
                getSupportFragmentManager().beginTransaction().show(taskFrag).commit();
                getSupportActionBar().setTitle("任务");

                break;
            case 2:
               /*公告Frag*/
                if (noticeFrag == null) {
                    noticeFrag = new NoticeFragment();

                }
                addFrag(noticeFrag);
                getSupportFragmentManager().beginTransaction().show(noticeFrag).commit();
                getSupportActionBar().setTitle("公告");
                break;
        }

    }

大功告成!这样一个漂亮的底部导航就完成了,很简单吧。效果图如下
效果图
下面是写的一个小demo
底部导航栏Demo

需要Flutter底部导航栏的可以看 Flutter底部导航栏使用方法 这篇文章

©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值