ViewPager2 + TabLayout + BottomNavigationView 实战教程

使用 ViewPager2 + TabLayout + BottomNavigationView 创建现代 Android 应用程序

先决条件

踏上使用 ViewPager2 + TabLayout + BottomNavigationView 构建现代 Android 应用程序的旅程之前，让我们确保已做好充分准备：

• 对 Android 开发基础知识了如指掌
• Android Studio 已在您的计算机上安营扎寨
• Android 设备或 Android 模拟器已准备就绪，等待应用程序降临

布局文件

首先，让我们从一个新的 Android 项目开始。在 Android Studio 中，点击“文件”>“新建”>“项目”。在“新建 Android 项目”对话窗口中，选择“空活动”模板，然后点击“下一步”。在“活动名称”栏中，输入“MainActivity”。在“包名称”栏中，输入您的包名称。然后点击“完成”。

现在，让我们打开 activity_main.xml 布局文件，为 ViewPager2、TabLayout 和 BottomNavigationView 腾出空间：

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java 代码

让我们用 Java 代码填充 MainActivity.java 文件，为 ViewPager2 添加一个适配器，为 TabLayout 设置一个调节器，并为 BottomNavigationView 分配一个侦听器：

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager2;
    private TabLayout tabLayout;
    private BottomNavigationView bottomNavigationView;

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

        viewPager2 = findViewById(R.id.view_pager2);
        tabLayout = findViewById(R.id.tab_layout);
        bottomNavigationView = findViewById(R.id.bottom_navigation_view);

        // 为 ViewPager2 创建适配器
        ViewPager2Adapter adapter = new ViewPager2Adapter(this);
        viewPager2.setAdapter(adapter);

        // 为 ViewPager2 和 TabLayout 创建一个 TabLayoutMediator
        TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                switch (position) {
                    case 0:
                        tab.setText("主页");
                        break;
                    case 1:
                        tab.setText("设置");
                        break;
                    case 2:
                        tab.setText("个人资料");
                        break;
                }
            }
        });
        tabLayoutMediator.attach();

        // 为 BottomNavigationView 设置侦听器
        bottomNavigationView.setOnItemSelectedListener(new BottomNavigationView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.home:
                        viewPager2.setCurrentItem(0);
                        break;
                    case R.id.settings:
                        viewPager2.setCurrentItem(1);
                        break;
                    case R.id.profile:
                        viewPager2.setCurrentItem(2);
                        break;
                }
                return true;
            }
        });
    }
}

使用

现在，准备好启动您的应用程序并探索它的魔力！您应该能够在 ViewPager2 中顺畅地滑动页面，在 TabLayout 中切换选项卡，以及在 BottomNavigationView 中选择选项。

常见问题解答

1. ViewPager2 与 ViewPager 有什么区别？

ViewPager2 是 ViewPager 的改进版本，具有左右滑动支持和增强的内存管理等新功能。

2. 如何添加片段到 ViewPager2？

您可以使用 FragmentPagerAdapter 或 FragmentStateAdapter 将片段添加到 ViewPager2 中。

3. 如何对 TabLayout 进行自定义？

您可以通过设置自定义 TabView 或使用自定义 TabLayoutMediator 来对 TabLayout 进行自定义。

4. 如何在 BottomNavigationView 中禁用某些选项卡？

您可以通过设置 MenuItem 的 setEnabled(false) 方法来禁用 BottomNavigationView 中的某些选项卡。

5. 如何在我的应用程序中使用 ViewPager2 + TabLayout + BottomNavigationView？

按照本教程中的步骤操作，您就可以将 ViewPager2 + TabLayout + BottomNavigationView 集成到您的 Android 应用程序中。

结论

掌握了 ViewPager2 + TabLayout + BottomNavigationView 的精髓，您现在可以轻松构建现代、用户友好的 Android 应用程序。这些组件提供了丰富的功能，让您能够创建流畅、直观且极具吸引力的用户界面。继续探索这些组件的潜力，打造令人惊叹的应用程序，让您的用户流连忘返。