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"

基本使用

纯布局实现

<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>

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

<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);

效果图