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

一、介绍

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

滑动，达到业务需求

二、现实方案

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

1.需要引入库

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

2.控件三剑客

TabLayout+ViewPager2+TabLayoutMediator

TabLayout

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

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

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

    <com.google.android.material.tabs.TabLayoutandroid: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准备的资源数组长度一样，否则出现数据越界或者达不到自己的要求。

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

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

详细demo：

class TabLayoutActivity:FragmentActivity() {private val titleArray by lazy { resources.getStringArray(R.array.title) }private var viewPager: ViewPager2? = nullprivate var adapter: MyAdapter? = nullprivate var tablayout:TabLayout?=nullprivate var mediator:TabLayoutMediator?=nulloverride 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_VERTICALadapter = [e-mail]}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)}}
}