TabLayout 踩坑之 onTabSelected 沒有被回調的問題

qian.cheng 7年前發布 | 9K 次閱讀安卓開發 Android開發移動開發

一、問題描述

最近項目中有個需求：一個頁面頂部有3個tab,每一個tab分別展示一個不同的頁面，點擊tab 切換到對應頁面。進入頁面是默認選中第一個頁面。

這不很簡單的一個需求嘛？很明顯，用TabLayout 分分鐘實現，于是打開Android Studio ,幾分鐘后寫下了如下代碼：

public class TabActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_layout_ac2);
        mTabLayout = (TabLayout) findViewById(R.id.tab_layout2);

        mTabLayout.addTab(mTabLayout.newTab().setText("個性推薦"),true);//設置默認選中
        mTabLayout.addTab(mTabLayout.newTab().setText("歌單"));
        mTabLayout.addTab(mTabLayout.newTab().setText("主播電臺"));

        final List<Fragment> fragments = new ArrayList<>();
        fragments.add(FirstFragment.newInstance());
        fragments.add(SecondFragment.newInstance());
        fragments.add(ThirdFragment.newInstance());

        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.e("TAG","tab position:"+tab.getPosition());
                replaceFragment(fragments.get(tab.getPosition()));
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void replaceFragment(Fragment fragment){
        getSupportFragmentManager().beginTransaction().replace(R.id.tab_container,fragment).commit();
    }
}

寫完之后，一運行，發現tab 顯示出來了，第一個tab也選中了（效果如下圖），但是第一頁的內容咋沒展示出來呢？然后點擊tab切換，切換到后面2個tab時，可以加載出頁面，然后再次點擊第一個tab ,第一個tab 的頁面也展示出來了。

未展示頁面效果.png

第一次進來時，tab 下面的頁面內容沒有展示出來，很明顯，那就是第一次進來的時候onTabSelected 回調沒有被執行。因為我們是在onTabSelected 來加載頁面的。經過幾次反復測試（日志和斷點調試），確定了是第一次進入的時候，onTabSelected沒有被回調。

那么，為什么第一次進入的時候，onTabSelected沒有被回調了？反復檢查了幾次代碼，沒有發現問題。既然沒有發現問題，那么，我們就只有去看源碼了，看一下TabLayoout 初始化完成后，在什么時候調用的onTabSelected 回調方法？

二、源碼追蹤

我們要看一下源碼中TabLayout初始化后，在什么時候調用的onTabSelected。我們注意到，添加Tab的時候，有這么一個方法：

mTabLayout.addTab(mTabLayout.newTab().setText("個性推薦"),true);

addTab 方法有2個參數，第一個是要添加的Tab,第二個參數是是否設置為默認選中。上面這行代碼的意思是，添加一個Tab，并且設置這個tab為默認選中的Tab。

接下來就走讀一下源碼，看一下在何時回調的 onTabSelected 方法：

1,首先看一下OnTabSelectedListener 的設置

public void addOnTabSelectedListener(@NonNull OnTabSelectedListener listener) {
        if (!mSelectedListeners.contains(listener)) {
            mSelectedListeners.add(listener);
        }
    }

很簡單，就是將OnTabSelectedListener保存到一個列表里。沒有做其他事情。

2, 以 addTab 方法為入口，順藤摸瓜。

// 添加一個Tab ,并且設置為是否選中
    // 實際調用方法 addTab(@NonNull Tab tab, int position, boolean setSelected) 
    public void addTab(@NonNull Tab tab, boolean setSelected) {
        addTab(tab, mTabs.size(), setSelected);
    }

 //1, 首先將Tab 保存到一個列表中，記錄位置
 //2, 將tab 添加到TabLayout 中
 //3, 判斷時候選中（這就是我們要的）
 public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
        if (tab.mParent != this) {
            throw new IllegalArgumentException("Tab belongs to a different TabLayout.");
        }
        configureTab(tab, position);
        addTabView(tab);
        // 是否選中
        if (setSelected) {
            tab.select();
        }
    }

如上代碼，如果 setSelected 為 true ,就調用了tab 的 select() 方法，我們看一下 select() 方法：

public void select() {
            if (mParent == null) {
                throw new IllegalArgumentException("Tab not attached to a TabLayout");
            }
            mParent.selectTab(this);
        }

調用了Parent的 select 方法，Parent 是誰？當然是TabLayout 啦。所以繼續深入，看看TabLayout的 select 方法。

