TabLayout的使用大全

1.什么是TabLayout

TabLayout提供了一个水平的布局用来展示Tabs。

2.TabLayout的基本使用方式(一般和ViewPager一起使用)

①布局

<android.support.design.widget.TabLayout
        android:id="@+id/tab_layout_homeTab"
        android:layout_width="match_parent"
        android:layout_height="46dp"/>

<android.support.v4.view.ViewPager
        android:id="@+id/view_pager_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

②ViewPager的适配器

public class FixPagerAdapter extends FragmentStatePagerAdapter {

    // Tabs上显示的title
    private String[] titles;
    // Tabs对应的fragment集合
    private List<Fragment> fragments;

    public FixPagerAdapter(FragmentManager fm,String[] titles,List<Fragment> fragments) {
        super(fm);
        this.titles = titles;
        this.fragments = fragments;
    }


    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments==null?0:fragments.size();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        Fragment fragment = null;
        try {
            fragment = (Fragment) super.instantiateItem(container, position);
        }catch (Exception e){}

        return fragment;
    }


    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

③TabLayout与ViewPager进行绑定

// ViewPager设置适配器
adapter = new FixPagerAdapter(getSupportFragmentManager(), titles, fragments);
view_pager.setAdapter(adapter);
// 绑定
tab_layout.setupWithViewPager(view_pager);

④默认的效果

TabLayot与ViewPager结合使用默认效果图

3.TabLayout的进阶(样式的修改)

• 字体大小修改(使用tabTextAppearance属性引用自定义style)

<style name="TabLayoutTextStyle">
      <item name="android:textSize">17dp</item>
</style>

<android.support.design.widget.TabLayout
        ...
        app:tabTextAppearance="@style/TabLayoutTextStyle" />

报异常(默认颜色为空错误)

Caused by: java.lang.NullPointerException: 
Attempt to invoke virtual method
'int android.content.res.ColorStateList.getDefaultColor()' on a null object reference

①解决方法一：自定义属性指定默认文本颜色

<style name="TabLayoutTextStyle">
    <item name="android:textSize">17dp</item>
    <item name="android:textColor">@color/colorPrimary</item>
</style>

②解决方法二：自定义style继承系统style,使用系统默认的文本颜色

<style name="TabLayoutTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
      <item name="android:textSize">17dp</item>
</style>

③解决方法三：布局添加文本颜色属性

<android.support.design.widget.TabLayout
        ...
        app:tabTextColor="@color/colorPrimary"
        app:tabTextAppearance="@style/TabLayoutTextStyle" />

• 默认字体颜色、选中字体颜色修改

// 未选中字体颜色
app:tabTextColor="@color/colorPrimary"
// 选中字体颜色
app:tabSelectedTextColor="@color/colorPrimaryDark"
// 代码动态设置
setTabTextColors(int normalColor, int selectedColor);

• 修改指示器颜色

app:tabIndicatorColor="@color/colorPrimaryDark"
// 代码动态设置
tab_layout_homeTab.setSelectedTabIndicatorColor();

修改指示器颜色效果

• 修改Tab背景(可以定义选择器，展示不同的点击态)

app:tabBackground="@drawable/tablayout_gray"

去除背景可以用@null
代码去除背景，通过源码发现直接.setBackgroundResource(0)即可移除背景

    /**
     * Set the background to a given resource. The resource should refer to
     * a Drawable object or 0 to remove the background.
     * @param resid The identifier of the resource.
     *
     * @attr ref android.R.styleable#View_background
     */
    @RemotableViewMethod
    public void setBackgroundResource(@DrawableRes int resid) {
        if (resid != 0 && resid == mBackgroundResource) {
            return;
        }

        Drawable d = null;
        if (resid != 0) {
            d = mContext.getDrawable(resid);
        }
        setBackground(d);

        mBackgroundResource = resid;
    }