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