TabLayout标题不显示

TabLayout标题不显示

• 问题

tablayout 和viewPager绑定后标题不显示的

• bug效果图

• 核心代码分析

public class OrderActivity extends MyBaseActivity {
    @BindView(R.id.order_tl_tab)
    TabLayout order_tl_tab;
    @BindView(R.id.order_vp)
    ViewPager order_vp;

     @Override
    protected int layoutId() {
        return R.layout.activity_order;
    }

    @Override
    public void initUI() {
        super.initUI();
        initViewPager();
    }

  private void initViewPager() {
    // 创建一个集合,装填Fragment
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(new Order_Qbdd_Fragment());
        fragments.add(new Order_Dqr_Fragment());
        fragments.add(new Order_Yqr_Fragment());
        fragments.add(new Order_Fwz_Fragment());
        fragments.add(new Order_Dzf_Fragment());
        fragments.add(new Order_Ywc_Fragment());
        fragments.add(new Order_Yjd_Fragment());

        // 创建ViewPager适配器
        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        myPagerAdapter.setFragments(fragments);

        String[] tabNames = {"全部订单", "待确认", "已确认", "服务中", "待支付", "已完成", "已拒单",};
        // TabLayout 指示器 
      //添加标题必须在setupwidthViewPager之后否则不行
        for (int i = 0; i < tabNames.length; i++) {
            order_tl_tab
                    .addTab(order_tl_tab.newTab()
                            .setText(tabNames[i]));
        }

        // 给ViewPager设置适配器
        order_vp.setAdapter(myPagerAdapter);
        // 使用 TabLayout 和 ViewPager 相关联
        //会 清除tab文字
        order_tl_tab.setupWithViewPager(order_vp);
  }
}
   

• 注释掉联动效果后标题显示

order_tl_tab.setupWithViewPager(order_vp);

• 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();
//注意 此处  adapter 的判断     viewPager 中获取到当前的adapter  进行处理  下面查找到   setPagerAdapter方法：
            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;
    }

上面代码中对 adapter 的判断 我们 从viewPager中获取到 当前的adapter

• 查看setPagerAdapter的源码

   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();
    }

上面代码主要是添加我们的数据变化的观察者：
如果我们已经有了一个PagerAdapter 则不会添加观察者：
// If we already have a PagerAdapter, unregister our observer
最后执行：populateFromPagerAdapter();

• populateFromPagerAdapter

oid 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));
                }
            }
        }
    }

可以看到 此处 将我们添加的所有 Tab全部移除了。这就是 我们 tabLayout 标题不显示的原因

• 解决方案分析

既然我们在 tabLayout.setupWithViewPager(viewpager) 执行之后 会清除 我们之前添加的的所有的Tab。那我们尝试在 tabLayout.setupWithViewPager(viewpager) 之后再添加 Tab则Tab 是不是就显示了呢？

• 修改代码

    private void initViewPager() {
        // 创建一个集合,装填Fragment
        ArrayList<Fragment> fragments = new ArrayList<>();
        fragments.add(new Order_Qbdd_Fragment());
        fragments.add(new Order_Dqr_Fragment());
        fragments.add(new Order_Yqr_Fragment());
        fragments.add(new Order_Fwz_Fragment());
        fragments.add(new Order_Dzf_Fragment());
        fragments.add(new Order_Ywc_Fragment());
        fragments.add(new Order_Yjd_Fragment());

        // 创建ViewPager适配器
        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
        myPagerAdapter.setFragments(fragments);

        String[] tabNames = {"全部订单", "待确认", "已确认", "服务中", "待支付", "已完成", "已拒单",};
        // TabLayout 指示器 (记得自己手动创建4个Fragment,注意是 app包下的Fragment 还是 V4包下的 Fragment)
        //添加标题必须在setupwidthViewPager之后否则不行
        for (int i = 0; i < tabNames.length; i++) {
            order_tl_tab
                    .addTab(order_tl_tab.newTab()
                            .setText(tabNames[i]));
        }

        // 给ViewPager设置适配器
        order_vp.setAdapter(myPagerAdapter);
        // 使用 TabLayout 和 ViewPager 相关联
        order_tl_tab.setupWithViewPager(order_vp);

        //手动添加标题 ,必须在setupwidthViewPager之后否则不行
        for (int i = 0; i < tabNames.length; i++) {
            order_tl_tab.getTabAt(i).setText(tabNames[i]);
        }
    }

• 运行效果图

image.png

OK,此时标题已经可以正常的显示!