Android自定义TabLayout item并与ViewPager2关联使用

391 阅读1分钟

这里先吐槽一下TabLayout,都2023年了切换item时仅支持更改颜色,连更改字体大小都需要自定义。。

下面直接上代码:

1.首先初始化ViewPager2

vp2.adapter = object : FragmentStateAdapter(manager, lifecycle) {
    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }

}
vp2.offscreenPageLimit = if (fragments.size == 0)
    { OFFSCREEN_PAGE_LIMIT_DEFAULT }
    else {
        fragments.size
    }

2.关联TabLayout和ViewPager2

TabLayoutMediator(tl, vp2) { tab, position ->
//在这里,我们不需要对tab进行修改
    }.attach()

3.设定自定义item

//tabs 是标题的集合
var textView:TextView?
//循环填充数据
for (i in tabs.indices){
    val tab =binding.tlShortPlay.getTabAt(i)
    //设置自定义view
    tab!!.setCustomView(R.layout.tab_item)
    textView = tab.customView?.findViewById(R.id.tvTitle)
    textView?.text =tabs[i]
     //默认选择第一项,对其进行样式更改
    if (i == 0 ){
        textView?.isSelected = true
        textView?.textSize =20f
    }
}

4.TabLayout增加item切换监听

tl.addOnTabSelectedListener(object :TabLayout.OnTabSelectedListener{
    override fun onTabSelected(tab: TabLayout.Tab) {
        val mTextView = tab.customView?.findViewById<TextView>(R.id.tvTitle)
        mTextView?.isSelected =true
        mTextView?.textSize =20f
    }

    override fun onTabUnselected(tab: TabLayout.Tab) {
        val mTextView = tab.customView?.findViewById<TextView>(R.id.tvTitle)
        mTextView?.isSelected =false
        mTextView?.textSize =17f
    }

    override fun onTabReselected(tab: TabLayout.Tab) {
    }

})