首先需要一个fragment数组来管理
private val fragmentArray = listOf(
HomeFragment(),
MessageCenterFragment(),
UserCenterFragment()
)
用一个实例来记录当前的fragment,还有定义对应数量的tab实例
private var currentFrag: Fragment? = null
private lateinit var tabHome: TabLayout.Tab
private lateinit var tabMessage: TabLayout.Tab
private lateinit var tabUser: TabLayout.Tab
初始化布局:
private fun initTabLayout() {
// 实例初始化
tabHome = tab_layout.newTab().setCustomView(createTabItem("首页", R.drawable.sel_home_tab_order))
tabMessage = tab_layout.newTab().setCustomView(createTabItem("消息",R.drawable.selector_home_tab_message))
tabUser = tab_layout.newTab().setCustomView(createTabItem("我的", R.drawable.sel_home_tab_user))
//添加到tabLayout
tab_layout.addTab(tabOrder)
tab_layout.addTab(tabMessage)
tab_layout.addTab(tabUser)
// 添加监听事件
tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
override fun onTabReselected(tab: TabLayout.Tab?) {
selectedTab(tab)
}
override fun onTabUnselected(tab: TabLayout.Tab?) {
}
override fun onTabSelected(tab: TabLayout.Tab?) {
selectedTab(tab)
}
})
// 默认选中首页
selectedTab(tabHome)
}
创建tab
private fun createTabItem(text: CharSequence?, iconSrc: Int?): View {
val view = layoutInflater.inflate(R.layout.home_tab_item, null)
view.findViewById<TextView>(R.id.home_tab_text).text = text
if (null != iconSrc) {
view.findViewById<ImageView>(R.id.home_tab_icon).setImageResource(iconSrc)
}
return view
}
选择tab的函数,里面实现了两个步骤
private fun selectedTab(tab: TabLayout.Tab?) {
// 1. 选择tab
onTabItemSelected(tab?.position ?: 0)
// 2. 更新tab状态
updateTabSelectedStatus(tab_layout, tab)
}
这个是选中函数
private fun onTabItemSelected(pos: Int) {
if (pos > fragmentArray.size) {
throw IllegalArgumentException("fragment is not ready")
}
val trans = supportFragmentManager.beginTransaction()
val fragment = fragmentArray[pos]
if (fragment == currentFrag)
return
if (currentFrag != null) {
trans.hide(currentFrag)
}
// 未添加过 进行添加 添加过展示
if (!fragment.isAdded) {
trans.add(R.id.layout_content, fragment)
} else {
trans.show(fragment)
}
currentFrag = fragment
trans.commitAllowingStateLoss()
}
更新选中状态
private fun updateTabSelectedStatus(container: TabLayout, selTab: TabLayout.Tab?) {
for (i in 0 until container.tabCount) {
val itemView = container.getTabAt(i)?.customView
val text = itemView?.findViewById<TextView>(R.id.home_tab_text)
val icon = itemView?.findViewById<ImageView>(R.id.home_tab_icon)
(i == selTab?.position).apply {
icon?.isSelected = this
text?.isSelected = this
}
}
}