android原生TabLayout之自定义指示器效果

"com.google.android.material.tabs.TabLayout" 这个玩意说起来大家都不陌生。结合viewPager或者单独使用。场景非常多。当然市面上的三方也数不胜数。但是毕竟是亲儿子。用起来终归是顺手一些。下面说一下TabLayout的具体用法细节:

首先,xml布局引入(此处为举例说明,具体属性用法自行百度):

xml 复制代码
<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_record_layout"
        android:layout_width="match_parent"
        android:layout_height="43dp"
        android:background="@color/transparent"
       
       	#具体属性用法自行百度
        app:tabIndicatorColor="#0E55FD"
         />

下面先说一下具体调用:

kotlin 复制代码
 for (i in list.indices) {
		tab_layout.addTab(tab_layout.newTab()) //动态创建tab
		//亦或
		tab_layout.newTab().setText(data.type_name).setTag(data.type_id) 
 }

然后就是动态添加TabLayout的样式,如果是属性可以满足就不需要,如果自带属性不能满足效果,则自定义样式,如下:

kotlin 复制代码
 for (i in 0 until tab_layout.tabCount) {
            val tab = tab_layout.getTabAt(i)
            tab?.customView = layoutInflater.inflate(R.layout.custom_tab, null)

            if (tab != null && tab.customView != null) {
                val abIcon = tab.customView!!.findViewById<ImageView>(R.id.iv_tab_item)
                val tabTitle = tab.customView!!.findViewById<TextView>(R.id.tv_tab_item)
                tabTitle.text = tab.text

                //把第一个设为默认选中
                if (i == 0) {
                    tabTitle.setTextColor(Color.parseColor("#0E55FD"))
                    tabTitle?.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
                    abIcon.isInvisible = false
                }
            }
        }
        

最后就是添加监听:

kotlin 复制代码
tab_layout.addOnTabSelectedListener(onTabSelectedListener)
//...
val onTabSelectedListener: TabLayout.OnTabSelectedListener =
        object : TabLayout.OnTabSelectedListener {
        	//选中监听
            override fun onTabSelected(tab: TabLayout.Tab) {
                if (tab.customView != null) {
                //获取自定义tab布局中的view
                    val tabIcon = tab.customView!!.findViewById<ImageView>(R.id.iv_tab_item)
                    val tabTitle = tab.customView!!.findViewById<TextView>(R.id.tv_tab_item)
                    tabTitle.text = tab.text
                    tabTitle.setTextColor(Color.parseColor("#0E55FD"))
                    tabTitle?.typeface = Typeface.defaultFromStyle(Typeface.BOLD)
                    tabIcon.isInvisible = false
                }
                type_id = mViewModel.typeList.get(tab.position).type_id
                mViewModel.getList(type_id)
            }

			// 未选中监听
            override fun onTabUnselected(tab: TabLayout.Tab) {
                if (tab.customView != null) {
                    val tabIcon = tab.customView!!.findViewById<ImageView>(R.id.iv_tab_item)
                    val tabTitle = tab.customView!!.findViewById<TextView>(R.id.tv_tab_item)
                    tabTitle.text = tab.text
                    tabTitle.setTextColor(Color.parseColor("#333333"))
                    tabTitle.typeface = Typeface.defaultFromStyle(Typeface.NORMAL);
                    tabIcon.isInvisible = true
                }
            }

            override fun onTabReselected(tab: TabLayout.Tab) {}
        }

最后,如果是ViewPager + TabLayout需要联动的话,则添加联动代码:

kotlin 复制代码
 //使用.attach()将TabLayout和ViewPager2进行绑定,如果没有这步操作将不会联动
        TabLayoutMediator(tab_layout, viewPager) { tab, position ->
            //根据position修改tab的样式和文字等
            tab.text = tabTitles[position]
        }.attach()

具体需结合场景,灵活使用。

END

相关推荐
2501_915909064 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915909064 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007474 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
介一安全4 小时前
【Frida Android】基础篇6:Java层Hook基础——创建类实例、方法重载、搜索运行时实例
android·java·网络安全·逆向·安全性测试·frida
沐怡旸7 小时前
【底层机制】【Android】深入理解UI体系与绘制机制
android·面试
啊森要自信7 小时前
【GUI自动化测试】YAML 配置文件应用:从语法解析到 Python 读写
android·python·缓存·pytest·pip·dash
下位子9 小时前
『AI 编程』用 Codex 开发识字小帮手应用
android·openai·ai编程
Zender Han9 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
君逸臣劳9 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter
叫我龙翔10 小时前
【MySQL】从零开始了解数据库开发 --- 基本查询
android·mysql·数据库开发