最近项目中使用了android design包中得TabLayout+ViewPager，和大家分享一下我发现了一个的问题。当通过TabLayout.newTab之后，然后通过setupWithViewPager将TabLayout和ViewPager建立关联，这时会发现之前设置的tab消失了，具体的代码和如何查找源码解决见如何代码：
- 示例代码
mTl = (TabLayout) findViewById(R.id.id_tablayout);
mVp = (ViewPager) findViewById(R.id.id_vp);
//添加两个tab
mTl.addTab(mTl.newTab().setText("登陆"));
mTl.addTab(mTl.newTab().setText("注册"));
//让tablayout与viewpager建立关联关系
//mTl.setupWithViewPager(mVp);
mVp.setAdapter(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(container.getContext());
textView.setText("position:" + position);
container.addView(textView);
return textView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
});
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zeal.coordinatelayoutdemo.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/id_tablayout"
android:layout_width="match_parent"
android:layout_height="50dip" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:id="@+id/id_vp"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
上面的代码运行之后，看起来好像没有什么问题，但是我一滑动viewpager发现，viewpager是可以正常的滑动切换不同的view，但是顶部的tab并没有跟着滑动。
- 解决viewpager与tablayout一起滑动
//让tablayout与viewpager建立关联关系
mTl.setupWithViewPager(mVp);
在tablayout中添加这段代码，将viewpager与tablayout建立关联。但是又发现一个问题，我之前调用addTab(mTl.newTab().setText("登陆"))的两个tab的数据呢？怎么没了？分析一下，我没有对viewpager和tablayout建立关系时，不会有这个问题，一建立联系就会出现问题，那么我们来瞅瞅mTl.setupWithViewPager(mVp);实现机制。
- 跟进源码setupWithViewPager探究
//...省略一部分代码
//处理从方法中传入的viewpager
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);
//②以下这部分代码就可以解释为什么我们的tab设置的内容会不见了
final PagerAdapter adapter = viewPager.getAdapter();
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
mPagerAdapter.unregisterDataSetObserver(mPagerAdapterObserver);
}
//注册observer
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();
}
void populateFromPagerAdapter() {
//移除所有的tab
//我们之前设置的tab就是在这里被移除的
removeAllTabs();
if (mPagerAdapter != null) {
final int adapterCount = mPagerAdapter.getCount();
for (int i = 0; i < adapterCount; i++) {
//重新添加tab，而setText得内容是在PagerAdapter中getPageTitle获取的，因此问题的答案就已经很明显了。 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内容
在Adapter中复写PagerAdapter中的getPageTitle方法就可以了，看过上面的源码可以知道在mVp和mTl建立联系之后，会将设置给TabLayout的tab清除，并且重写的创建，因此就没有必要手动的去创建Tab了。
@Override
public CharSequence getPageTitle(int position) {
if(position ==0) {
return "登陆";
}else {
return "注册";
}
