自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)

TabLayout

相信大家都用过，2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件，其中就包含

TabLayout

，它可以配合

ViewPager

完成很好的效果。

一种类似于今日头条指示器，根据ViewPager的页面滑动，文字逐渐变色。

今日头条的顶部tab导航效果的实现，我们一般会用RadioGroup+Fragment+ViewPager来实现，适配器繁多，代码量大，今天我们来介绍TabLayout的使用。TabLayout为Android的Design库中的一个控件。首先我们来看一下运行的效果图：

ColorTrackTabLayout

先看下效果

使用

因为是继承TabLayout，所以用法跟TabLayout一模一样

//隐藏Indicator
mTab.setSelectedTabIndicatorHeight(0);
//设置左右内边距
mTab.setTabPaddingLeftAndRight(10,10);
mTab.setupWithViewPager(mViewPager);

原理

ColorTrackLayout

主要是继承了TabLayout，对它做了一些扩展。

既然是随着页面的滑动文字颜色渐变那么肯定少不了ViewPager的页面监听，这个在我们调用

setupWithViewPager

的时候TabLayout就已经添加监听。

private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
boolean implicitSetup) {
....

if (viewPager != null) {
mViewPager = viewPager;

// Add our custom OnPageChangeListener to the ViewPager
if (mPageChangeListener == null) {
//添加了滑动监听
mPageChangeListener = new TabLayoutOnPageChangeListener(this);
}
mPageChangeListener.reset();
viewPager.addOnPageChangeListener(mPageChangeListener);

// Now we'll add a tab selected listener to set ViewPager's current item
mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
addOnTabSelectedListener(mCurrentVpSelectedListener);

final PagerAdapter adapter = viewPager.getAdapter();
if (adapter != null) {
// Now we'll populate ourselves from the pager adapter, adding an observer if
// autoRefresh is enabled
setPagerAdapter(adapter, autoRefresh);
}

// Add a listener so that we're notified of any adapter changes
if (mAdapterChangeListener == null) {
mAdapterChangeListener = new AdapterChangeListener();
}
mAdapterChangeListener.setAutoRefresh(autoRefresh);
viewPager.addOnAdapterChangeListener(mAdapterChangeListener);

// Now update the scroll position to match the ViewPager's current item
setScrollPosition(viewPager.getCurrentItem(), 0f, true);
} else {
// We've been given a null ViewPager so we need to clear out the internal state,
// listeners and observers
mViewPager = null;
setPagerAdapter(null, false);
}
....

}

创建了mPageChangeListener并添加了监听

所以我们必须要重写

setupWithViewPager

删除掉原来的监听，换成我们自己的监听

mPageChangeListener = new TabLayoutOnPageChangeListener(this);

@Override
public void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh) {
super.setupWithViewPager(viewPager, autoRefresh);
try {
//通过反射找到mPageChangeListener
Field field = TabLayout.class.getDeclaredField("mPageChangeListener");
field.setAccessible(true);
TabLayoutOnPageChangeListener listener = (TabLayoutOnPageChangeListener) field.get(this);
if (listener != null) {
//删除自带监听
viewPager.removeOnPageChangeListener(listener);
mPageChangeListenter = new ColorTrackTabLayoutOnPageChangeListener(this);
mPageChangeListenter.reset();
viewPager.addOnPageChangeListener(mPageChangeListenter);
}
} catch (Exception e) {
e.printStackTrace();
}

}

还需要做的一点就是把TabLayout每一个的Tab布局替换成我们的。怎么替换呢？重写

addTab

，在添加的时候改成我们的布局

@Override
public void addTab(@NonNull Tab tab, int position, boolean setSelected) {
ColorTrackView colorTrackView = new ColorTrackView(getContext());
colorTrackView.setProgress(setSelected ? 1 : 0);
colorTrackView.setText(tab.getText() + "");
colorTrackView.setTextSize(mTabTextSize);
colorTrackView.setTag(position);
colorTrackView.setTextChangeColor(mTabSelectedTextColor);
colorTrackView.setTextOriginColor(mTabTextColor);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
colorTrackView.setLayoutParams(layoutParams);
tab.setCustomView(colorTrackView);

super.addTab(tab, position, setSelected);
if (position == 0) {
//默认选中第一个
setSelectedView(position);
}

setTabWidth(position, colorTrackView);
}

借鉴： www.weyye.me/detail/colo…

其关键就是将我们的布局利用setCustomView方法来设置上去。

源码链接 https://github.com/DingXianSen/DcColorTabLayout