以前，viewpager+tablayout联动，只需要以下两行代码就解决，
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));类似的，官方也为了我们提示了tablayout+viewpager2的联动工具类：TabLayoutMediator
使用的时候只需要以下几行代码，就实现了tablayout+viewpager2联动
new TabLayoutMediator(tabLayout, viewPager2, true,new TabLayoutMediator.OnConfigureTabCallback() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
//这里需要根据position修改tab的样式和文字等
tab.setText("fragment"+position);
}
}).attach();注：material1.1.0之前，material包是不包含TabLayoutMediator的，想使用需要复制TabLayoutMediator源码，源码在下面！！
示例：
xml代码：简单的界面，顶部tablayout，底部viewpager2
<?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=".Main2Activity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorPrimary"
app:tabTextColor="@color/colorAccent"
app:tabSelectedTextColor="@color/colorPrimary"
app:tabIndicatorFullWidth="false"
app:tabMode="scrollable"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewpager2"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tablayout" />
</androidx.constraintlayout.widget.ConstraintLayout>activity代码：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
viewPager2 = findViewById(R.id.viewpager2);
tabLayout = findViewById(R.id.tablayout);
viewPager2.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);
List<Fragment> fragments = new ArrayList<>();
for (int i = 0; i < 20; i++) {
fragments.add(BlankFragment.newInstance());
}
viewPager2.setAdapter(new FragmentStateAdapter(this) {
@NonNull
@Override
public Fragment createFragment(int position) {
Fragment fragment = fragments.get(position);
return fragment;
}
@Override
public int getItemCount() {
return fragments.size();
}
});
viewPager2.setOffscreenPageLimit(3);
new TabLayoutMediator(tabLayout, viewPager2, true,new TabLayoutMediator.OnConfigureTabCallback() {
@Override
public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
//这里需要根据position修改tab的样式和文字等
tab.setText("fragment"+position);
}
}).attach();
//最后一定要attach()
}TabLayoutMediator源码：直接拷贝到你的项目里就能用@RestrictTo(LIBRARY_GROUP)
public final class TabLayoutMediator {
private final @NonNull
TabLayout mTabLayout;
private final @NonNull
ViewPager2 mViewPager;
private final boolean mAutoRefresh;
private final OnConfigureTabCallback mOnConfigureTabCallback;
private RecyclerView.Adapter mAdapter;
private boolean mAttached;
private TabLayoutOnPageChangeCallback mOnPageChangeCallback;
private TabLayout.OnTabSelectedListener mOnTabSelectedListener;
private RecyclerView.AdapterDataObserver mPagerAdapterObserver;
/**
* A callback interface that must be implemented to set the text and styling of newly created
* tabs.
*/
public interface OnConfigureTabCallback {
/**
* Called to configure the tab for the page at the specified position. Typically calls
*
* @param tab The Tab which should be configured to represent the title of the item at the
* given position in the data set.
* @param position The position of the item within the adapter's data set.
*/
void onConfigureTab(@NonNull TabLayout.Tab tab, int position);
}
/**
* Creates a TabLayoutMediator to synchronize a TabLayout and a ViewPager2 together. It will
* update the tabs automatically when the data set of the view pager's adapter changes. The link
* will be established after {@link #attach()} is called.
*
* @param tabLayout The tab bar to link
* @param viewPager The view pager to link
*/
public TabLayoutMediator(@NonNull TabLayout tabLayout, @NonNull ViewPager2 viewPager,
@NonNull OnConfigureTabCallback onConfigureTabCallback) {
this(tabLayout, viewPager, true, onConfigureTabCallback);
}
/**
* Creates a TabLayoutMediator to synchronize a TabLayout and a ViewPager2 together. If {@code
* autoRefresh} is true, it will update the tabs automatically when the data set of the view
* pager's adapter changes. The link will be established after {@link #attach()} is called.
*
* @param tabLayout The tab bar to link
* @param viewPager The view pager to link
* @param autoRefresh If {@code true}, will recreate all tabs when the data set of the view
* pager's adapter changes.
*/
public TabLayoutMediator(@NonNull TabLayout tabLayout, @NonNull ViewPager2 viewPager,
boolean autoRefresh, @NonNull OnConfigureTabCallback onConfigureTabCallback) {
mTabLayout = tabLayout;
mViewPager = viewPager;
mAutoRefresh = autoRefresh;
mOnConfigureTabCallback = onConfigureTabCallback;
}
/**
* Link the TabLayout and the ViewPager2 together.
* adapter.
*/
public void attach() {
if (mAttached) {
throw new IllegalStateException("TabLayoutMediator is already attached");
}
mAdapter = mViewPager.getAdapter();
if (mAdapter == null) {
throw new IllegalStateException("TabLayoutMediator attached before ViewPager2 has an "
+ "adapter");
}
mAttached = true;
// Add our custom OnPageChangeCallback to the ViewPager
mOnPageChangeCallback = new TabLayoutOnPageChangeCallback(mTabLayout);
mViewPager.registerOnPageChangeCallback(mOnPageChangeCallback);
// Now we'll add a tab selected listener to set ViewPager's current item
mOnTabSelectedListener = new ViewPagerOnTabSelectedListener(mViewPager);
mTabLayout.addOnTabSelectedListener(mOnTabSelectedListener);
// Now we'll populate ourselves from the pager adapter, adding an observer if
// autoRefresh is enabled
if (mAutoRefresh) {
// Register our observer on the new adapter
mPagerAdapterObserver = new PagerAdapterObserver();
mAdapter.registerAdapterDataObserver(mPagerAdapterObserver);
}
populateTabsFromPagerAdapter();
// Now update the scroll position to match the ViewPager's current item
mTabLayout.setScrollPosition(mViewPager.getCurrentItem(), 0f, true);
}
/**
* Unlink the TabLayout and the ViewPager
*/
public void detach() {
mAdapter.unregisterAdapterDataObserver(mPagerAdapterObserver);
mTabLayout.removeOnTabSelectedListener(mOnTabSelectedListener);
mViewPager.unregisterOnPageChangeCallback(mOnPageChangeCallback);
mPagerAdapterObserver = null;
mOnTabSelectedListener = null;
mOnPageChangeCallback = null;
}
@SuppressWarnings("WeakerAccess")
void populateTabsFromPagerAdapter() {
mTabLayout.removeAllTabs();
if (mAdapter != null) {
int adapterCount = mAdapter.getItemCount();
for (int i = 0; i < adapterCount; i++) {
TabLayout.Tab tab = mTabLayout.newTab();
mOnConfigureTabCallback.onConfigureTab(tab, i);
mTabLayout.addTab(tab, false);
}
// Make sure we reflect the currently set ViewPager item
if (adapterCount > 0) {
int currItem = mViewPager.getCurrentItem();
if (currItem != mTabLayout.getSelectedTabPosition()) {
mTabLayout.getTabAt(currItem).select();
}
}
}
}
/**
* A {@link ViewPager2.OnPageChangeCallback} class which contains the necessary calls back to
* the provided {@link TabLayout} so that the tab position is kept in sync.
*
* <p>This class stores the provided TabLayout weakly, meaning that you can use {@link
* ViewPager2#registerOnPageChangeCallback(ViewPager2.OnPageChangeCallback)} without removing
* the callback and not cause a leak.
*/
private static class TabLayoutOnPageChangeCallback extends ViewPager2.OnPageChangeCallback {
private final WeakReference<TabLayout> mTabLayoutRef;
private int mPreviousScrollState;
private int mScrollState;
TabLayoutOnPageChangeCallback(TabLayout tabLayout) {
mTabLayoutRef = new WeakReference<>(tabLayout);
reset();
}
@Override
public void onPageScrollStateChanged(final int state) {
mPreviousScrollState = mScrollState;
mScrollState = state;
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null) {
// Only update the text selection if we're not settling, or we are settling after
// being dragged
boolean updateText = mScrollState != SCROLL_STATE_SETTLING
|| mPreviousScrollState == SCROLL_STATE_DRAGGING;
// Update the indicator if we're not settling after being idle. This is caused
// from a setCurrentItem() call and will be handled by an animation from
// onPageSelected() instead.
boolean updateIndicator = !(mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
setScrollPosition(tabLayout, position, positionOffset, updateText, updateIndicator);
}
}
@Override
public void onPageSelected(final int position) {
TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null
&& tabLayout.getSelectedTabPosition() != position
&& position < tabLayout.getTabCount()) {
// Select the tab, only updating the indicator if we're not being dragged/settled
// (since onPageScrolled will handle that).
boolean updateIndicator = mScrollState == SCROLL_STATE_IDLE
|| (mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
selectTab(tabLayout, tabLayout.getTabAt(position), updateIndicator);
}
}
void reset() {
mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
}
}
// region Reflective calls
// Temporarily call methods TabLayout.setScrollPosition(int, float, boolean, boolean) and
// TabLayout.selectTab(TabLayout.Tab, boolean) through reflection, until they have been made
// public in the Material Design Components library.
private static Method sSetScrollPosition;
private static Method sSelectTab;
private static final String SET_SCROLL_POSITION_NAME = "TabLayout.setScrollPosition(int, float,"
+ " boolean, boolean)";
private static final String SELECT_TAB_NAME = "TabLayout.selectTab(TabLayout.Tab, boolean)";
static {
try {
sSetScrollPosition = TabLayout.class.getDeclaredMethod("setScrollPosition", int.class,
float.class, boolean.class, boolean.class);
sSetScrollPosition.setAccessible(true);
sSelectTab = TabLayout.class.getDeclaredMethod("selectTab", TabLayout.Tab.class,
boolean.class);
sSelectTab.setAccessible(true);
} catch (NoSuchMethodException e) {
throw new IllegalStateException("Can't reflect into method TabLayout"
+ ".setScrollPosition(int, float, boolean, boolean)");
}
}
@SuppressWarnings("WeakerAccess")
static void setScrollPosition(TabLayout tabLayout, int position, float positionOffset,
boolean updateSelectedText, boolean updateIndicatorPosition) {
try {
if (sSetScrollPosition != null) {
sSetScrollPosition.invoke(tabLayout, position, positionOffset, updateSelectedText,
updateIndicatorPosition);
} else {
throwMethodNotFound(SET_SCROLL_POSITION_NAME);
}
} catch (Exception e) {
throwInvokeFailed(SET_SCROLL_POSITION_NAME);
}
}
@SuppressWarnings("WeakerAccess")
static void selectTab(TabLayout tabLayout, TabLayout.Tab tab, boolean updateIndicator) {
try {
if (sSelectTab != null) {
sSelectTab.invoke(tabLayout, tab, updateIndicator);
} else {
throwMethodNotFound(SELECT_TAB_NAME);
}
} catch (Exception e) {
throwInvokeFailed(SELECT_TAB_NAME);
}
}
private static void throwMethodNotFound(String method) {
throw new IllegalStateException("Method " + method + " not found");
}
private static void throwInvokeFailed(String method) {
throw new IllegalStateException("Couldn't invoke method " + method);
}
// endregion
/**
* A {@link TabLayout.OnTabSelectedListener} class which contains the necessary calls back to
* the provided {@link ViewPager2} so that the tab position is kept in sync.
*/
private static class ViewPagerOnTabSelectedListener implements TabLayout.OnTabSelectedListener {
private final ViewPager2 mViewPager;
ViewPagerOnTabSelectedListener(ViewPager2 viewPager) {
this.mViewPager = viewPager;
}
@Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition(), true);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// No-op
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// No-op
}
}
private class PagerAdapterObserver extends RecyclerView.AdapterDataObserver {
PagerAdapterObserver() {}
@Override
public void onChanged() {
populateTabsFromPagerAdapter();
}
@Override
public void onItemRangeChanged(int positionStart, int itemCount) {
populateTabsFromPagerAdapter();
}
@Override
public void onItemRangeChanged(int positionStart, int itemCount, @Nullable Object payload) {
populateTabsFromPagerAdapter();
}
@Override
public void onItemRangeInserted(int positionStart, int itemCount) {
populateTabsFromPagerAdapter();
}
@Override
public void onItemRangeRemoved(int positionStart, int itemCount) {
populateTabsFromPagerAdapter();
}
@Override
public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) {
populateTabsFromPagerAdapter();
}
}
}
查看TabLayoutMediator代码，不难发现，内部也是实现了TabLayout.OnTabSelectedListener和ViewPager2.OnPageChangeCallback，参考官方的写法，我们可以写自己的tablayout和viewpager2的联动
这部分内容将在下一章讲解