如何开发安卓多ViewPager布局：Tab切换联动显示对应Fragment

我来帮你搞定这个点击Tab同步切换两个ViewPager内容的需求，咱们一步步拆解实现：

1. 先准备布局文件 #

首先在你的Activity/Fragment对应的XML布局里，添加TabLayout和两个ViewPager：

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

    <!-- Tab导航栏 -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab1"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab2"/>
    </com.google.android.material.tabs.TabLayout>

    <!-- 第一个ViewPager -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <!-- 第二个ViewPager -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

注：这里用了AndroidX组件，如果你还在使用旧的support库，把对应的类替换成android.support.v4.view.ViewPager和android.support.design.widget.TabLayout即可，推荐迁移到AndroidX。

2. 完善你的PagerAdapter #

你提供的Adapter代码不完整，咱们补充成可复用的版本，用来给两个ViewPager提供Fragment：

package com.papaozi.ground;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import java.util.List;

public class PagerAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> mFragmentList;

    public PagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        this.mFragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList != null ? mFragmentList.size() : 0;
    }
}

这个Adapter可以同时给两个ViewPager用，只要传入不同的Fragment列表就行。

3. 在Activity中实现联动逻辑 #

接下来在你的主Activity里，初始化组件、绑定Adapter，然后给TabLayout设置选中监听器，同步控制两个ViewPager的切换：

package com.papaozi.ground;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager1;
    private ViewPager mViewPager2;

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

        // 初始化UI组件
        mTabLayout = findViewById(R.id.tabLayout);
        mViewPager1 = findViewById(R.id.viewPager1);
        mViewPager2 = findViewById(R.id.viewPager2);

        // 为两个ViewPager准备对应的Fragment列表
        List<Fragment> vp1Fragments = new ArrayList<>();
        vp1Fragments.add(new Fragment1()); // 对应Tab1的ViewPager1内容
        vp1Fragments.add(new Fragment2()); // 对应Tab2的ViewPager1内容

        List<Fragment> vp2Fragments = new ArrayList<>();
        vp2Fragments.add(new Fragment1A()); // 对应Tab1的ViewPager2内容
        vp2Fragments.add(new Fragment2A()); // 对应Tab2的ViewPager2内容

        // 给ViewPager设置Adapter
        PagerAdapter adapter1 = new PagerAdapter(getSupportFragmentManager(), vp1Fragments);
        mViewPager1.setAdapter(adapter1);

        PagerAdapter adapter2 = new PagerAdapter(getSupportFragmentManager(), vp2Fragments);
        mViewPager2.setAdapter(adapter2);

        // 设置Tab选中监听器，同步切换两个ViewPager
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int selectedPosition = tab.getPosition();
                // 同步切换两个ViewPager到对应位置，false表示不带动画，可根据需求改成true
                mViewPager1.setCurrentItem(selectedPosition, false);
                mViewPager2.setCurrentItem(selectedPosition, false);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                // 不需要额外操作
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                // 如果需要处理重复点击Tab的逻辑，可以在这里添加
            }
        });

        // 默认选中第一个Tab
        mTabLayout.getTabAt(0).select();
    }
}

4. 额外优化（可选） #

如果你希望滑动ViewPager1时，TabLayout也跟着切换，可以添加以下代码：

mViewPager1.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

这样就能实现双向联动，无论是点击Tab还是滑动ViewPager，两个ViewPager和Tab都会保持同步。

内容的提问来源于stack exchange，提问作者Onad Hanif