ViewPager空隙问题

前言

今天迁移整个项目到AndroidX中，由于做样式用到了viewpager，无意中发现了一个小问题，在以前是没有遇到的，由此作为记录方便后续开发

布局代码

 <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:id="@+id/tabLayout"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@color/colorPrimary"
            android:layout_height="wrap_content"/>

由于tab太多采用滑动模式设置了：

 app:tabMode="scrollable"

问题1

布局显示出来后不显示文字，但是有下标：

image

解决办法： tabLayout的设置要放在setupWithViewPager跟setadapter后执行

   tabLayout.setupWithViewPager(viewPager)
   viewPager.adapter = pageAdapter


   for ((index, _) in fragmentList.withIndex()) {
            tabLayout.addTab(tabLayout.newTab())
            tabLayout.getTabAt(index)?.text = "自定义View$index"
        }

问题2
经过上面操作后发现滑动tablayout到最右边有巨大空隙

image

解决：
tabLayout.addTab的操作不能在setupWithViewPager跟setadapter后执行后执行,但是设置文本的时候要放在后执行，正确代码：

  for (index in 0 until  fragmentList.size) {
            tabLayout.addTab(tabLayout.newTab())
        }
        
  pageAdapter = MyPageAdapter(supportFragmentManager, fragmentList)
  tabLayout.setupWithViewPager(viewPager)
        viewPager.adapter = pageAdapter


  for ((index, _) in fragmentList.withIndex()) {
            tabLayout.getTabAt(index)?.text = "自定义View$index"
        }

总结

完整的代码：

    private fun initView() {
        fragmentList = arrayListOf()
        fragmentList.add(CustomFragment1())
        fragmentList.add(CustomFragment2())
        fragmentList.add(CustomFragment3())
        fragmentList.add(CustomFragment4())
        fragmentList.add(CustomFragment5())
        for (index in 0 until  fragmentList.size) {
            tabLayout.addTab(tabLayout.newTab())
        }
        pageAdapter = MyPageAdapter(supportFragmentManager, fragmentList)
        tabLayout.setupWithViewPager(viewPager)
        viewPager.adapter = pageAdapter

        for ((index, _) in fragmentList.withIndex()) {
            tabLayout.getTabAt(index)?.text = "自定义View$index"
        }
    }