TabLayout+ViewPager实现横向tab导航栏

效果

实现方案

• activity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initViewPager()
        initTabLayout()
    }

    private fun initViewPager() {
        addViews()
        viewPager.addOnPageChangeListener(TabLayoutOnPageChangeListener(tabLayout))
        setAdapter()
    }

    private fun addViews() {
        val view1 = LayoutInflater.from(this).inflate(R.layout.view_pager_1, null)
        val view2 = LayoutInflater.from(this).inflate(R.layout.view_pager_2, null)

        viewPager.addView(view1)
        viewPager.addView(view2)
    }

    private fun setAdapter() {
        viewPager.adapter = object : PagerAdapter() {
            override fun getCount(): Int {
                return viewPager.childCount
            }

            override fun isViewFromObject(view: View, obj: Any): Boolean {
                return view === obj
            }

            override fun instantiateItem(container: ViewGroup, position: Int): Any {
                return viewPager.getChildAt(position)
            }
        }
    }

    private fun initTabLayout() {
        tabLayout.addOnTabSelectedListener(object : BaseOnTabSelectedListener {

            override fun onTabSelected(tab: TabLayout.Tab?) {
                val position = tab!!.position
                viewPager.currentItem = position
            }

            override fun onTabReselected(p0: TabLayout.Tab?) {
            }

            override fun onTabUnselected(p0: TabLayout.Tab?) {
            }
        })
    }
}

• 布局文件 activity_main.xml

view_pager_1.xml

view_pager_2.xml

完整源代码

https://gitee.com/cxyzy1/tablayoutDemo