"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