Android TabLayout的使用与总结

最近的新项目里老是会用到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、实现效果

三、常用属性介绍

1. tabIndicatorFullWidth=false/true tab的indicator是否和文本一样宽
2. tabIndicatorGravity  tab的indicator在tabitem的展示位置，顶部，居中，底部等等
3. 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

        

参考文章：TabLayout的Indicator自定义宽度_文韬_武略的博客-CSDN博客 

TabLayoutMediator  |  Android Developers