android TabLayout+ViewPager有较多Tab，Tab随viewPager滚动

古城微笑少年丶 2022-06-13 06:48 150阅读 0赞

*  先上效果图

![SouthEast][]

这里只需要在xml中TabLayout下添加`app:tabMode="scrollable"`，即可实现ViewPager与TabLayout进行联动

<android.support.design.widget.TabLayout
            android:id="@+id/sign_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/MyTabLayoutTextAppearance" />

*  事件监听

tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    vp.setCurrentItem(tab.getPosition());
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
    
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });
            vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    TabLayout.Tab tab2 = tab.getTabAt(position);
                    if (!Util.isNull(tab2))
                        tab2.select();
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });

为什么要使用上面的监听而不使用`tab.setupWithViewPager(vp);`,因为使用这个绑定后会出

现tab中的文字无法显示的情况，至于原因有许多文章在解释这个问题，不做更多的解释。只做简单解释，就是这个方法一直查看源码，后会发现，

void populateFromPagerAdapter() {
           //就是因为这里调用了清除所有的tab而导致的问题
            removeAllTabs();
            ｝

这里推荐一篇文章：[http://www.open-open.com/lib/view/open1455716525589.html][http_www.open-open.com_lib_view_open1455716525589.html]

[SouthEast]: /images/20220613/3ca43fecf7f24850a7f3f7c917f17ca1.png
[http_www.open-open.com_lib_view_open1455716525589.html]: http://www.open-open.com/lib/view/open1455716525589.html