Android Design Support Library - TabLayout的用法

TabLayout provides a horizontal layout to display tabs.
TabLayout提供了一个水平的布局用来展示Tabs。

特别说明

Caused by: java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.

在清单文件中设置如下代码即可：

android:theme="@style/Theme.AppCompat"

基本使用

1. 纯布局实现

     <android.support.design.widget.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 1"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 2"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tab 3"/>
    </android.support.design.widget.TabLayout> 

2. 布局+代码实现
   布局文件：

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabIndicatorColor="@color/white"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/gray"
        app:tabTextColor="@color/white" />

代码中:

TabLayout abLayout= (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

这两种实现方式，都能达到效果。

属性设置

颜色

• 选中字体的颜色

app:tabSelectedTextColor="@android:color/holo_orange_light"

• 未选中字体的颜色

app:tabTextColor="@color/colorPrimary"

• 指示器下标的颜色

app:tabIndicatorColor="@android:color/holo_orange_light"

• 整个TabLayout的颜色

app:tabBackground="color"

其他属性设置

• 设置文字的外貌

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"

• 改变指示器下标的高度

app:tabIndicatorHeight="4dp"

• 添加图片

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

• Tab的模式

<!-- 默认是fixed：固定tabs，并同时显示所有的tabs。scrollable：可滚动tabs，显示一部分tabs，在这个模式下能包含长标签和大量的tabs -->
app:tabMode="scrollable"

• Padding
  设置Tab内部的子控件的Padding

app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"

设置整个TabLayout的Padding

app:paddingEnd="xxdp"
app:paddingStart="xxdp"

• 内容的显示模式

app:tabGravity="center"//居中，如果是fill，则是充满

• Tab的宽度限制

app:tabMaxWidth="xxdp"
app:tabMinWidth="xxdp"

• Margin

// TabLayout开始位置的偏移量
app:tabContentStart="100dp"

• 监听事件

OnTabSelectedListener()
setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//选中了tab的逻辑
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未选中tab的逻辑
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次选中tab的逻辑
}
});

• ViewPager的联动

setupWithViewPager(Viewpager);