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 = [email protected]

        }
        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)

        }
        
    }
}
相关推荐
fatiaozhang95272 小时前
中兴云电脑W102D_晶晨S905X2_2+16G_mt7661无线_安卓9.0_线刷固件包
android·adb·电视盒子·魔百盒刷机·魔百盒固件
louisgeek2 小时前
Kotlin 面试知识点
kotlin
CYRUS_STUDIO3 小时前
Android APP 热修复原理
android·app·hotfix
鸿蒙布道师3 小时前
鸿蒙NEXT开发通知工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
鸿蒙布道师3 小时前
鸿蒙NEXT开发网络相关工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
大耳猫3 小时前
【解决】Android Gradle Sync 报错 Could not read workspace metadata
android·gradle·android studio
ta叫我小白3 小时前
实现 Android 图片信息获取和 EXIF 坐标解析
android·exif·经纬度
dpxiaolong5 小时前
RK3588平台用v4l工具调试USB摄像头实践(亮度,饱和度,对比度,色相等)
android·windows
tangweiguo030519876 小时前
Android 混合开发实战:统一 View 与 Compose 的浅色/深色主题方案
android
老狼孩111226 小时前
2025新版懒人精灵零基础及各板块核心系统视频教程-全分辨率免ROOT自动化开发
android·机器人·自动化·lua·脚本开发·懒人精灵·免root开发