如何使用 ViewPager 和 Fragments 在 Android 中实现 TabLayout

通过在 Android 中使用 TabLayout，利用 ViewPager 和 Fragments，开发人员可以设计直观且精心规划的用户界面。借助 TabLayout，用户可以轻松浏览应用程序内的多个部分或类别，使其更加用户友好。ViewPager 可在 Fragments 之间实现流畅的滑动，确保无缝的用户体验。通过组合这些组件，开发人员可以创建一个选项卡式布局，其中每个选项卡对应一个特定的 Fragment，显示其独特的内容。

通过使用 ViewPager 和 Fragments 在 Android 中实现 TabLayout，可以简化管理多个 Fragment 和增强应用程序可用性的过程。本指南采用叙述方式来解释如何通过这种方法创建引人入胜且互动的用户界面。

TabLayout

TabLayout 是 Android 中必不可少的 UI 组件，可简化水平排列多个选项卡。它通常与 ViewPager 和 Fragments 一起使用，为用户创建流畅的选项卡式界面。每个选项卡对应屏幕上的特定部分或内容类别，可快速访问应用程序的基本功能。使用 TabLayout，个人可以轻松地在不同的片段或屏幕之间切换，轻松探索各个部分。

TabLayout 提供视觉指示器，例如选项卡指示器和文本标签，以突出显示当前选定的选项卡。与 ViewPager 一起使用时，它还支持在选项卡之间导航的滑动手势。开发人员可以通过指定各种属性(包括选项卡重力、选项卡模式和选项卡文本样式)来自定义 TabLayout 的外观，以匹配其应用程序的设计要求。

方法

使用 ViewPager 和 Fragments 在 Android 中实现 TabLayout 有不同的方法。以下是三种常见方法:

• 使用 FragmentPagerAdapter

• 使用 FragmentStatePagerAdapter

• 使用自定义 FragmentPagerAdapter

使用 FragmentPagerAdapter

此方法涉及创建包含 TabLayout 和 ViewPager 的布局文件。创建 FragmentPagerAdapter 子类，其中覆盖必要的方法(如 getItem() 和 getCount())以根据位置提供适当的片段。在 ViewPager 上设置 FragmentPagerAdapter 实例，并使用 setupWithViewPager() 将 TabLayout 连接到 ViewPager。这种方式适合少量的 fragment。

算法

• 创建一个包含 TabLayout 和 ViewPager 的布局文件。

• 创建一个 FragmentPagerAdapter 子类并重写必要的方法，如 getItem() 和 getCount()。

• 在 FragmentPagerAdapter 的 getItem() 方法中，根据位置返回相应的 fragment 实例。

• 使用 setAdapter() 在 ViewPager 上设置 FragmentPagerAdapter 实例。

• 使用 setupWithViewPager() 将 TabLayout 与 ViewPager 连接起来。

示例

// MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

public class MainActivity extends AppCompatActivity {

   private ViewPager viewPager;
   private TabLayout tabLayout;

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

      viewPager = findViewById(R.id.viewPager);
      tabLayout = findViewById(R.id.tabLayout);

      viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
      tabLayout.setupWithViewPager(viewPager);
   }

   private static class MyPagerAdapter extends FragmentPagerAdapter {

      MyPagerAdapter(FragmentManager fm) {
         super(fm);
      }

      @Override
      public Fragment getItem(int position) {
         switch (position) {
            case 0:
               return new FragmentOne();
            case 1:
               return new FragmentTwo();
            case 2:
               return new FragmentThree();
            default:
               return null;
         }
      }

      @Override
      public int getCount() {
         return 3;
      }

      @Override
      public CharSequence getPageTitle(int position) {
         switch (position) {
            case 0:
               return "Tab 1";
            case 1:
               return "Tab 2";
            case 2:
               return "Tab 3";
            default:
               return null;
         }
      }
   }
}

// FragmentOne.java, FragmentTwo.java, FragmentThree.java are 
simple fragment classes.

// activity_main.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">

   <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabMode="fixed" />

   <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1" />

</LinearLayout>

输出

使用 FragmentStatePagerAdapter

与上一种方法类似，创建一个包含 TabLayout 和 ViewPager 的布局文件。但是，使用 FragmentStatePagerAdapter 代替 FragmentPagerAdapter。FragmentStatePagerAdapter 对于管理大量片段或内存密集型内容更有效，因为它会根据需要销毁并重新创建片段。

算法

• 按照与上述相同的步骤操作，但使用 FragmentStatePagerAdapter 代替 FragmentPagerAdapter。

• FragmentStatePagerAdapter 适用于处理大量片段或内存密集型内容。

Program

// MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

   private ViewPager viewPager;
   private TabLayout tabLayout;

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

      viewPager = findViewById(R.id.viewPager);
      tabLayout = findViewById(R.id.tabLayout);

      viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
      tabLayout.setupWithViewPager(viewPager);
   }

   private static class MyPagerAdapter extends FragmentStatePagerAdapter {

      MyPagerAdapter(FragmentManager fm) {
         super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
      }

      @Override
      public Fragment getItem(int position) {
         switch (position) {
            case 0:
               return new FragmentOne();
            case 1:
               return new FragmentTwo();
            case 2:
               return new FragmentThree();
            default:
               return null;
         }
      }

      @Override
      public int getCount() {
         return 3;
      }

      @Override
      public CharSequence getPageTitle(int position) {
         switch (position) {
            case 0:
               return "Tab 1";
            case 1:
               return "Tab 2";
            case 2:
               return "Tab 3";
            default:
               return null;
         }
      }
   }
}

// FragmentOne.java, FragmentTwo.java, FragmentThree.java are 
simple fragment classes.

// activity_main.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">

   <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabMode="fixed" />

   <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1" />

</LinearLayout>

输出

使用自定义 FragmentPagerAdapter

此方法涉及创建自定义 FragmentPagerAdapter 类，该类扩展 FragmentPagerAdapter 或 FragmentStatePagerAdapter。在自定义适配器中重写必要的方法来处理片段创建和检索。实现了根据所选选项卡确定适当片段的逻辑。使用 setAdapter() 在 ViewPager 上设置自定义适配器，并使用 setupWithViewPager() 将 TabLayout 连接到 ViewPager。此方法提供了灵活性，可以处理特定要求和自定义需求。

算法

• 创建一个扩展 FragmentPagerAdapter 或 FragmentStatePagerAdapter 的自定义 FragmentPagerAdapter 类。

• 重写必要的方法并处理片段的创建和检索。

• 实现逻辑以确定根据所选选项卡显示哪个片段。

• 使用 setAdapter() 在 ViewPager 上设置自定义 FragmentPagerAdapter 实例。

• 使用 setupWithViewPager() 将 TabLayout 与 ViewPager 连接起来。

程序

// MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

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

public class MainActivity extends AppCompatActivity {

   private ViewPager viewPager;
   private TabLayout tabLayout;

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

      viewPager = findViewById(R.id.viewPager);
      tabLayout = findViewById(R.id.tabLayout);

      viewPager.setAdapter(new CustomPagerAdapter(getSupportFragmentManager()));
      tabLayout.setupWithViewPager(viewPager);
   }

   private static class CustomPagerAdapter extends FragmentPagerAdapter {

      CustomPagerAdapter(FragmentManager fm) {
         super(fm);
      }

      @Override
      public Fragment getItem(int position) {
         switch (position) {
            case 0:
               return new FragmentOne();
            case 1:
               return new FragmentTwo();
            case 2:
               return new FragmentThree();
            default:
               return null;
         }
      }

      @Override
      public int getCount() {
         return 3;
      }

      @Override
      public CharSequence getPageTitle(int position) {
         switch (position) {
            case 0:
               return "Tab 1";
            case 1:
               return "Tab 2";
            case 2:
               return "Tab 3";
            default:
               return null;
         }
      }
   }
}

// FragmentOne.java, FragmentTwo.java, FragmentThree.java are 
simple fragment classes.

// activity_main.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context=".MainActivity">

   <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabLayout"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabMode="fixed" />

   <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1" />

</LinearLayout>

输出

结论

在本教程中，使用 ViewPager 和 Fragments 在 Android 中实现 TabLayout 提供了一种组织和浏览应用程序不同部分的有效方法。无论是使用 FragmentPagerAdapter、FragmentStatePagerAdapter 还是自定义适配器，这些方法都使开发人员能够创建用户友好的选项卡式界面，通过允许在片段之间无缝切换并为活动选项卡提供视觉指示器来增强用户体验。通过利用 TabLayout、ViewPager 和 Fragments 的强大功能，开发人员可以创建引人入胜且井井有条的 Android 应用程序。

相关文章

• Java 中 IdentityHashMap、WeakHashMap 和 EnumMap 之间的区别
• Java 中继承和接口的区别
• Java 中 InputStream 和 OutputStream 之间的区别
• Java 中 HashSet 、LinkedHashSet 和 TreeSet 之间的区别和相似之处
• Java 中 HashMap 和 IdentityHashMap 之间的区别
• Java 中 Hashtable 和同步映射之间的区别
• 如何在 Java 中迭代 LinkedHashMap?
• 如何使用反射动态地通过名称调用 Java 中的方法?
• 如何在 Java 中以相反的顺序迭代向量元素?
• 如何在 Java 中以反向顺序迭代 LinkedHashMap?