我们现在常用的底部或者顶部导航栏很多都是使用TabLayout+ViewPager+Fragment实现的，最近有空分析一下TabLayout和ViewPager两者之间关联的原理

主要就是一行代码实现两者之间的关联：tabLayout.setupWithViewPager(viewPager);
现在来看下实现的原理：经过两次重载走到下面的方法内部

    private void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh, boolean implicitSetup) {//清除之前的监听器if (this.viewPager != null) {if (this.pageChangeListener != null) {this.viewPager.removeOnPageChangeListener(this.pageChangeListener);}if (this.adapterChangeListener != null) {this.viewPager.removeOnAdapterChangeListener(this.adapterChangeListener);}}if (this.currentVpSelectedListener != null) {this.removeOnTabSelectedListener(this.currentVpSelectedListener);this.currentVpSelectedListener = null;}if (viewPager != null) {this.viewPager = viewPager;if (this.pageChangeListener == null) {this.pageChangeListener = new TabLayout.TabLayoutOnPageChangeListener(this);}this.pageChangeListener.reset();viewPager.addOnPageChangeListener(this.pageChangeListener);this.currentVpSelectedListener = new TabLayout.ViewPagerOnTabSelectedListener(viewPager);this.addOnTabSelectedListener(this.currentVpSelectedListener);PagerAdapter adapter = viewPager.getAdapter();if (adapter != null) {this.setPagerAdapter(adapter, autoRefresh);}if (this.adapterChangeListener == null) {this.adapterChangeListener = new TabLayout.AdapterChangeListener();}this.adapterChangeListener.setAutoRefresh(autoRefresh);viewPager.addOnAdapterChangeListener(this.adapterChangeListener);this.setScrollPosition(viewPager.getCurrentItem(), 0.0F, true);} else {this.viewPager = null;this.setPagerAdapter((PagerAdapter)null, false);}this.setupViewPagerImplicitly = implicitSetup;}

主要就是设置了3个监听器pageChangeListener、currentVpSelectedListener、adapterChangeListener，
pageChangeListener是页面切换监听器，当viewpager页面滑动或者切换的时候，使用这个进行回调，让TabLayout不同tab进行切换，主要是下面的静态内部类TabLayoutOnPageChangeListener ，实现了ViewPager的OnPageChangeListener ，监听了ViewPager的滑动页面切换变化，然后更新到对应tab上。

public static class TabLayoutOnPageChangeListener implements OnPageChangeListener {private final WeakReference<TabLayout> tabLayoutRef;private int previousScrollState;private int scrollState;public TabLayoutOnPageChangeListener(TabLayout tabLayout) {this.tabLayoutRef = new WeakReference(tabLayout);}public void onPageScrollStateChanged(int state) {this.previousScrollState = this.scrollState;this.scrollState = state;}public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {TabLayout tabLayout = (TabLayout)this.tabLayoutRef.get();if (tabLayout != null) {boolean updateText = this.scrollState != 2 || this.previousScrollState == 1;boolean updateIndicator = this.scrollState != 2 || this.previousScrollState != 0;tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);}}public void onPageSelected(int position) {TabLayout tabLayout = (TabLayout)this.tabLayoutRef.get();if (tabLayout != null && tabLayout.getSelectedTabPosition() != position && position < tabLayout.getTabCount()) {boolean updateIndicator = this.scrollState == 0 || this.scrollState == 2 && this.previousScrollState == 0;tabLayout.selectTab(tabLayout.getTabAt(position), updateIndicator);}}void reset() {this.previousScrollState = this.scrollState = 0;}}

currentVpSelectedListener是TabLayout不同tab之间的切换监听器，当点击了tab之后，会使用这个进行回调，在onTabSelected方法中通知viewpager更换页面，如下所示

public static class ViewPagerOnTabSelectedListener implements TabLayout.OnTabSelectedListener {private final ViewPager viewPager;public ViewPagerOnTabSelectedListener(ViewPager viewPager) {this.viewPager = viewPager;}public void onTabSelected(TabLayout.Tab tab) {this.viewPager.setCurrentItem(tab.getPosition());}public void onTabUnselected(TabLayout.Tab tab) {}public void onTabReselected(TabLayout.Tab tab) {}}

adapterChangeListener是适配器变化监听的，如果ViewPager中的Fragment存储的Adapter变化了，就会通知给TabLayout，让TabLayout也跟随变化

private class AdapterChangeListener implements OnAdapterChangeListener {private boolean autoRefresh;AdapterChangeListener() {}public void onAdapterChanged(@NonNull ViewPager viewPager, @Nullable PagerAdapter oldAdapter, @Nullable PagerAdapter newAdapter) {if (TabLayout.this.viewPager == viewPager) {TabLayout.this.setPagerAdapter(newAdapter, this.autoRefresh);}}void setAutoRefresh(boolean autoRefresh) {this.autoRefresh = autoRefresh;}}

以上3个适配器就是TabLayout和ViewPager关联最主要的纽带了，两者之间滑动、页面切换相互联动，实现了页面切换。