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,此时标题已经可以正常的显示!
