Tablayout + ViewPager2 + Fragmen

Tablayout

1、效果图

2、属性介绍

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#FFFFFFFF"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        app:tabIndicator="@drawable/layer_tab_indicator"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="3dp"
        app:tabMinWidth="50dp"
        app:tabPadding="0dp"
        app:tabPaddingBottom="4dp"
        app:tabPaddingEnd="10dp"
        app:tabPaddingStart="10dp"
        app:tabPaddingTop="0dp"
        app:tabRippleColor="@null"
        app:tabTextAppearance="@style/CustomTabLayoutTextAppearance" />

app:tabRippleColor ：可控制tab被点击时不显示波纹
app:tabGravity ：tab的填充方式
app:tabIndicatorColor ：指示线的颜色
app:tabIndicatorHeight ：指示线的高度
app:tabIndicatorFullWidth ：指示线是否和标签等长
app:tabSelectedTextColor ： tab选中时的字体颜色
app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的

3、常见问题

• 取消tab点击水波纹

  app:tabRippleColor="@null"
  

• 设置指示线固定长度、宽度、圆角方法

  app:tabIndicator="@drawable/layer_tab_indicator"
  app:tabIndicatorFullWidth="false"
  app:tabIndicatorHeight="3dp"
  

  layer_tab_indicator

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item
       android:width="18dp"
       android:gravity="center|bottom">
       <shape>
           <corners android:radius="1.5dp" />
           <size android:height="3dp" />
           <solid android:color="#FF32BE4A" />
       </shape>
   </item>
  </layer-list>
  

  • 设置指示线到文本的距离,如下图红线的距离

    
    image.png
    

    1、设置 layout_height的具体值
    2、设置tabPaddingBottom
    例如设置这个距离是4dp，则需要文本的高度+4dp 得出整个tab的高度，这里不加上指示线的高度，因为指示线是包含在tab的高度中的。

     android:layout_height="40dp"
     app:tabPaddingBottom="4dp"
     app:tabIndicatorHeight="3dp"
    

  • 设置tab标签中的距离等宽

    
    image.png

     app:tabGravity="fill"
     app:tabPaddingEnd="10dp"
     app:tabPaddingStart="10dp"
    

• 设置tab文本点击更改字体大小
  需要自定义tab的view

  private fun setTextStyle(view: View?, tabText: String, select: Boolean) {
     if (view == null) {
         return
     }
     val tv: TextView = view.findViewById(R.id.tv_text)
     if (select) {
         tv.textSize = 15f
         tv.setTextColor(Color.parseColor("#FF333333"))
         tv.setTypeface(Typeface.DEFAULT_BOLD)
     } else {
         tv.textSize = 14f
         tv.setTextColor(Color.parseColor("#FF333333"))
         tv.setTypeface(Typeface.DEFAULT)
     }
     tv.text = if (TextUtils.isEmpty(tabText)) tv.text else tabText
  }
  
  private fun initListener() {
     tablayout.addOnTabSelectedListener(object : OnTabSelectedListener {
         override fun onTabSelected(tab: TabLayout.Tab) {
             //设置tab选中状态下的文本状态
             setTextStyle(tab.customView, "", true)
         }
  
         override fun onTabUnselected(tab: TabLayout.Tab) {
             //设置tab非选中状态下的文本状态
             setTextStyle(tab.customView, "", false)
         }
  
         override fun onTabReselected(tab: TabLayout.Tab) {}
     })
  }
  

设置默认选中第一个tab

tabLayoutMediator = TabLayoutMediator(
      tablayout, viewPager2
       ) { tab, position ->
           val view = LayoutInflater.from(this@CustomTabActivity)
               .inflate(R.layout.item_tab_tablayout, tablayout, false)
           setTextStyle(view, tabTitleList.get(position), position == 0);
           tab.setCustomView(view);
       }
       tabLayoutMediator.attach()

 <TextView
      android:id="@+id/tv_text"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center" />

4、与viewpager2一起使用

viewpager2的简介网上搜索一大堆，不做介绍，直接上代码

private lateinit var tabLayoutMediator: TabLayoutMediator
private val tabTitleList = arrayListOf<String>("First", "Second", "Third", "Fourth","fifth","sixth","seventh","eighth")
private val fragmentList = arrayListOf<TabFragment>()

private fun initTabLayout() {
      for (index in 0 until tabTitleList.size) {
          val tabFragment = TabFragment.create(tabTitleList[index])
          fragmentList.add(tabFragment)
      }
      //构建viewpagerAdapter
      val customViewPager2Adapter =
          CustomViewPager2Adapter(supportFragmentManager, lifecycle, fragmentList)
      viewPager2.adapter = customViewPager2Adapter
      viewPager2.offscreenPageLimit = 1
      tabLayoutMediator = TabLayoutMediator(
          tablayout, viewPager2
      ) { tab, position ->
          val view = LayoutInflater.from(this@CustomTabActivity)
              .inflate(R.layout.item_tab_tablayout, tablayout, false)
          setTextStyle(view, tabTitleList.get(position), position == 0);
          tab.setCustomView(view);
      }
      //这里一定要执行attach方法，不然配置是无效的
      tabLayoutMediator.attach()
  }

adapter代码

class CustomViewPager2Adapter(
  fragmentManager: FragmentManager,
  lifecycle: Lifecycle,
  fragmentList: List<Fragment>
) : FragmentStateAdapter(fragmentManager, lifecycle) {

  private var fragmentList: List<Fragment> = arrayListOf<Fragment>()

  init {
      this.fragmentList = fragmentList
  }

  override fun getItemCount(): Int {
      return fragmentList.size
  }

  override fun createFragment(position: Int): Fragment {
      return fragmentList.get(position)
  }
}

未完待续……