Android TabLayout+ViewPager2的简单用法（两个Android自带的控件）

效果图1

效果图2

MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.lifecycleOwner = this
        initView()
    }

    private val tabs = arrayOf(
        "首页" to R.drawable.ic_launcher_foreground,
        "商场" to R.drawable.ic_launcher_foreground,
        "我的" to R.drawable.ic_launcher_foreground
    )

    private fun initView() {
        //viewPager的适配器
        binding.viewPager.adapter = ViewPagerAdapter(this, tabs)
        //绑定tabLayout和viewPager
        TabLayoutMediator(
            binding.tabLayout, binding.viewPager, true, true
        ) { tab, position ->
            val binding = DataBindingUtil.inflate<ItemTabMainBinding>(
                layoutInflater,
                R.layout.item_tab_main,
                null,
                false
            )
            binding.tvTitle.text = tabs[position].first
            tab.customView = binding.root
        }.attach()
    }

}

activity_main

app:tabIndicator="@null"可以去掉底部移动的横线

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="@color/black" />

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="48dp" />
    </LinearLayout>


</layout>

ViewPagerAdapter

package maka.components.myviewpager2

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class ViewPagerAdapter(fa: FragmentActivity, private val tabs: Array<Pair<String, Int>>) :
    FragmentStateAdapter(fa) {

    override fun getItemCount(): Int {
        return tabs.size
    }

    override fun createFragment(position: Int): Fragment {
        return ViewPagerFragment.newInstance(tabs[position].first)
    }

}

ViewPagerFragment

package maka.components.myviewpager2

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import maka.components.myviewpager2.databinding.FragmentViewPagerBinding


private const val ARG_PARAM1 = "param1"

class ViewPagerFragment : Fragment() {

    private var param1: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            param1 = it.getString(ARG_PARAM1)
        }

    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        val binding = DataBindingUtil.inflate<FragmentViewPagerBinding>(
            inflater,
            R.layout.fragment_view_pager,
            container,
            true
        )
        binding.tvText.text = param1
        return binding.root
    }

    companion object {
        fun newInstance(param1: String) =
            ViewPagerFragment().apply {
                arguments = Bundle().apply {
                    putString(ARG_PARAM1, param1)
                }
            }
    }
}

TabLayout的常用参数

app:tabIndicatorColor ：指示线的颜色
app:tabIndicatorHeight ：指示线的高度
app:tabSelectedTextColor ： tab选中时的字体颜色
app:tabMode="scrollable" ： 默认是fixed，固定的；scrollable：可滚动的