Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > BottomNavigationView 底部导航栏

BottomNavigationView ViewPager2 Fragment底部菜单导航栏

作者:九狼

这篇文章主要为大家介绍了BottomNavigationView ViewPager2 Fragment底部菜单导航栏实现效果详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

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

效果图

<?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;
    }
}

以上就是BottomNavigationView ViewPager2 Fragment底部菜单导航栏的详细内容,更多关于BottomNavigationView 底部菜单导航栏的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文