尹star
尹star

TabLayout高端用法（一）

TabLayout提供了一个水平的布局用来展示Tabs，很多应用都有这样的设计，典型的有网易新闻，，知乎等。TabLayout就可以很好的完成这一职责，当然也或许各家应用的实现方式不尽相同，这里介绍下TabLayout的用法。

首先TabLayout一般都是配合Viewpager使用的，Viewpager里的Fragment随着顶部的Tab一起联动，这种场景再熟悉不过了。在没有TabLayout的日子里关于这种设计一般都是自己实现的。

  • 先来个简单通俗的代码：

上面代码的运行效果如下：

TabLayout高端用法（一）_第1张图片
E7C96D0A-4692-40B3-B1D7-08361A7793E7-75356-000684F41CA2CA41.gif
  • 为了使用TabLayout，我们要让Activity继承自AppCompatActivity，但有时候你项目里的BaseActivity却是继承自FragmentActivity的，这就尴尬了。其实没关系的， AppCompatActivity 也是extends FragmentActivity的。可以把BaseActivity extends AppCompatActivity。如果不想这么做也可以，可以指定当前Activity的theme为

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

然后build.gradle文件在dependencies里加上

compile 'com.android.support:design:25.0.0'

然后基本上就不会有什么问题了。

下面来解析下TabLayout的一些基本属性：

app:tabIndicatorColor ：指示条的颜色
app:tabIndicatorHeight ：指示条的高度
app:tabSelectedTextColor ： tab被选中时的字体颜色
app:tabTextColor ： tab未被选中时的字体颜色
app:tabMode="scrollable" ： 默认是fixed：固定的，标签很多时候会被挤压，不能滑动。

重要的属性基本就这些，其他简单的属性可以自己去摸索，这里选中和未选中的字体颜色，可以根据自己的设计自行修改，同样指示条的高度颜色也可以随意修改。

  • 但假如我的设计里不需要指示条怎么办，好像没发现隐藏的API，那也很简单。有两个思路：
    1：把指示条高度设为0：

app:tabIndicatorHeight="0dp"

2：把指示条的颜色设为透明：

app:tabIndicatorColor="@color/transparent"

效果如下：

TabLayout高端用法（一）_第2张图片
40FAEFFF-FF76-43D1-8DD9-98177B630AE4-75356-00068525B87F337E.gif

  • TabItem

    在高版本的design库里已经有了TabItem，TabItem是作为TabLayout的子View而配合使用的，点进去发现其实代码很简单，就是个自定义View。

public final class TabItem extends View {
    final CharSequence mText;
    final Drawable mIcon;
    final int mCustomLayout;

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

    public TabItem(Context context, AttributeSet attrs) {
        super(context, attrs);

        final TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs,
                R.styleable.TabItem);
        mText = a.getText(R.styleable.TabItem_android_text);
        mIcon = a.getDrawable(R.styleable.TabItem_android_icon);
        mCustomLayout = a.getResourceId(R.styleable.TabItem_android_layout, 0);
        a.recycle();
    }
}

所以当我们的需求能够明确知道Tab的个数时，可以在xml里直接添加TabItem。但是但是，心细的你不知道有没有发现问题，我在上面的代码中，tab明明设置的小写，但是运行出来确是大写：

事先申明我可没在代码里重新设置文本，就是这么操蛋。好在天无绝人之路，找到了一个属性叫app:tabTextAppearance，这是Tablayout的属性。TabItem代码简单到几乎没有什么属性可供设置，什么字体大小，颜色貌似都设置不了。
所以我们自己写了个样式，然后酱写：

app:tabTextAppearance="@style/MyTabLayoutTextAppearance"

MyTabLayoutTextAppearance里的代码如下：

这里的android:textAllCaps属性就是控制字体大小写的，TabLayout里默认是true，我们手动改成false即可，我们顺便设置了下字体。

但是但是，问题又来了，我设置的字体大小貌似没什么卵用，无论我怎么调节字体大小就是不变。呵呵，还是要从tabTextAppearance这个属性来着手。
下面我们把代码改成这样：

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

这下好了，字体的大小写解决了，字体大小也解决了。这样的属性我们找到了3组，