TabLayout與ViewPager同步后Tab的標題不顯示

一、概述

1.1 問題描述

TabLayout+ViewPager后，TabLayout的TabItem不顯示的問題：

1.2 截圖

二、結論

mTabs.setupWithViewPager(mViewPager); 語句的功能是：

• 將 TabLayout、ViewPager 的監聽事件同步
• 對 TabLayout 的適配器進行重置
• 對 TabLayout 的 TabItem 進行重置
• 從 ViewPager 的 Adapter 中讀取到每一頁的標題，並為之創建 TabItem 添加到 TabLayout 中

解決方案是：
重寫在 mViewPager 的 Adapter 中的如下方法，將每頁的 Title 設置好：

	mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
			return mFragmentList.get(position);
		}

		@Override
		public int getCount() {
			return mFragmentList.size();
		}

		@Override
		public CharSequence getPageTitle(int position) {
			return mTitle[position];
		}
	});

三、問題探究

3.1 設置的代碼

mFragmentList.add(longFragment);
mFragmentList.add(shortFragment);
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
	@Override
	public Fragment getItem(int position) {
		return mFragmentList.get(position);
	}

	@Override
	public int getCount() {
		return mFragmentList.size();
	}
});
mTabs.setupWithViewPager(mViewPager);

上面是非常常見的一段代碼，主要邏輯是，將承載兩個Fragment的ViewPager與TabLayout同步起來。
其中，核心語句是：

	mTabs.setupWithViewPager(mViewPager);

3.2 查看 TabLayout 的相關源碼

進入源碼查看到：

	public void setupWithViewPager(@Nullable final ViewPager viewPager) {
        if (mViewPager != null && mPageChangeListener != null) {
            // If we've already been setup with a ViewPager, remove us from it
            mViewPager.removeOnPageChangeListener(mPageChangeListener);
        }

        if (viewPager != null) {
            final PagerAdapter adapter = viewPager.getAdapter();
            if (adapter == null) {
                throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
            }

            mViewPager = viewPager;

            // Add our custom OnPageChangeListener to the ViewPager
            if (mPageChangeListener == null) {
                mPageChangeListener = new TabLayoutOnPageChangeListener(this);
            }
            mPageChangeListener.reset();
            viewPager.addOnPageChangeListener(mPageChangeListener);

            // Now we'll add a tab selected listener to set ViewPager's current item
            setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));

            // Now we'll populate ourselves from the pager adapter
            setPagerAdapter(adapter, true);
        } else {
            // We've been given a null ViewPager so we need to clear out the internal state,
            // listeners and observers
            mViewPager = null;
            setOnTabSelectedListener(null);
            setPagerAdapter(null, true);
        }
    }

也比較明了，無非是先做一系列的判斷，然后修改 TabLayout與ViewPager的各種監聽事件。

進入 setPagerAdapter 查看到如下方法：

	private void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
        if (mPagerAdapter != null && mPagerAdapterObserver != null) {
            // If we already have a PagerAdapter, unregister our observer
            mPagerAdapter.unregisterDataSetObserver(mPagerAdapterObserver);
        }

        mPagerAdapter = adapter;

        if (addObserver && adapter != null) {
            // Register our observer on the new adapter
            if (mPagerAdapterObserver == null) {
                mPagerAdapterObserver = new PagerAdapterObserver();
            }
            adapter.registerDataSetObserver(mPagerAdapterObserver);
        }

        // Finally make sure we reflect the new adapter
        populateFromPagerAdapter();
    }

該方法的主要功能是設置TabLayout的適配器，populateFromPagerAdapter();方法引人注目。

	private void populateFromPagerAdapter() {
        removeAllTabs();

        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
				// 從 PagerAdapter 中獲取到標題，並新建 Tab 加入到空的 TabLayout 中
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }

            // Make sure we reflect the currently set ViewPager item
            if (mViewPager != null && adapterCount > 0) {
                final int curItem = mViewPager.getCurrentItem();
                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                    selectTab(getTabAt(curItem));
                }
            }
        } else {
            removeAllTabs();
        }
    }

該方法中removeAllTabs();將所有的Tabs移除了，找到問題的關鍵！
同時，addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);給了我們答案。

3.4 跳轉到 PagerAdapter 的源碼

再仔細看看 getPageTitle 這個方法：

	public CharSequence getPageTitle(int position) {
        return null;
    }

所以，知道為什么為空了吧！

3.4 結論

綜上，mTabs.setupWithViewPager(mViewPager);語句的功能是：

• 將 TabLayout、ViewPager 的監聽事件同步
• 對 TabLayout 的適配器進行重置
• 對 TabLayout 的 TabItem 進行重置
• 從 ViewPager 的 Adapter 中讀取到每一頁的標題，並為之創建 TabItem 添加到 TabLayout 中

3.5 解決方案

重寫 getPageTitle 方法：

	mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
			return mFragmentList.get(position);
		}

		@Override
		public int getCount() {
			return mFragmentList.size();
		}

		@Override
		public CharSequence getPageTitle(int position) {
			return mTitle[position];
		}
	});

此文在我的 Github Pages 上同步發布，地址為：TabLayout與ViewPager同步后Tab的標題不顯示