Kotlin + AndroidX + Tablayout + ViewPager + Fragment 实现Tab切页

1.前沿

Google已经受够了V4,V7包的各种冲突.所以直接不再维护V4,V7包了.以后就统一使用AndroidX.

2.gradle配置:

除了原有的androidX的库,还需要使用material库

dependencies {
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'com.google.android.material:material:1.2.0-alpha01'
}

3.实现逻辑

3.1主要实现点

1.viewPager加载Fragment

2.tabLayout加载自定义tabView

3.加载数据

我们再来看看哪些是不变的,哪些是可能改变的.首先viewPager加载Fragment我觉得是基本不变的;其次自定义tabView同一个系统或者同一个app风格几乎也是不变的.你写好了可以直接给别人用;最后加载数据.我觉得是最有可能变化的.今天加个tab页,明天删了,后天在加回来.好接下来我们就按照这种思路来实现代码

3.2代码实现

3.2.1顶层TabLayout主要代码

暴露给外部使用的就一个函数setupWithViewPager,用来生成viewPager信息,建立tab与viewPager的联动

abstract class MaterialTabLayout : TabLayout, TabLayout.OnTabSelectedListener {
    ...

    override fun onTabSelected(tab: Tab) {
        viewPager?.setCurrentItem(tab.position, true)
    }

    fun setupWithViewPager(
        viewPager: MaterialViewPager, fragmentManager: FragmentManager
    ) {
        this.viewPager = viewPager
        this.fragmentManager = fragmentManager
        setUpTabs()
        addOnTabSelectedListener(this)
        tabLayoutOnPageChangeListener = TabLayoutOnPageChangeListener(this)
        viewPager.run {
            addOnPageChangeListener(tabLayoutOnPageChangeListener!!)
            adapter = TabFragmentStatePagerAdapter(fragmentManager, tabs)
        }
        addTabs()
    }

    fun addCustomTab(tagId: Int, fragmentClassName: String) {
        val viewPageInfo = ViewPagerInfo(
            tagId,
            fragmentManager?.fragmentFactory!!.instantiate(
                ClassLoader.getSystemClassLoader(), fragmentClassName
            )
        )
        tabs.add(viewPageInfo)
    }

    abstract fun setUpTabs()

    abstract fun addTabs()

    private class TabFragmentStatePagerAdapter : FragmentPagerAdapter {

        var viewPagers: MutableList<ViewPagerInfo> = mutableListOf()

        constructor(fm: FragmentManager, viewPagers: MutableList<ViewPagerInfo>)
                : super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
            this.viewPagers.run {
                clear()
                addAll(viewPagers)
            }
        }

        override fun getItem(position: Int) = viewPagers[position].fragment

        override fun getCount() = viewPagers.size
    }


    data class ViewPagerInfo(val tagId: Int, val fragment: Fragment)
}

3.2.2次顶层TabLayout主要代码

这个类主要负责tabView组装,和tabView点击时状态的变化

abstract class CustomTabLayout : MaterialTabLayout {


    override fun addTabs() {
        for (i in 0 until tabs.size) {
            var customTabView = CustomTabView(context)
            customTabView.setText(tabs[i].tagId)
            addTab(newTab().setCustomView(customTabView))
        }
    }

    override fun onTabSelected(tab: Tab) {
        super.onTabSelected(tab)
        (tab.customView as CustomTabView).setTextSelectedStyle()
    }

    override fun onTabUnselected(tab: Tab) {
        super.onTabUnselected(tab)
        (tab.customView as CustomTabView).setTextUnSelectedStyle()
    }

    ...

    class CustomTabView : MaterialTabView {

        override var layoutId: Int
            get() = R.layout.layout_custom_tab
            set(value) {
                layoutId = R.layout.layout_custom_tab
            }
        ...        
    }

}

3.2.3业务TabLayout

自定义tab的个数,每个tab页的标签和对应的fragment

class UserTabLayout : CustomTabLayout {
    override fun setUpTabs() {
        addCustomTab(R.string.tab_1, Tab1Fragment::class.java.name)
        addCustomTab(R.string.tab_2, Tab2Fragment::class.java.name)
    }
    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
}

https://github.com/ThinkJarvis/AndroidXTabFragment