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)

        }
        
    }
}
相关推荐
枷锁—sha几秒前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
Cao_Shixin攻城狮4 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
idjl8 小时前
Mysql测试题
android·adb
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
人生游戏牛马NPC1号11 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
星辰也为你祝福h13 小时前
Android原生Dialog
android
梁同学与Android13 小时前
Android ---【CPU优化】需要优化的原因及优化的地方
android
Misha韩14 小时前
React Native 基础tabBar和自定义tabBar - bottom-tabs
android·react native
iHero14 小时前
【Nextcloud】在 Ubuntu 22.04.3 LTS 上的 Nextcloud Hub 10 (31.0.2) 后台任务cron 的优化
android·linux·ubuntu·nextcloud