Android TabLayout+ViewPager2如何优雅的实现联动详解

一、介绍

Android开发过程中，我们经常会遇到滑动+导航栏的做法，之前的做法就是我们通过ViewGroup来转动，然后通过大量的自定义来完成，将导航栏item与viewpage

滑动，达到业务需求

二、现实方案

通过介绍，我们大概知道业务情况。针对这种需求，Google在material库中提供了一套解决方案，低代码就可以解决这类问题。

1.需要引入库

Kotlin 复制代码

implementation 'com.google.android.material:material:1.5.0'

2.控件三剑客

复制代码

TabLayout+ViewPager2+TabLayoutMediator

TabLayout

负责item的view，创建与管理，并提供了item的管理，和下划线的管理

app:tab开头，主要是tabview的管理，

复制代码

app:tabIndicator：主要是对下划线管理，更多资料，可以自己实现

XML 复制代码

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/layoutItem"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabBackground="@null"
        app:tabGravity="fill"
        app:tabIndicatorHeight="2dp"
        app:tabIndicatorColor="@color/teal_200"
        app:tabIndicatorGravity="bottom"
        app:tabMaxWidth="0.0dp"
        app:tabIndicatorFullWidth="false"
        app:tabMode="fixed"
        />

ViewPager2：

就是我们常见的viewpage2，只要实现完即可。

TabLayoutMediator：

是管理tablayout与viewpage2的联动，不需要额外的任何支持。所有的滑动与联动关系已处理好了，实现了低代码

注意：正常viewpage2的itemcount要和tablayout准备的资源数组长度一样，否则出现数据越界或者达不到自己的要求。

Kotlin 复制代码

       mediator=  TabLayoutMediator(tablayout!!,viewPager!!,{tab,position->
            tab.text=titleArray.get(position)
        })
        if (!mediator!!.isAttached)
        {
            mediator!!.attach()
        }

以上就是绑定关系，tab的处理是通过准备好的资源，需要对tab处理，可以在回调中进行。

详细demo：

Kotlin 复制代码

class TabLayoutActivity:FragmentActivity() {

    private val titleArray by lazy { resources.getStringArray(R.array.title) }
    private var viewPager: ViewPager2? = null
    private var adapter: MyAdapter? = null
    private var tablayout:TabLayout?=null
    private var mediator:TabLayoutMediator?=null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.layout_tablayout)
        viewPager = findViewById(R.id.viewpage)
        adapter = MyAdapter(this)
        viewPager?.apply {
            orientation = ViewPager2.ORIENTATION_VERTICAL
            adapter = this@TabLayoutActivity.adapter

        }
        tablayout=findViewById(R.id.layoutItem)
        mediator=  TabLayoutMediator(tablayout!!,viewPager!!,{tab,position->
            tab.text=titleArray.get(position)
        })
        if (!mediator!!.isAttached)
        {
            mediator!!.attach()
        }
        adapter!!.addData(titleArray.toMutableList())


    }


    inner class MyAdapter : FragmentStateAdapter {
        constructor(activity: FragmentActivity) : super(activity)

        private val mlsit = mutableListOf<Fragment>()
        override fun getItemCount(): Int {
            return mlsit.size
        }

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

        }

        public fun addData(list: List<String>) {
            list.forEachIndexed { index, it ->

                mlsit.add(MyFragment.getInstance(it))
            }

            notifyItemRangeChanged(0, mlsit.size)

        }
        
    }
}