Tablayout与ViewPager联动时不显示Tablayout上面的标题

Tablayout与ViewPager联动时不显示Tablayout上面的标题

---

简简单单，想写个东西，但是当你指尖碰触键盘的时候，发现bug与你处处作对，明明很简单的问题，但是为什么解决不了，苦恼ing…..就像心中有一万只草拟马在奔跑一样：
看图说话：



发现最上面的tablyout并没有显示文字，难道没有设置？？

package cn.ddh.administrator.pocket.fragment;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

import cn.ddh.administrator.pocket.R;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.caijingFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.guojiFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.guoneiFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.junshiFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.kejiFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.shehuiFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.shishangFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.tiyuFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.toutiaoFragment;
import cn.ddh.administrator.pocket.fragment.shouye_fragment.yuleFragment;

/**
 * Created by Administrator on 2016/12/30.
 */
public class ShouyeFragment extends Fragment {
    private ViewPager ViewPager;
    private List fragments;
    private MainPagerAdapter pagerAdapter;
    private List mTitleList = new ArrayList<>();//页卡标题集合
private TabLayout tabLayout;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_shouye, null);

        ViewPager= (android.support.v4.view.ViewPager) view.findViewById(R.id.viewPager_shouye);
        tabLayout= (TabLayout) view.findViewById(R.id.tl_shouye);


        //将tablayout和viewPager绑定在一起
        tabLayout.setupWithViewPager(ViewPager);

        initFragment();



        initTablayout();






        return view;
    }

    private void initTablayout() {


        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());




        //手动  添加标题  必须在 setupwidthViewPager  之后  否则不行
        tabLayout.getTabAt(0).setText("头条");
        tabLayout.getTabAt(1).setText("社会");
        tabLayout.getTabAt(2).setText("国内");
        tabLayout.getTabAt(3).setText("国际");
        tabLayout.getTabAt(4).setText("娱乐");
        tabLayout.getTabAt(5).setText("体育");
        tabLayout.getTabAt(6).setText("军事");
        tabLayout.getTabAt(7).setText("科技");
        tabLayout.getTabAt(8).setText("财经");
        tabLayout.getTabAt(9).setText("时尚");

    }

    private void initFragment() {

        // 准备fragments数据源
        fragments = new ArrayList();
        fragments.add(new toutiaoFragment());
        fragments.add(new shehuiFragment());
        fragments.add(new guoneiFragment());
        fragments.add(new guojiFragment());
        fragments.add(new yuleFragment());
        fragments.add(new tiyuFragment());
        fragments.add(new junshiFragment());
        fragments.add(new kejiFragment());
        fragments.add(new caijingFragment());
        fragments.add(new shishangFragment());
        pagerAdapter = new MainPagerAdapter(getChildFragmentManager());
        ViewPager.setAdapter(pagerAdapter);


    }




    /**
     * ViewPager的Adapter
     *
     * @author tarena
     */
    class MainPagerAdapter extends FragmentPagerAdapter {


        public MainPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

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

        @Override
        public int getItemPosition(Object object) {
            return super.getItemPosition(object);
        }

        @Override
        public long getItemId(int position) {
            return super.getItemId(position);
        }
    }
}

发现并不是没有设置。

  tabLayout.getTabAt(0).setText("头条");
        tabLayout.getTabAt(1).setText("社会");
        tabLayout.getTabAt(2).setText("国内");
        tabLayout.getTabAt(3).setText("国际");
        tabLayout.getTabAt(4).setText("娱乐");
        tabLayout.getTabAt(5).setText("体育");
        tabLayout.getTabAt(6).setText("军事");
        tabLayout.getTabAt(7).setText("科技");
        tabLayout.getTabAt(8).setText("财经");
        tabLayout.getTabAt(9).setText("时尚");

那又是为什么不显示，抱着对学习的好奇，开始了学习之旅：
我首先注释掉了我的viewpager和tablyout联动的代码，其实也就是一句话：

tabLayout.setupWithViewPager(ViewPager); 发现居然ok了：


这样一来，虽然上面是显示了，但是取消了联动效果
发现一个重大BUG，那么接下来问题将变得简单了，检查问题：

打开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： if autoRefresh 可自动刷新 我们添加一个 数据变化的观察者：
// Now we’ll populate ourselves from the pager adapter, adding an observer if
// autoRefresh is enabled

查看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 标题不显示的原因：

3，似乎我们 已经找到了原因 怎么 解决bug 呢？

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

        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());



        //将tablayout和viewPager绑定在一起
        tabLayout.setupWithViewPager(ViewPager);


        tabLayout.getTabAt(0).setText("头条");
        tabLayout.getTabAt(1).setText("社会");
        tabLayout.getTabAt(2).setText("国内");
        tabLayout.getTabAt(3).setText("国际");
        tabLayout.getTabAt(4).setText("娱乐");
        tabLayout.getTabAt(5).setText("体育");
        tabLayout.getTabAt(6).setText("军事");
        tabLayout.getTabAt(7).setText("科技");
        tabLayout.getTabAt(8).setText("财经");
        tabLayout.getTabAt(9).setText("时尚");

运行结果：

果然没让本少爷失望，so…就这样，继续敲代码。

笔记初期，还望各路大神相互照应，多多指教。

手抱拳谢过的姿势<xxx/>