TabLayout的使用详解

1. 前言

TabLayout是用来实现tab导航的控件，放在android.support.design.widget包里面，使用它可以很简单有很完美的结合ViewPager或者FragmentManager实现tab导航，并且实现与ViewPager的联动等功能。 本文主要介绍了：

1. TabLayout的基本特性。
2. 如何与ViewPager联动。
3. 如何自定义TabLayout的显示。

---

2. 基本使用和常见属性

<android.support.design.widget.TabLayout
 android:id="@+id/fragment_discover_tably"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

1. tabMode
app:tabMode="fixed|scrollable"  
tabMode属性有两个取值:
fixed时，所有的tab会居中显示，是不可滑动的，
scrollable时，所有的tab会靠左显示，当tab数量很多时，就会呈现滑动的效果，这对适配小屏幕手机至关重要。


2. 导航条的高度和颜色
app:tabIndicatorHeight="3dp"
app:tabIndicatorColor="#af00"


3. tab的宽度限制
当文字很少时仍旧不会小于tabMinWidth
当文字过多时，也不会将tab撑的超过tabMaxWidth
app:tabMaxWidth="150dp"
app:tabMinWidth="60dp"


4. tab被选中或没有被选中时的颜色
app:tabTextColor="@color/black"
app:tabSelectedTextColor="@color/colorPrimary"


5. 更改Tab上面的TextView的详细显示
app:tabTextAppearance="@style/TabLayoutStyle"
<style name="TabLayoutStyle" parent="TextAppearance.Design.Tab">
 <item name="android:textSize">16sp</item>
 <item name="android:textStyle">normal</item>
</style>


6. 背景
app:tabBackground="@color/transparent"
设置tab的背景颜色，默认TabLayout点击时是有光晕效果的，使用该属性可以去掉光晕效果。

3. 与ViewPager联动

使用方法tabLy.setupWithViewPager(viewPager);，就可以了，但是需要注意的是写ViewPager时需要实现getTitle()方法，用来设置tab的标题。原先给Tab设置的标题将会被覆盖掉。

4. 自定义Tab显示

默认的TabLayout是可以显示文字和Icon的，定制度不是很高，有时候很难达到想要的效果，不过好在TabLayout开放了setCustomView(childView)这个API来支持我们自定义TabLayout的UI，当然自定义显示之后也损失了切换时颜色切换等效果，需要我们自己来处理，这边我模仿adapter的方式写了一个辅助类，用来更简单的实现自定义Tab显示时的显示和状态切换，源码很简单，主要是使用模板方法的方式，由 子类决定 并且 只关注 如何加载数据和更改状态显示的操作。

/**
 * Describe : TabLayout适配器,快速实现TabLayout自定义View数据加载
 * @author chendong
 */
public abstract class BaseTabLayoutAdapter<T> {

private Context                   mContext;
// 自定义布局layout文件
private int                       mResId;
// 数据源
private List<T>                   mDatas;
// 全部的控件，用来切换时改变显示
private List<TabLayoutViewHolder> mTabLayoutViewHolders;
// tabLayout
private TabLayout                 mTabLayout;
// 简化的tab点击事件
private OnTabSelectListener<T>    mOnTabSelectListener;

/**
 * Tab选中的接口
 *
 * @param <T>
 */
public interface OnTabSelectListener<T> {
void onSelect(int pos, T data);
    }

protected BaseTabLayoutAdapter(Context context, List<T> datas, int resId) {
        mDatas = datas;
        mContext = context;
        mResId = resId;
        mTabLayoutViewHolders = new ArrayList<>();
    }

public void attachTabLayout(TabLayout tabLayout) {
        attachTabLayout(tabLayout, 0);
    }

private void attachTabLayout(TabLayout tabLayout, int posSelect) {
        mTabLayout = tabLayout;
// 设置导航条高度=0
        tabLayout.setSelectedTabIndicatorHeight(0);
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
int position = tab.getPosition();
                updateStatus(mTabLayoutViewHolders.get(position), mDatas.get(position), true);
if (mOnTabSelectListener != null) {
                    mOnTabSelectListener.onSelect(position, mDatas.get(position));
                }
            }

@Override
public void onTabUnselected(TabLayout.Tab tab) {
                updateStatus(mTabLayoutViewHolders.get(tab.getPosition()), mDatas.get(tab.getPosition()), false);
            }

@Override
public void onTabReselected(TabLayout.Tab tab) {
                updateStatus(mTabLayoutViewHolders.get(tab.getPosition()), mDatas.get(tab.getPosition()), true);
            }
        });
// 初始化view,默认初始化为全部不选中
        View childView;
        TabLayoutViewHolder holder;
        TabLayout.Tab tab;
for (int i = 0; i < mDatas.size(); i++) {
            childView = LayoutInflater.from(mContext).inflate(mResId, tabLayout, false);
            holder = new TabLayoutViewHolder(childView);
            mTabLayoutViewHolders.add(holder);
            updateStatus(mTabLayoutViewHolders.get(i), mDatas.get(i), false);
            tab = tabLayout.newTab().setCustomView(childView);
            tabLayout.addTab(tab);
        }

// 选中初始化选中的那个
        TabLayout.Tab tabAt = tabLayout.getTabAt(posSelect);
if (tabAt != null)
            tabAt.select();
    }

/**
 * 抽象方法，更新控件状态显示
 * @param holder view holder
 * @param data 数据
 * @param isSelect 是否选中
 */
public abstract void updateStatus(TabLayoutViewHolder holder, T data, boolean isSelect);

public void setOnTabSelectListener(OnTabSelectListener<T> onTabSelectListener) {
        mOnTabSelectListener = onTabSelectListener;
    }

/**
 * 公共holder，用来存储和快速获取控件
 */
public static class TabLayoutViewHolder {
private View              parentView;
private SparseArray<View> mCacheViews;

public View getParentView() {
return parentView;
        }

        TabLayoutViewHolder(View parentView) {
this.parentView = parentView;
            mCacheViews = new SparseArray<>();
        }

public <V extends View> V getView(int resId) {
            V v = (V) mCacheViews.get(resId);
if (v == null) {
                v = (V) parentView.findViewById(resId);
if (v != null) {
                    mCacheViews.put(resId, v);
                }
            }
return v;
        }
    }
}


// 如何使用？
BaseTabLayoutAdapter<BeautifyToolTabData> baseTabLayoutAdapter =
new BaseTabLayoutAdapter<ModelData>(getContext(), tabDatas, R.layout.kiwi_item_beautify_tably) {
@Override
public void updateStatus(TabLayoutViewHolder holder, ModelData data, boolean isSelect) {
                        holder.<TextView>getView(R.id.tv_title).setText(data.getTitle());
                        holder.<ImageView>getView(R.id.iv_icon).setImageResource(isSelect ? data.getSelectRes() : data.getUnSelectRes());
                    }
                };
baseTabLayoutAdapter.setOnTabSelectListener(new BaseTabLayoutAdapter.OnTabSelectListener<ModelData>() {
@Override
public void onSelect(int pos, ModelData data) {
// 选中事件 
            }
        });
baseTabLayoutAdapter.attachTabLayout(mTabLayout);