如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果

BottomNavigationView.jpeg

引言

  之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果，总是繁琐地还需要写ViewPager的适配器类，显得很是不优雅！今天就来使用现今app开发项目中最常用的BottomNavigationView来实现底部导航栏+fragment切换效果。话不多说，快@你的小伙伴一起来学习吧！

---

效果预览

NavigationView.gif

---

用法

第一步：布局文件

第二步：新建Fragment+其Layout布局文件

HomeFragment
WeChatFragment
ProjectFragment
SystemFragment
SettingFragment，不做多余操作，加载各自的布局文件即可。

示例：首页。其他的页面也是在布局中添加一个TextView用于显示界面的区别。

第三步：新建menu资源文件夹，并新建布局文件

bottom_navigate_main.xml

R.drawable.select_bottom_nac_home选择器布局文件

Values.xml文件中添加如下字段

首页
消息
项目
系统
设置

第四步：在Activity中书写逻辑代码

public class MainActivity extends AppCompatActivity {

    private Fragment[] mFragments = new Fragment[5];
    private BottomNavigationView mBottomNav;
    private int mPreFragmentFlag = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initFragment();
        selectFragment();
    }

    private void initView() {
        mBottomNav = findViewById(R.id.mBottomNav);

    }

    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();

    }

    private void selectFragment() {
        //注册监听事件
        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();

    }
}

大功告成！

图示

底部导航栏.jpeg