BottomNavigationView+ViewPager2+Fragment

2,602 阅读1分钟

底部导航栏是通过BottomNavigationView组件结合[Fragment]实现的有三个按钮的菜单导航栏

效果图

ezgif.com-gif-maker (19).gif

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_black_24dp"
        android:title="@string/title_home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />

</menu>

Activity

viewPager2 = mBinding.viewPager2;
    navView = mBinding.navView;

    viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
    List<Fragment> fragments = new ArrayList<>();

    fragments.add(HomeFragment.newInstance());
    fragments.add(DashboardFragment.newInstance());
    fragments.add(HomeFragment.newInstance());

    viewPager2.setAdapter(new FragmentStateAdapter(this) {
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            Fragment fragment = fragments.get(position);
            return fragment;
        }

        @Override
        public int getItemCount() {
            return fragments.size();
        }
    });
    viewPager2.setOffscreenPageLimit(3);
    viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
        @Override
        public void onPageSelected(int position) {
            super.onPageSelected(position);
            onPagerSelected(position);
        }
    });
  navView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
      @Override
      public boolean onNavigationItemSelected(@NonNull MenuItem item) {
          switch (item.getItemId()){
              case R.id.navigation_home:
                  viewPager2.setCurrentItem(0);
                  break;
              case R.id.navigation_dashboard:

                  viewPager2.setCurrentItem(1);

                  break;
              case R.id.navigation_notifications:
                  viewPager2.setCurrentItem(2);
                  break;

          }
          return true;
      }
  });
}

private void onPagerSelected(int position) {
    switch (position) {
        case 0:
            navView.setSelectedItemId(R.id.navigation_home);
            break;
        case 1:
            navView.setSelectedItemId(R.id.navigation_dashboard);
            break;
        case 2:
            navView.setSelectedItemId(R.id.navigation_notifications);
            break;
    }
}