在 Android 的 navBottom 中添加 viewPager

简介

在 Android 应用中，使用底部导航栏(navBottom)能够方便用户快速切换不同页面，而 viewPager 则能够让用户在当前页面内进行滑动切换。将 navBottom 和 viewPager 结合使用，能够为用户提供更加流畅的使用体验。

实现步骤

在实现过程中，我们需要进行以下几步：

1. 创建 Activity 和布局文件；
2. 在布局文件中添加 navBottom 和 viewPager；
3. 创建 Fragment 和对应布局文件；
4. 将 Fragment 添加到 viewPager 中；
5. 在 Activity 中为 navBottom 设置监听器，实现切换页面的功能。

1. 创建 Activity 和布局文件

我们首先需要创建一个 Activity，这个 Activity 将会包含我们的 navBottom 和 viewPager。在这个 Activity 中，我们需要添加 onCreate() 方法，并将布局文件加载进来。

public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

2. 在布局文件中添加 navBottom 和 viewPager

在布局文件中，我们需要使用 com.google.android.material.bottomnavigation.BottomNavigationView 来实现 navBottom，使用 androidx.viewpager.widget.ViewPager 来实现 viewPager。以下是一个示例布局文件：

<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/main_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        layout="@layout/layout_top_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/nav_bottom"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/nav_bottom"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/layout_top_bar" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_bottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:itemIconTint="@color/nav_icon_color"
        app:itemTextColor="@color/nav_text_color"
        app:labelVisibilityMode="unlabeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu_nav_bottom" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. 创建 Fragment 和对应布局文件

为了被添加到 viewPager 中，我们需要创建 Fragment。我们需要至少创建 3 个 Fragment，每个 Fragment 对应 navBottom 上的一个 item。

public class Fragment1 extends Fragment {

  public Fragment1() {
    // Required empty public constructor
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
                           Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment1, container, false);
  }
}

4. 将 Fragment 添加到 viewPager 中

我们需要使用 androidx.viewpager.widget.PagerAdapter 将三个 Fragment 分别添加到 viewPager 中。以下是一个示例 PagerAdapter：

public class MyPagerAdapter extends PagerAdapter {

  private final List<Fragment> mFragmentList;

  public MyPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
    mFragmentList = fragmentList;
  }

  @NonNull
  @Override
  public Object instantiateItem(@NonNull ViewGroup container, int position) {
    // Return a Fragment from the fragment list.
    return super.instantiateItem(container, position);
  }

  @Override
  public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
    super.destroyItem(container, position, object);
  }

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

  @Override
  public int getCount() {
    return mFragmentList.size();
  }

  @Override
  public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
    return view == object;
  }
}

在 Activity 的 onCreate() 方法中设置 PagerAdapter：

List<Fragment> fragmentList = new ArrayList<>();
fragmentList.add(new Fragment1());
fragmentList.add(new Fragment2());
fragmentList.add(new Fragment3());

viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), fragmentList));

5. 为 navBottom 设置监听器

最后一步，我们需要为 navBottom 设置监听器，在监听器中实现切换 viewPager 页面的功能。

navBottom.setOnNavigationItemSelectedListener((item) -> {
  int itemId = item.getItemId();
  if (itemId == R.id.nav_item1) {
    viewPager.setCurrentItem(0);
    return true;
  } else if (itemId == R.id.nav_item2) {
    viewPager.setCurrentItem(1);
    return true;
  } else if (itemId == R.id.nav_item3) {
    viewPager.setCurrentItem(2);
    return true;
  }
  return false;
});

以上就是在 Android 中使用 navBottom 和 viewPager 的全部步骤。

结语

使用 navBottom 和 viewPager 能够为 Android 应用提供更加友好的用户界面，在实现过程中注意细节，即可为用户提供更好的使用体验。