android_TabLayout设置setupWithViewPager需要注意的问题

最近项目中使用了android design包中得TabLayout+ViewPager，和大家分享一下我发现了一个的问题。当通过之后，然后通过setupWithViewPager将TabLayout和ViewPager建立关联，这时会发现之前设置的tab消失了，具体的代码和如何查找源码解决见如何代码：

• 示例代码

mTl = (TabLayout) findViewById(.id_tablayout);
mVp = (ViewPager) findViewById(.id_vp);
//添加两个tab
(().setText("登陆"));
(().setText("注册"));
//让tablayout与viewpager建立关联关系
//(mVp);
(new PagerAdapter() {
    @Override
    public int getCount() {
        return 2;
    }
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        TextView textView = new TextView(());
        ("position:" + position);
        (textView);
        return textView;
    }
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((View) object);
    }
});

<?xml version="1.0" encoding="utf-8"?>
< xmlns:android="/apk/res/android"
    xmlns:app="/apk/res-auto"
    xmlns:tools="/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <
            android:id="@+id/id_tablayout"
            android:layout_width="match_parent"
            android:layout_height="50dip" />

        <.
            android:layout_width="match_parent"
            android:id="@+id/id_vp"
            android:layout_height="match_parent"></.>

    </LinearLayout>
</>

上面的代码运行之后，看起来好像没有什么问题，但是我一滑动viewpager发现，viewpager是可以正常的滑动切换不同的view，但是顶部的tab并没有跟着滑动。

• 解决viewpager与tablayout一起滑动

//让tablayout与viewpager建立关联关系
(mVp);

在tablayout中添加这段代码，将viewpager与tablayout建立关联。但是又发现一个问题，我之前调用addTab(().setText(“登陆”))的两个tab的数据呢？怎么没了？分析一下，我没有对viewpager和tablayout建立关系时，不会有这个问题，一建立联系就会出现问题，那么我们来瞅瞅(mVp);实现机制。

• 跟进源码setupWithViewPager探究

//...省略一部分代码
//处理从方法中传入的viewpager
if (viewPager != null) {
    mViewPager = viewPager;

    //①以下这部分代码是处理一些滑动的关联关系。例如滑动监听
    // Add our custom OnPageChangeListener to the ViewPager
    if (mPageChangeListener == null) {
        mPageChangeListener = new TabLayoutOnPageChangeListener(this);
    }
    ();
    (mPageChangeListener);
    // Now we'll add a tab selected listener to set ViewPager's current item
    mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
    addOnTabSelectedListener(mCurrentVpSelectedListener);

    //②以下这部分代码就可以解释为什么我们的tab设置的内容会不见了
    final PagerAdapter adapter = ();
    if (adapter != null) {
        // Now we'll populate ourselves from the pager adapter, adding an observer if
        // autoRefresh is enabled
        //将外部设置给viewpager的adapter取出来通过setPagerAdapter重新设置
        setPagerAdapter(adapter, autoRefresh);
    }
    ...
    }
    ...
} 


void setPagerAdapter(@Nullable final PagerAdapter adapter, final boolean addObserver) {
    if (mPagerAdapter != null && mPagerAdapterObserver != null) {
        // If we already have a PagerAdapter, unregister our observer
        (mPagerAdapterObserver);
    }
    //注册observer
    mPagerAdapter = adapter;
    if (addObserver && adapter != null) {
        // Register our observer on the new adapter
        if (mPagerAdapterObserver == null) {
            mPagerAdapterObserver = new PagerAdapterObserver();
        }
        (mPagerAdapterObserver);
    }
    // Finally make sure we reflect the new adapter
    //关键代码
    populateFromPagerAdapter();
}

void populateFromPagerAdapter() {
    //移除所有的tab
    //我们之前设置的tab就是在这里被移除的
    removeAllTabs();
    if (mPagerAdapter != null) {
        final int adapterCount = ();
        for (int i = 0; i < adapterCount; i++) {
           //重新添加tab，而setText得内容是在PagerAdapter中getPageTitle获取的，因此问题的答案就已经很明显了。 addTab(newTab().setText((i)), false);
        }
        // Make sure we reflect the currently set ViewPager item
        if (mViewPager != null && adapterCount > 0) {
            final int curItem = ();
            if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                selectTab(getTabAt(curItem));
            }
        }
    }
}

• 
  
• 修改代码显示tab内容
  

在Adapter中复写PagerAdapter中的getPageTitle方法就可以了，看过上面的源码可以知道在mVp和mTl建立联系之后，会将设置给TabLayout的tab清除，并且重写的创建，因此就没有必要手动的去创建Tab了。

@Override
public CharSequence getPageTitle(int position) {
    if(position ==0) {
        return "登陆";
    }else {
        return "注册";
    }