最近的新项目里老是会用到tablayout，便想着自己也总结下，加深印象，于是他来啦！
一、什么是TabLayout？
TabLayout是Android中的一个控件，常和ViewPager搭配使用，运用于tab切换viewpager，Google在升级了AndroidX之后，将TabLayout迁移到material包的com.google.android.material.tabs.TabLayout
二、常规使用
即TabLayout和viewpager（viewpager2也行）的搭配使用
1.xml文件
这是一个IM模块的界面，需要展示好友列表和聊天列表，使用的约束布局，tablayout用于切换viewpager和标题展示，最下面的一个图片是需求上的点击跳转搜索好友界面
<?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"//用layout作为父布局是因为databinding的原因 xmlns:app="http://schemas.android.com/apk/res-auto"> <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="48dp" android:background="@color/black" > <com.google.android.material.tabs.TabLayout android:id="@+id/im_contact_tab" android:layout_width="0dp" android:layout_height="wrap_content" app:tabBackground="@color/black" app:tabIndicatorGravity="bottom"//在tab的底部 app:tabIndicatorFullWidth="false" app:tabIndicator="@drawable/tab_indicator"//为了需求自定义的tabindicator app:tabIndicatorColor="#FFF65F2A"//颜色 android:layout_marginEnd="60dp" app:tabSelectedTextColor="@color/white"//选中后文本颜色 app:layout_constraintEnd_toStartOf="@id/im_add_img" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:tabTextColor="#ccffffff" /> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/im_contact_viewpager" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/im_contact_tab" app:layout_constraintBottom_toBottomOf="parent"> </androidx.viewpager2.widget.ViewPager2> <androidx.appcompat.widget.AppCompatImageView android:layout_width="24dp" android:layout_height="24dp" android:layout_marginEnd="16dp" android:id="@+id/im_add_img" android:src="@mipmap/ic_add_friend_new" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@id/im_contact_tab" app:layout_constraintTop_toTopOf="@id/im_contact_tab" app:layout_constraintBottom_toBottomOf="@id/im_contact_tab" /> </androidx.constraintlayout.widget.ConstraintLayout> </layout>
2.实现代码（kotlin）
class IMContactFragment : BaseBindFragment<FgContactLayoutBinding>() { //使用的databinding override val layout: Int get() = R.layout.fg_contact_layout private val viewPager: ViewPager2 by lazy { mBinding.imContactViewpager } private val tabLayout: TabLayout by lazy { mBinding.imContactTab } var fragments = mutableListOf<Fragment>()//fragment列表 var titles = mutableListOf("Friends","Message")//标题列表 companion object { fun getInstance(): IMContactFragment { return IMContactFragment() } } //重写initView方法（其实就是在父类的onCreate()方法里面，不用在意） override fun initView() { //添加fragment fragments.add(FriendListFragment())//好友列表 fragments.add(MessageListFragment())//聊天列表 //为viewpager2设置adapter，重写getItemCount方法和createFragment方法，就把fragment添加到viewpager里面了 viewPager.adapter = object : FragmentStateAdapter(this) { override fun getItemCount() = fragments.size override fun createFragment(position: Int) = fragments[position] } //为tablayout的tabItem添加标题，并且将tablayout和viewpager2绑定 TabLayoutMediator(tabLayout, viewPager) { tab, position -> tab.text = titles[position] }.attach() } //重写initListener方法（其实就是在父类的onCreate()方法里面，不用在意） override fun initListener() { //为tablayout添加select监听器，这儿主要是实现选中时的标题字体大小、颜色、粗细等发生改变 tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener { override fun onTabSelected(tab: TabLayout.Tab) { val customView = tab.customView if (customView == null) { tab.setCustomView(R.layout.tab_text_layout) } val textView: TextView? = tab.customView?.findViewById(android.R.id.text1) textView?.setTextAppearance(requireContext(), R.style.TabLayoutTextSelected) } override fun onTabUnselected(tab: TabLayout.Tab) { val customView = tab.customView if (customView == null) { tab.setCustomView(R.layout.tab_text_layout) } val textView: TextView? = tab.customView?.findViewById(android.R.id.text1) textView?.setTextAppearance(requireContext(), R.style.TabLayoutTextUnSelected) } override fun onTabReselected(tab: TabLayout.Tab) {} }) } } 3.tab选中和未选中时的文本 <style name="TabLayoutTextSelected"> <item name="android:textSize">24sp</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@color/white</item> </style> <style name="TabLayoutTextUnSelected"> <item name="android:textSize">14sp</item> <item name="android:textStyle">normal</item> <item name="android:textColor">@color/white_ccffffff</item> </style>
4、实现效果
三、常用属性介绍
tabIndicatorFullWidth=false/true tab的indicator是否和文本一样宽
tabIndicatorGravity tab的indicator在tabitem的展示位置，顶部，居中，底部等等
tabTextAppearance 文本的展示样式，有时候需求需要切换item后不止颜色改变，还需要改变大小，粗细等等，就可以自定义一个style文件，例如上面的例子是在代码里根据监听动态设置的，下面是在xml设置：
//这是自定义的style文件 <style name="TabLayoutTheme"> <item name="android:textSize">16sp</item> <item name="android:textStyle">bold</item> </style> //这是xml布局文件，设置app:tabTextAppearance属性 <com.google.android.material.tabs.TabLayout ... app:tabTextAppearance="@style/TabLayoutTheme" > 4.tabSelectedTextColor 和 tabTextColor 字面意思 5.app:tabIndicator="@drawable/tab_indicator" 设置自定义indicator <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <item android:gravity="center"> <shape> <size android:width="24dp" android:height="4dp" /> <solid android:color="#FFF65F2A" /> </shape> </item> </layer-list>
6.app:tabIndicatorColor="#FFF65F2A" //indicator的颜色
7.tabMode：tabMode属性用于设置tab是否可以横向滚动，可选的值有fixed(默认)、auto、scrollable。
8.tabIndicatorHeight：这个属性设置指示器的高度，如果我们不需要显示指示器，则可以设置tabIndicatorHeight 为0
