安卓开发使用viewPager+bottomNavigation+fragment创建翻页的demo

本demo系列博客只提供代码，便于直接使用
此bottom navigation来自于material design的组件
material design组件库
官网对于每个组件的用法都有详细描述

不再描述原理，直接上代码：
关于xml和java文件中的所有变量都需要进行自定义，以下每份代码都属于不同的文件

• 包含bottom navigation 和viewPager的xml：

<androidx.viewpager.widget.ViewPager
        android:id="@+id/pager_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </androidx.viewpager.widget.ViewPager>
    
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tabHgt"
        style="@style/Widget.MaterialComponents.BottomNavigationView.Colored"
        app:itemTextColor="@drawable/bottom_navigation_colors"
        app:menu="@menu/navigate_menu"/>//自定义res/menu/文件

• 显示bottom navigation的navigate_menu.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/navi_pick"
        android:title="@string/tab_pick"/>
    <item android:id="@+id/navi_create"
        android:title="@string/tab_create"/>
    <item android:id="@+id/navi_mine"
        android:title="@string/tab_mine"/>
</menu>

• 需要编写对应数量的fragment页面，和普通的layout xml一样，不再提供
• 还需要编写对应数量的继承Fragment的.java文件

View rootView;
//在onCreateView方法中加入以下内容，使用rootView是为了防止多次加载
if(rootView==null){
            System.out.println("rootview=null");
            rootView=inflater.inflate(R.layout.creation_fragment,container,false);
        }else{
            System.out.println("rootview!=null");
            ViewGroup parent=(ViewGroup) rootView.getParent();
            if(parent!=null){
                parent.removeView(rootView);
            }
        }
        return rootView;//一定要返回，不要使用默认的返回值

• 将viewPager、navigation和fragment联系在一起的java文件：

//定义变量
ViewPager pager;
BottomNavigationView bottomNavigation;
List<Fragment> fragmentList;

//在onCreate函数中初始化变量
pager=findViewById(R.id.pager_view);
bottomNavigation=findViewById(R.id.navigation_view);
initFragments();
initPager();
initBotNavView();

//初始化fragment列表
    private void initFragments(){
    //以下的fragment数量和名称按照实际情况更改
        fragmentList= new ArrayList<>(3);
        fragmentList.add(new Fragment1());
        fragmentList.add(new Fragment2());
        fragmentList.add(new Fragment3());
    }
    
//初始化viewPager，需要使用自定义的adapter来和fragment创造联系，使用addOnPageChangeListener来触发navigation的变化（适用在直接滑动页面的时候改变导航栏）
private class CusPagerAdapter extends FragmentPagerAdapter{
        public CusPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragmentList.get(position);
        }

        @Override
        public int getCount() {
            return fragmentList.size();
        }
    }
    
 private void initPager(){
        pager.setAdapter(new CusPagerAdapter(getSupportFragmentManager()));//不要忘了这里
        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //set bottom navigation to correctly respond to view pager
                bottomNavigation.getMenu().getItem(position).setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

//使navigation改变的时候可以触发viewPager的变化
void initBotNavView(){
        bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()){
                    case R.id.navi_pick:
                        pager.setCurrentItem(0);
                        return true;
                    case R.id.navi_create:
                        pager.setCurrentItem(1);
                        return true;
                    case R.id.navi_mine:
                        pager.setCurrentItem(2);
                        return true;
                }
                return false;
            }
        });
    }