滑动视图让您可以在兄弟屏幕（例如选项卡）之间使用水平手指手势（或 *滑动*）进行导航。此导航模式也称为 *水平分页*。
本主题将教您如何创建带有滑动视图的选项卡布局，以便在选项卡之间切换，以及如何显示标题栏而不是选项卡。
实施滑动视图
您可以使用 AndroidX 的 ViewPager2 窗口小部件创建滑动视图。要使用 ViewPager2 和选项卡，您需要在项目中添加对 ViewPager2 和 Material Components 的依赖项。
要使用 ViewPager2 设置您的布局，请将 <ViewPager2> 元素添加到您的 XML 布局中。例如，如果滑动视图中的每个页面都占用整个布局，那么您的布局将如下所示
<androidx.viewpager2.widget.ViewPager2
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
要插入代表每个页面的子视图，请将此布局连接到 FragmentStateAdapter。以下是如何使用它在 Fragment 对象集合中滑动
Kotlin
class CollectionDemoFragment : Fragment() {
// When requested, this adapter returns a DemoObjectFragment,
// representing an object in the collection.
private lateinit var demoCollectionAdapter: DemoCollectionAdapter
private lateinit var viewPager: ViewPager2
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?) {
demoCollectionAdapter = DemoCollectionAdapter(this)
viewPager = view.findViewById(R.id.pager)
viewPager.adapter = demoCollectionAdapter
}
}
class DemoCollectionAdapter(fragment: Fragment) : FragmentStateAdapter(fragment) {
override fun getItemCount(): Int = 100
override fun createFragment(position: Int): Fragment {
// Return a NEW fragment instance in createFragment(int).
val fragment = DemoObjectFragment()
fragment.arguments = Bundle().apply {
// The object is just an integer.
putInt(ARG_OBJECT, position + 1)
}
return fragment
}
}
private const val ARG_OBJECT = "object"
// Instances of this class are fragments representing a single
// object in the 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.
DemoCollectionAdapter demoCollectionAdapter;
ViewPager2 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) {
demoCollectionAdapter = new DemoCollectionAdapter(this);
viewPager = view.findViewById(R.id.pager);
viewPager.setAdapter(demoCollectionAdapter);
}
}
public class DemoCollectionAdapter extends FragmentStateAdapter {
public DemoCollectionAdapter(Fragment fragment) {
super(fragment);
}
@NonNull
@Override
public Fragment createFragment(int position) {
// Return a NEW fragment instance in createFragment(int).
Fragment fragment = new DemoObjectFragment();
Bundle args = new Bundle();
// The object is just an integer.
args.putInt(DemoObjectFragment.ARG_OBJECT, position + 1);
fragment.setArguments(args);
return fragment;
}
@Override
public int getItemCount() {
return 100;
}
}
// Instances of this class are fragments representing a single
// object in the collection.
public class DemoObjectFragment extends Fragment {
public static final String ARG_OBJECT = "object";
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable 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 提供了一种以水平方式显示选项卡的方法。当与 ViewPager2 一起使用时，TabLayout 可以提供一个熟悉的界面，用于在滑动视图中的页面之间进行导航。
TabLayout。要在 ViewPager2 中包含 TabLayout，请在 <ViewPager2> 元素上方添加一个 <TabLayout> 元素
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
接下来，创建一个 TabLayoutMediator 将 TabLayout 连接到 ViewPager2，并将其附加，如下所示
Kotlin
class CollectionDemoFragment : Fragment() {
...
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
val tabLayout = view.findViewById(R.id.tab_layout)
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
tab.text = "OBJECT ${(position + 1)}"
}.attach()
}
...
}
Java
public class CollectionDemoFragment extends Fragment {
...
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
TabLayout tabLayout = view.findViewById(R.id.tab_layout);
new TabLayoutMediator(tabLayout, viewPager,
(tab, position) -> tab.setText("OBJECT " + (position + 1))
).attach();
}
...
}
有关选项卡布局的其他设计指南，请参阅 Material Design 选项卡文档。
其他资源
要详细了解 ViewPager2，请参阅以下其他资源。
示例
- ViewPager2 示例 在 GitHub 上