当前位置：极客笔记 > Java > Java 精选笔记 > Android 如何使用ViewPager和Fragments实现TabLayout

Android 如何使用ViewPager和Fragments实现TabLayout

Android 如何使用ViewPager和Fragments实现TabLayout

通过在Android中使用TabLayout、ViewPager和Fragments，开发人员可以设计直观且完善的用户界面。借助TabLayout的帮助，用户可以轻松地在应用程序中浏览多个部分或类别，使其更加用户友好。ViewPager使得在片段之间平滑切换，确保无缝的用户体验。通过组合这些组件，开发人员可以创建一个选项卡布局，其中每个选项卡对应于特定的片段，显示其独特的内容。

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

TabLayout

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

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

实现方法

有多种方法可以在Android中使用ViewPager和Fragments实现TabLayout。以下是三种常见的方法：

  • 使用FragmentPagerAdapter

  • 使用FragmentStatePagerAdapter

  • 使用自定义FragmentPagerAdapter

使用FragmentPagerAdapter

此方法涉及创建一个包括TabLayout和ViewPager的布局文件。创建一个FragmentPagerAdapter子类，在其中重写必要的方法（如getItem()和getCount()），根据位置提供适当的片段。将FragmentPagerAdapter实例设置在ViewPager上，并使用setupWithViewPager()将TabLayout连接到ViewPager。这种方法适用于少量片段。

步骤

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

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

  • 在FragmentPagerAdapter的getItem()方法中，根据位置返回适当的片段实例。

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

  • 使用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>

输出

Android 如何使用ViewPager和Fragments实现TabLayout

使用FragmentStatePagerAdapter

与之前的方法类似，创建一个包含TabLayout和ViewPager的布局文件。但是，使用FragmentStatePagerAdapter代替FragmentPagerAdapter。在处理大量碎片或内存密集型内容时，FragmentStatePagerAdapter更高效，因为它会根据需要销毁和重新创建碎片。

步骤

  • 按照上述步骤执行，但使用FragmentStatePagerAdapter代替FragmentPagerAdapter。

  • 处理大量碎片或内存密集型内容时，可以使用FragmentStatePagerAdapter。

程序

// 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>

输出

Android 如何使用ViewPager和Fragments实现TabLayout

使用自定义的FragmentPagerAdapter

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

步骤

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

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

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

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

  • 使用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>

输出

Android 如何使用ViewPager和Fragments实现TabLayout

结论

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

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

Java 精选教程