1 前言

以前没有写博客的习惯，需要什么东西都是直接搜索，然后再来看怎么使用，有什么需要注意的，时间久了也就忘了是怎么回事了，又得重复这个过程。比如这个今天要介绍的TabLyout，很久之前用过，最近又需要用到，但是已经忘了怎么使用了，这也是为什么最近开始在简书上开始记录的原因。废话不多说...

其实Android在5.1(22.2.0)的时候给我们提供了一个水平布局来显示标签TabLayout，实际应用中也有很多需要横向标签的应用场景。直接先来看个效果图(偷的网易的)：

2 TabLayout简单使用

今天这篇文章是奔着TabLayout的属性来的，就用最简单的使用方式来介绍它的属性。我们在xml文件中直接使用TabLayout：

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab1"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab2"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab3"/>

看上去还是有那么点标签的意思...接下来就正式介绍它的属性了。

3 属性介绍

背景颜色

app:tabBackground="@android:color/white"

选中tab字体颜色

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

未选中tab字体颜色

app:tabTextColor="@android:color/holo_blue_dark"

指示器颜色

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

设置完演的后的TabLayout:

指示器高度

app:tabIndicatorHeight="5dp"

tabY轴偏移量(没看出效果)

app:tabContentStart="100dp"

tab显示方式

app:tabGravity="center" //center：居中 fill：充满

tab最大最小宽度

app:tabMaxWidth="100dp"

app:tabMinWidth="100dp"

tab布局模式

app:tabMode="scrollable" //可取fixed 固定,scrollable 滚动，默认fixed：标签很多时候会被挤压，不能滑动。

Tab里内容的内边距

app:tabPadding="10dp"

app:tabPaddingStart="10dp"

app:tabPaddingEnd="10dp"

app:tabPaddingTop="10dp"

app:tabPaddingBottom="10dp"

tab文字大小设置

app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large"

以上就是TabLayout的基本属性，接下来我们用这些基本属性实现一个类似文章开头的效果:

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/tabLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabBackground="@android:color/white"

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

app:tabIndicatorHeight="2dp"

app:tabMode="scrollable"

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

app:tabTextColor="@android:color/darker_gray">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab1"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab2"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab3"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab4"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab5"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab6"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab7"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab8"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab9"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="tab10"/>

TabLayout属性就介绍到这里，接下来的文章会具体介绍它的使用。

附：