TabLayout是用来显示tab的控件，要使用TabLayout首先要引入design开发库：

implementation 'com.android.support:design:27.1.1'

属性说明：

属性	说明
app:tabSelectedTextColor	设置选中的tab的字体颜色
app:tabTextColor	设置tab默认显示的字体颜色
app:tabTextAppearance	设置tab中字体的样式
app:tabIndicatorColor	设置选中的tab下标指示器的颜色
app:tabIndicatorHeight	设置选中的tab下标指示器的高度
app:tabBackground	设置tablayout的背景颜色
app:tabMode	设置tab的显示方式fixed/scrollable。fixed是默认的，所有tab充满tablayout并且平均分布，数据太多会挤压；scrollable tab在超过屏幕宽度时可以滚动，不会被挤压。
app:tabPadding	设置每个tab的内边距
app:tabPaddingBottom	设置每个tab的底部边距
app:tabPaddingEnd	设置每个tab的右侧边距
app:tabPaddingStart	设置每个tab的左侧边距
app:tabPaddingTop	设置每个tab的顶部边距
app:tabContentStart	左边偏移量
app:tabGravity	center/fill tab居中显示(包裹)/整行显示(占满)

使用

  <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/white"
        app:tabBackground="@color/colorAccent"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/tabTextColor"
        app:tabTextAppearance="@style/tabTextAppearance"
        app:tabTextColor="@color/tabtextColorDefault" />

1. 可以使用代码添加tab

        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"))
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"))
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))
         //选中事件
        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(p0: TabLayout.Tab?) {
                //再次点击已经选中的tab
            }

            override fun onTabUnselected(p0: TabLayout.Tab?) {
                //取消选中的
            }

            override fun onTabSelected(p0: TabLayout.Tab?) {
                //选中
            }

        })

2. 也可以在xml布局中设置tab。

 <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabPadding="4dp">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/ic_launcher"
            android:text="tab1" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/ic_launcher"
            android:text="tab2" />

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@mipmap/ic_launcher"
            android:text="tab2" />

    </android.support.design.widget.TabLayout>

3. 还可以配合ViewPager使用

• 创建适配器

class YPagerAdapter(fm: FragmentManager, val titles: List<String>,
                    val fragments: List<BaseFragment>) : FragmentPagerAdapter(fm) {
    override fun getItem(p0: Int): Fragment {
        return fragments[p0]
    }

    override fun getCount(): Int {
        return fragments.size
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return titles[position]
    }

}

• 添加数据并显示

        val titles = ArrayList<String>()
        val fragments = ArrayList<TabFragment>()
        viewPager.adapter = YPagerAdapter(supportFragmentManager, titles, fragments)
        tabLayout.setupWithViewPager(viewPager)

QQ截图20181019223610.png

关于TabLayout的子布局TabItem

在官方控件源码中可以看出，TabItem 控件的属性很少：

public class TabItem extends View {
    public final CharSequence text;
    public final Drawable icon;
    public final int customLayout;

    public TabItem(Context context) {
        this(context, (AttributeSet)null);
    }

    public TabItem(Context context, AttributeSet attrs) {
        super(context, attrs);
        TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs, styleable.TabItem);
        this.text = a.getText(styleable.TabItem_android_text);
        this.icon = a.getDrawable(styleable.TabItem_android_icon);
        this.customLayout = a.getResourceId(styleable.TabItem_android_layout, 0);
        a.recycle();
    }
}

设置文字和布标

使用起来也比较简单在布局中设置

android:icon="@mipmap/ic_launcher"
android:text="tab2"

或者代码设置

tablayout.getTabAt(1)?.setIcon(R.mipmap.ic_launcher_round)?.setText("文字")

自定义TabItem布局

此外还有TabItem 可以设置自定义布局：

   <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@layout/layout_tab"
          />

自定义布局内容，在TabItem中设置属性

android:layout="@layout/layout_tab"

或者代码设置：

tablayout.getTabAt(1)?.setCustomView(R.layout.layout_tab)
或者
val view = LayoutInflater.from(context).inflate(R.layout.layout_tab, null)
view.tabText.text="代码设置tab文字"
tablayout.getTabAt(0)?.setCustomView(view)

如果同时设置了text、image和layout属性，那么只会显示自定义的内容视图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="15dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tabText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="tabItem自定义布局" />


</LinearLayout>

QQ截图20181019223455.png