TabLayout不正常显示标签->TabLayout和ViewPager的恩恩怨怨

最新推荐文章于 2022-07-28 14:17:17 发布

原创最新推荐文章于 2022-07-28 14:17:17 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

bug 专栏收录该内容

9 篇文章

订阅专栏

本文解决了一个关于Android开发中TabLayout与ViewPager结合使用时标签不显示的问题。通过逐步排查，发现setupWithViewPager方法会清除原有的Tab并使用ViewPager的适配器设置标签，需重写getPageTitle方法来正确显示。

问题

近日用了下android.support.design.widget.TabLayout和ViewPager发现标签不显示

       tabLayout = (TabLayout) findViewById(R.id.tl_recharge);
        tabLayout.addTab(tabLayout.newTab().setText("账户充值"));
        tabLayout.addTab(tabLayout.newTab().setText("卡卷充值"));
        tabLayout.setupWithViewPager(viewPager);

解决方案

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

删除addTab 直接在getPageTitle返回名字即可

TabLayout的代码就这样。发现无法显示，这种奇怪的问题我的解决办法是，逐行注释找问题

发现是setupWithViewPager导致问题，我把setupWithViewPager的代码注释后，发现可以正常显示标签了

但是滑动后标签不会有任何变动

我们来看看setupWithViewPager中做了什么

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

        if (mCurrentVpSelectedListener != null) {
            // If we already have a tab selected listener for the ViewPager, remove it
            removeOnTabSelectedListener(mCurrentVpSelectedListener);
            mCurrentVpSelectedListener = null;
        }

        if (viewPager != null) {
            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
            mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
            addOnTabSelectedListener(mCurrentVpSelectedListener);

            final PagerAdapter adapter = viewPager.getAdapter();
            if (adapter != null) {
                // Now we'll populate ourselves from the pager adapter, adding an observer if
                // autoRefresh is enabled
                setPagerAdapter(adapter, autoRefresh);
            }

            // Add a listener so that we're notified of any adapter changes
            if (mAdapterChangeListener == null) {
                mAdapterChangeListener = new AdapterChangeListener();
            }
            mAdapterChangeListener.setAutoRefresh(autoRefresh);
            viewPager.addOnAdapterChangeListener(mAdapterChangeListener);

            // Now update the scroll position to match the ViewPager's current item
            setScrollPosition(viewPager.getCurrentItem(), 0f, true);
        } else {
            // We've been given a null ViewPager so we need to clear out the internal state,
            // listeners and observers
            mViewPager = null;
            setPagerAdapter(null, false);
        }

        mSetupViewPagerImplicitly = implicitSetup;
    }

代码基本无问题，最后走到setPagerAdapter中，继续追踪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();
    }

发现也无问题，最后转到populateFromPagerAdapter

    private void populateFromPagerAdapter() {
        removeAllTabs();

        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                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));
                }
            }
        }
    }

问题就出在这里，也就是说调用setupWithViewPager后会删除所有的tab

并且使用viewpage的adapter，自动设置tab为viewpage.getPageTitle()的字符而getPageTitle默认实现返回的是null

所以会出现不现实标签的情况

那这就好办了。也就是说TabLayout和ViewPage使用的时候不用设置tab，直接重写ViewPager的getPageTitle来设置标签的显示