Android-BottomNavigationView+Fragment实现底部菜单栏

热门标签

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

简介

  • 显示的效果
    Android-BottomNavigationView+Fragment实现底部菜单栏

布局实现

  1. BottomNavigationView的引入

BottomNavigationView是属于design包下的,在app的build.gradle中引入依赖

implementation 'com.android.support:design:28.0.0'
  1. 引入BottomNavigationView到布局中,配置其属性
   <android.support.design.widget.BottomNavigationView
           android:id="@+id/mBottomNav"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_alignParentBottom="true"
           android:clickable="true"
           android:focusable="true"
           app:itemBackground="@color/bottomNavBackground"
           app:itemTextColor="@drawable/select_bottom_nav_text"
           app:labelVisibilityMode="labeled"
           app:menu="@menu/bottom_navigate_main"
       />
  1. 底部栏菜单的实现

在BottomNavigationView中我们引入了app:menu的属性,其对应的菜单栏资源文件就是底部要显示的底部栏。

  • 在资源文件下新建一个menu资源文件夹,里面新建一个资源文件
  <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/home"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_home"
        android:title="@string/bottom_item_home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/wechat"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_wechat"
        android:title="@string/bottom_item_wechat"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/project"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_project"
        android:title="@string/bottom_item_project"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/system"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_system"
        android:title="@string/bottom_item_system"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/setting"
        android:enabled="true"
        android:icon="@drawable/select_bottom_nac_setting"
        android:title="@string/bottom_item_setting"
        app:showAsAction="ifRoom" />

</menu>
  • 这就是一个常规的菜单栏资源文件,需要必须为每一个item配置一个id和title,其中android:icon 属性是我们制定一个的一个选择器,要来加载不同状态下的图片文件。下面我们来看icon对应的资源文件这里就拿主页对应的来说。
  <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    //当菜单栏被选中时提供的图片
    <item android:drawable="@drawable/icon_home_slected" android:state_checked="true" />
    //当菜单栏没有被选中时,提供的图片。
    <item android:drawable="@drawable/icon_home_unslected" android:state_checked="false" />
</selector>

到这里我们关于BottomNavigationView的引入和属性的配置就完毕,接下来就看代码实现的部分

Java代码实现

  1. 初始化Fragment和加载Fragment
  • 这里面我们新建了5个Fragment,并加载第一个Fragment
  private void initFragment() {

        mFragments[0] = new HomeFragment();
        mFragments[1] = new WeChatFragment();
        mFragments[2] = new ProjectFragment();
        mFragments[3] = new SystemFragment();
        mFragments[4] = new SettingFragment();
        initLoadFragment(R.id.mContainerView, 0, mFragments);
    }
    // 参数一 是一个FrameLayout的ID,用来动态加载Fragment,
    private void initLoadFragment(int containerId, int showFragment, Fragment... fragments) {
        //获取到FragmentManager实例的同时去开启事物
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        for (int i = 0; i < fragments.length; i++) {
            //首先将Fragment添加到事务中
            transaction.add(containerId, fragments[i], fragments[i].getClass().getName());
            //默认展示 fragments[showFragment]
            //这里做首次Fragment的展示,如果不是指定的Fragment就先隐藏,需要的时候再显示出来
            if (i != showFragment)
                transaction.hide(fragments[i]);
        }
        //提交事物
        transaction.commitAllowingStateLoss();

    }
  1. 切换状态栏加载不同的Fragment

但BottomNavigationView点击切换不同的菜单栏的时候,可以为其注册监听事件,根据监听事件去加载不同的Fagment

  //注册监听事件
  mBottomNav.setItemIconTintList(null);
        mBottomNav.setOnNavigationItemSelectedListener(menuItem -> {
            switch (menuItem.getItemId()) {
                case R.id.home:
                    showAndHideFragment(mFragments[0], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 0;
                    break;
                case R.id.wechat:
                    showAndHideFragment(mFragments[1], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 1;
                    break;
                case R.id.project:
                    showAndHideFragment(mFragments[2], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 2;
                    break;
                case R.id.system:
                    showAndHideFragment(mFragments[3], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 3;
                    break;
                case R.id.setting:
                    showAndHideFragment(mFragments[4], mFragments[mPreFragmentFlag]);
                    mPreFragmentFlag = 4;
                    break;
            }
            return true;
        });  
  //加载不同的Fragment
  private void showAndHideFragment(Fragment show, Fragment hide) {
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        if (show != hide)
            transaction.show(show).hide(hide).commitAllowingStateLoss();

    }

到此一个简单的底部状态就完成了,BottomNavigation配合Fragment实现的。

 

标签:

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术狗|博客
原文地址:《Android-BottomNavigationView+Fragment实现底部菜单栏》 发布于2019-10-14

分享到:
赞(0)

评论 抢沙发

3 + 8 =


Android-BottomNavigationView+Fragment实现底部菜单栏

长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录