Android 首页tab导航实现

首先需要一个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(R.id.home_tab_text).text = text
        if (null != iconSrc) {
            view.findViewById(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(R.id.home_tab_text)
            val icon = itemView?.findViewById(R.id.home_tab_icon)

            (i == selTab?.position).apply {
                icon?.isSelected = this
                text?.isSelected = this
            }
        }
    }

你可能感兴趣的:(Android 首页tab导航实现)