一眼看懂底部导航栏BottomNavigationView

效果图
这种底部导航栏实现思路比较清晰简单,大致的思路都在代码注释中说明了.比较值得注意的有menu文件、滑动过程处理、滑动监听,其他的都和一般的导航栏差不多

1.引入依赖

    implementation 'com.android.support:design:25.0.0'

2.布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewpager"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v4.view.ViewPager>


    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        style="@style/BadgeText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="#3a6eb3"
        app:itemTextColor="#3a4069"
        app:menu="@menu/bottom" />


</LinearLayout>

2.1 menu文件，用于初始化导航栏图标id等

创建文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/device_manager"
        android:icon="@drawable/device_manager"
        android:title="设备管理"
        android:visible="false" />
    <item
        android:id="@+id/set_rule"
        android:icon="@drawable/set_rule"
        android:title="规则设定" />
    <item
        android:id="@+id/device_control"
        android:icon="@drawable/device_control"
        android:title="设备控制" />

    <item
        android:id="@+id/personal_manager"
        android:icon="@drawable/personal_manager"
        android:title="人员管理" />

    <item
        android:id="@+id/more"
        android:icon="@drawable/more"
        android:title="其他设置" />

</menu>

3.函数中代码

3.1 数据域

    /**
     * 底部导航栏
     */
    private ViewPager viewPager;
    private BottomNavigationView bottomNavigationView;
    private FragmentPagerAdapter mPagerAdapter;

3.2 调用函数

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

        initView();
    }

3.3 初始化View

1.两个初始化和两个监听
2.初始化碎片以及适配器
3.设置适配器

private void initView() {
    private void initView() {
        /**
         * 初始化底部导航栏
         */
        bottomNavigationView = findViewById(R.id.navigation);
        //设置导航切换监听
        bottomNavigationView.setOnNavigationItemSelectedListener(changeFragment);
        /**
         * viewpager初始化
         */
        viewPager = findViewById(R.id.main_viewpager);
        /**
         * ViewPager的监听
         */
        setViewPagerListener();
        /**
         * fragment相关
         */
        initFragment();

        viewPager.setAdapter(mPagerAdapter);   //设置适配器
        viewPager.setOffscreenPageLimit(5); //预加载所有页
    }

3.4 完整代码

    /**
     * 底部导航栏
     */
    private ViewPager viewPager;
    private BottomNavigationView bottomNavigationView;
    private FragmentPagerAdapter mPagerAdapter;

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

        initView();
    }


    private void initView() {
        /**
         * 初始化底部导航栏
         */
        bottomNavigationView = findViewById(R.id.navigation);
        //设置导航切换监听
        bottomNavigationView.setOnNavigationItemSelectedListener(changeFragment);
        /**
         * viewpager初始化
         */
        viewPager = findViewById(R.id.main_viewpager);
        /**
         * ViewPager的监听
         */
        setViewPagerListener();
        /**
         * fragment相关
         */
        initFragment();

        viewPager.setAdapter(mPagerAdapter);   //设置适配器
        viewPager.setOffscreenPageLimit(5); //预加载所有页
    }

    private void initFragment() {
        //底部导航栏有几项就有几个Fragment
        final ArrayList<Fragment> fgLists = new ArrayList<>(5);
        fgLists.add(new GateListFragment());
        fgLists.add(new RuleSettingFragment());
        fgLists.add(new DeviceControlFragment());
        fgLists.add(new PersonalManagementFragment());
        fgLists.add(new MoreFragment());


        //设置适配器用于装载Fragment,ViewPager的好朋友
        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fgLists.get(position);  //得到Fragment
            }

            @Override
            public int getCount() {
                return fgLists.size();  //得到数量
            }
        };
    }
    
	//这里有3中滑动过程,我们用点击后就可以
    private void setViewPagerListener() {
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //滑动页面后做的事，这里与BottomNavigationView结合，使其与正确page对应
                bottomNavigationView.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }


    //判断选择的菜单,点击哪个就设置到对应的Fragment
    private BottomNavigationView.OnNavigationItemSelectedListener changeFragment = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.device_manager: {
                    viewPager.setCurrentItem(0);
                    return true;
                }
                case R.id.set_rule: {
                    viewPager.setCurrentItem(1);
                    return true;
                }
                case R.id.device_control: {
                    viewPager.setCurrentItem(2);
                    return true;
                }
                case R.id.personal_manager: {
                    viewPager.setCurrentItem(3);
                    return true;
                }
                case R.id.more: {
                    viewPager.setCurrentItem(4);
                    return true;
                }
            }
            return false;
        }
    };

感谢阅读！如有不合理之处还望指出,谢谢！
侵删