使用 ViewPager 创建包含标签页的滑动视图

滑动视图允许您使用水平手指手势（滑动）在同级子屏幕（例如标签页）之间进行导航。此导航模式也称为“水平分页”。本文档介绍了如何创建具有滑动视图（以便在标签页之间切换）的标签页布局，以及如何显示标题条而不是标签页。

实现滑动视图

您可以使用 AndroidX 的 ViewPager widget 创建滑动视图。如需使用 ViewPager 和标签页，请在项目中添加 Viewpager 和 Material 组件的依赖项。

如需使用 ViewPager 设置布局，请将 <ViewPager> 元素添加到 XML 布局中。例如，如果滑动视图中的每个页面都需要使用整个布局，布局应大致如下所示：

<androidx.viewpager.widget.ViewPager  xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/pager"  android:layout_width="match_parent"  android:layout_height="match_parent" />

如需插入代表各个页面的子视图，请将此布局挂接到 PagerAdapter。有以下两种内置适配器可供选择：

  • FragmentPagerAdapter：适用于在固定数量的少量同级子界面之间进行导航。
  • FragmentStatePagerAdapter：适用于对未知数量的页面进行分页。FragmentStatePagerAdapter 会在用户导航至其他位置时销毁 fragment，从而优化内存使用情况。

以下示例展示了如何使用 FragmentStatePagerAdapter 在一组 Fragment 对象之间滑动：

Kotlin

class CollectionDemoFragment : Fragment() {  // When requested, this adapter returns a DemoObjectFragment, representing  // an object in the collection.  private lateinit var demoCollectionPagerAdapter: DemoCollectionPagerAdapter  private lateinit var viewPager: ViewPager  override fun onCreateView(inflater: LayoutInflater,  container: ViewGroup?,  savedInstanceState: Bundle?): View? {  return inflater.inflate(R.layout.collection_demo, container, false)  }  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {  demoCollectionPagerAdapter = DemoCollectionPagerAdapter(childFragmentManager)  viewPager = view.findViewById(R.id.pager)  viewPager.adapter = demoCollectionPagerAdapter  } } // Since this is an object collection, use a FragmentStatePagerAdapter, not a // FragmentPagerAdapter. class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {  override fun getCount(): Int = 100  override fun getItem(i: Int): Fragment {  val fragment = DemoObjectFragment()  fragment.arguments = Bundle().apply {  // Our object is just an integer :-P  putInt(ARG_OBJECT, i + 1)  }  return fragment  }  override fun getPageTitle(position: Int): CharSequence {  return "OBJECT ${(position + 1)}"  } } private const val ARG_OBJECT = "object" // Instances of this class are fragments representing a single object in your // collection. class DemoObjectFragment : Fragment() {  override fun onCreateView(inflater: LayoutInflater,  container: ViewGroup?,  savedInstanceState: Bundle?): View {  return inflater.inflate(R.layout.fragment_collection_object, container, false)  }  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {  arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {  val textView: TextView = view.findViewById(android.R.id.text1)  textView.text = getInt(ARG_OBJECT).toString()  }  } }

Java

public class CollectionDemoFragment extends Fragment {  // When requested, this adapter returns a DemoObjectFragment, representing  // an object in the collection.  DemoCollectionPagerAdapter demoCollectionPagerAdapter;  ViewPager viewPager;  @Nullable  @Override  public View onCreateView(@NonNull LayoutInflater inflater,  @Nullable ViewGroup container,  @Nullable Bundle savedInstanceState) {  return inflater.inflate(R.layout.collection_demo, container, false);  }  @Override  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {  demoCollectionPagerAdapter = new DemoCollectionPagerAdapter(getChildFragmentManager());  viewPager = view.findViewById(R.id.pager);  viewPager.setAdapter(demoCollectionPagerAdapter);  } } // Since this is an object collection, use a FragmentStatePagerAdapter, not a // FragmentPagerAdapter. public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {  public DemoCollectionPagerAdapter(FragmentManager fm) {  super(fm);  }  @Override  public Fragment getItem(int i) {  Fragment fragment = new DemoObjectFragment();  Bundle args = new Bundle();  // Our object is just an integer.  args.putInt(DemoObjectFragment.ARG_OBJECT, i + 1);  fragment.setArguments(args);  return fragment;  }  @Override  public int getCount() {  return 100;  }  @Override  public CharSequence getPageTitle(int position) {  return "OBJECT " + (position + 1);  } } // Instances of this class are fragments representing a single object in your // collection. public class DemoObjectFragment extends Fragment {  public static final String ARG_OBJECT = "object";  @Override  public View onCreateView(LayoutInflater inflater,  ViewGroup container, Bundle savedInstanceState) {  return inflater.inflate(R.layout.fragment_collection_object, container, false);  }  @Override  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {  Bundle args = getArguments();  ((TextView) view.findViewById(android.R.id.text1))  .setText(Integer.toString(args.getInt(ARG_OBJECT)));  } }

以下部分介绍了如何添加标签页，以便在页面之间进行导航。

使用 TabLayout 添加标签页

TabLayout 提供了一种横向显示标签页的方式。当与 ViewPager 一起使用时，TabLayout 可以提供一种熟悉的界面，让用户在滑动视图中浏览各个页面。

图 1. 包含四个标签页的 TabLayout。

如需在 ViewPager 中加入 TabLayout，请在 <ViewPager> 元素内添加 <TabLayout> 元素，如以下示例所示：

<androidx.viewpager.widget.ViewPager  xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/pager"  android:layout_width="match_parent"  android:layout_height="match_parent">  <com.google.android.material.tabs.TabLayout  android:id="@+id/tab_layout"  android:layout_width="match_parent"  android:layout_height="wrap_content" /> </androidx.viewpager.widget.ViewPager>

使用 setupWithViewPager() 将 TabLayout 与 ViewPager 相关联，如以下示例所示。TabLayout 中的各个标签页会自动填充 PagerAdapter 中的页面标题。

Kotlin

class CollectionDemoFragment : Fragment() {  ...  override fun onViewCreated(view: View, savedInstanceState: Bundle?) {  val tabLayout = view.findViewById(R.id.tab_layout)  tabLayout.setupWithViewPager(viewPager)  }  ... } class DemoCollectionPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {  override fun getCount(): Int = 4  override fun getPageTitle(position: Int): CharSequence {  return "OBJECT ${(position + 1)}"  }  ... }

Java

public class CollectionDemoFragment extends Fragment {  ...  @Override  public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {  TabLayout tabLayout = view.findViewById(R.id.tab_layout);  tabLayout.setupWithViewPager(viewPager);  }  ... } public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {  ...  @Override  public int getCount() {  return 4;  }  @Override  public CharSequence getPageTitle(int position) {  return "OBJECT " + (position + 1);  }  ... }

如需了解标签页布局的其他设计准则，请参阅适用于标签页的 Material Design 文档。