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