如何在 Android 中将 TabLayout 与 ViewPager2 一起使用

您必须使用这个来模拟和设置 with .否则，您将必须编写自己的适配器，该适配器将两者结合起来。TabLayoutMediatortabLayout.setupWithViewPager()ViewPager2Tablayout

它的代码在 Kotlin 中将如下所示

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
  tab.text = tabTitles[position]
}.attach()

没有黑客，没有扩展，没有TabLayoutMediator

我正在并执行以下操作，而无需TabLayoutMediator。相反，我使用此处描述的方法将 TabLayout 与 ViewPager2 链接起来。我还在这里为github添加了一个工作示例。我想我已经将解决方案最小化为最小的工作示例。我将解释重要的部分。implementation 'com.google.android.material:material:1.2.0-alpha02'

将元素添加到模板

首先，我们需要将 TabLayout 和 ViewPager2 添加到布局中。我已经把它们放在了LinearLayout和CondusterLayout中，但你当然可以做任何你喜欢的事情。

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                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="wrap_content"/>

        </LinearLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

将适配器连接到取页机

因此，适配器负责为活动提供正确的片段。你必须扩展FragmentStateAdapter，我已经非常简单地完成了如下（它是一个私有类，因为它是在我的MainActivity中声明的.java在这里）：

    private class ViewStateAdapter extends FragmentStateAdapter {

        public ViewStateAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle) {
            super(fragmentManager, lifecycle);
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            // Hardcoded in this order, you'll want to use lists and make sure the titles match
            if (position == 0) {
                return new BarFragment();
            }
            return new FooFragment();
        }

        @Override
        public int getItemCount() {
            // Hardcoded, use lists
            return 2;
        }
    }

然后，我可以将我自己的适配器连接到视图页，如下所示：

FragmentManager fm = getSupportFragmentManager();
ViewStateAdapter sa = new ViewStateAdapter(fm, getLifecycle());
final ViewPager2 pa = findViewById(R.id.pager);
pa.setAdapter(sa);

我已将片段添加到我的视图页纸中。（因为我在适配器中硬编码了片段，所以你应该使用一个列表和类似“addFragment”方法之类的东西）

选项卡布局

然后与

TabLayout tabLayout = findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Bar"));
tabLayout.addTab(tabLayout.newTab().setText("Foo"));

我在 TabLayout 中添加了两个选项卡，显示标题，但还不让我切换到片段。

将选项卡布局连接到适配器

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                pa.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

这应该非常简单。用户单击选项卡，我在回调中获取位置，我只需将适配器的当前项设置为该位置即可。

滑动时更改选项卡

最后，当用户滑动片段以将正确的选项卡项设置为所选内容时，我们将耦合

pa.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
    @Override
    public void onPageSelected(int position) {
        tabLayout.selectTab(tabLayout.getTabAt(position));
    }
});