TabLayout標(biāo)題不顯示
-
問題
tablayout 和viewPager綁定后標(biāo)題不顯示的
-
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() {
// 創(chuàng)建一個集合,裝填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());
// 創(chuàng)建ViewPager適配器
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
myPagerAdapter.setFragments(fragments);
String[] tabNames = {"全部訂單", "待確認(rèn)", "已確認(rèn)", "服務(wù)中", "待支付", "已完成", "已拒單",};
// TabLayout 指示器
//添加標(biāo)題必須在setupwidthViewPager之后否則不行
for (int i = 0; i < tabNames.length; i++) {
order_tl_tab
.addTab(order_tl_tab.newTab()
.setText(tabNames[i]));
}
// 給ViewPager設(shè)置適配器
order_vp.setAdapter(myPagerAdapter);
// 使用 TabLayout 和 ViewPager 相關(guān)聯(lián)
//會 清除tab文字
order_tl_tab.setupWithViewPager(order_vp);
}
}
- 注釋掉聯(lián)動效果后標(biāo)題顯示
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 中獲取到當(dāng)前的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中獲取到 當(dāng)前的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();
}
上面代碼主要是添加我們的數(shù)據(jù)變化的觀察者：
如果我們已經(jīng)有了一個PagerAdapter 則不會添加觀察者：
// If we already have a PagerAdapter, unregister our observer
最后執(zhí)行：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 標(biāo)題不顯示的原因
-
解決方案分析
既然我們在 tabLayout.setupWithViewPager(viewpager) 執(zhí)行之后 會清除 我們之前添加的的所有的Tab。那我們嘗試在 tabLayout.setupWithViewPager(viewpager) 之后再添加 Tab則Tab 是不是就顯示了呢？
-
修改代碼
private void initViewPager() {
// 創(chuàng)建一個集合,裝填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());
// 創(chuàng)建ViewPager適配器
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
myPagerAdapter.setFragments(fragments);
String[] tabNames = {"全部訂單", "待確認(rèn)", "已確認(rèn)", "服務(wù)中", "待支付", "已完成", "已拒單",};
// TabLayout 指示器 (記得自己手動創(chuàng)建4個Fragment,注意是 app包下的Fragment 還是 V4包下的 Fragment)
//添加標(biāo)題必須在setupwidthViewPager之后否則不行
for (int i = 0; i < tabNames.length; i++) {
order_tl_tab
.addTab(order_tl_tab.newTab()
.setText(tabNames[i]));
}
// 給ViewPager設(shè)置適配器
order_vp.setAdapter(myPagerAdapter);
// 使用 TabLayout 和 ViewPager 相關(guān)聯(lián)
order_tl_tab.setupWithViewPager(order_vp);
//手動添加標(biāo)題 ,必須在setupwidthViewPager之后否則不行
for (int i = 0; i < tabNames.length; i++) {
order_tl_tab.getTabAt(i).setText(tabNames[i]);
}
}
-
運行效果圖
image.png
OK,此時標(biāo)題已經(jīng)可以正常的顯示!