void selectTab(Tab tab) {
       //實際調用 selectTab(final Tab tab, boolean updateIndicator) 
        selectTab(tab, true);
    }

 // 
  void selectTab(final Tab tab, boolean updateIndicator) {
        final Tab currentTab = mSelectedTab;

        if (currentTab == tab) { // 如果新選中的Tab 和當前Tab 相同，回調onTabReselected 方法
            if (currentTab != null) {
                dispatchTabReselected(tab);
                animateToTab(tab.getPosition());
            }
        } else { // 如果不同，則回調 onTabSelected方法
            final int newPosition = tab != null ? tab.getPosition() : Tab.INVALID_POSITION;
            if (updateIndicator) {
                if ((currentTab == null || currentTab.getPosition() == Tab.INVALID_POSITION)
                        && newPosition != Tab.INVALID_POSITION) {
                    // If we don't currently have a tab, just draw the indicator
                    setScrollPosition(newPosition, 0f, true);
                } else {
                    animateToTab(newPosition);
                }
                if (newPosition != Tab.INVALID_POSITION) {
                    setSelectedTabView(newPosition);
                }
            }
            if (currentTab != null) {
                dispatchTabUnselected(currentTab);
            }
            mSelectedTab = tab; // 記錄選中的Tab 
            if (tab != null) {
                dispatchTabSelected(tab); // 處理選中Tab 
            }
        }
    }

TabLayout 的 selectTab 方法中最終調用了dispatchTabSelected方法：

private void dispatchTabSelected(@NonNull final Tab tab) {
        for (int i = mSelectedListeners.size() - 1; i >= 0; i--) {
            mSelectedListeners.get(i).onTabSelected(tab); // 找到了，在這里循環列表，分別調用onTabSelected 方法。
        }
    }

好了，到這里就找到了 onTabSelected 回調的地方了，有沒有很熟悉 mSelectedListeners ?當然了，在我們調用 addOnTabSelectedListener 設置監聽器的時候，就是保存到 mSelectedListeners 的。我們來捋一捋：

源碼流程.png

如上圖：

當我們執行addTab方法添加Tab的時候，最后會調用到 dispatchTabSelected 方法，在 dispatchTabSelected 方法里面調用 addOnTabSelectedListener 的 onTabSelected() 方法。但是這個時候，mSelectedListeners 為空(因為這個時候我們還沒有設置OnTabSelectedListener)，因此，就沒有回調到 onTabSelected 。

分析到此我們也就明白了，第一次沒有回調到 onTabSelected 方法，是因為我們寫的程序的順序問題，應該在添加Tab 之前添加OnTabSelectedListener 監聽。

三、解決方案

通過上面的源碼分析，我們知道了，第一次沒有執行OnTabSelected回調，是因為我們的代碼順序問題（這個是Google 的坑，設計得有問題啊），

因此，要想第一次進入的時候回調到OnTabSelected方法，我們應該先設置

addOnTabSelectedListener 監聽器，再添加Tab

，我們原來的程序順序調整一下：

// 1, 設置 addOnTabSelectedListener
        // 設置 addOnTabSelectedListener 必須在 addTab 之前。
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Log.e("TAG","tab position:"+tab.getPosition());
                replaceFragment(fragments.get(tab.getPosition()));
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        // 2.添加Tab 
        mTabLayout.addTab(mTabLayout.newTab().setText("個性推薦"),true);
        mTabLayout.addTab(mTabLayout.newTab().setText("歌單"));
        mTabLayout.addTab(mTabLayout.newTab().setText("主播電臺"));

通過如上調整，再運行程序，完美解決，第一次進入如下：

展示了頁面內容效果.png

四、總結

本篇文章是對TabLayout 使用過程中遇到的一個的坑記錄和總結，可能有的人不會遇到，也沒有人會注意到（如果你一開始就把順序寫對了的話），但是，如果遇到的話，要看源碼才知道原因。這也是我們解決問題的一種思路。很多時候，我們需要去了解一下原理和源碼的實現，這樣才能幫助我們更好的理解，以免使用的時候踩坑。

來自：https://juejin.im/post/58f489630ce463006bbb483e

本文由用戶 qian.cheng 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1492480795919.html

安卓開發 Android開發移動開發

TabLayout 踩坑之 onTabSelected 沒有被回調的問題

一、問題描述

二、源碼追蹤

三、解決方案

四、總結

相關經驗

相關資訊

相關文檔

目錄

TabLayout 踩坑之 onTabSelected 沒有被回調的問題

一、 問題描述

二、源碼追蹤

三、解決方案

四、總結

相關經驗

相關資訊

相關文檔

目錄

一、問題描述