TabLayout源码解析和仿简书首页TabLayout效果
初衷：想学习下源码，刚好就拿TabLayout开刀。正好产品和UI提了需求做成简书那样的效果。
本来是想自己写一个的，但是ondraw里面画了几个文字textview之后，觉得可能还是在TabLayout之上二次开发来的容易。
1，TabLayout类结构
两个注解一个接口七个类，70来个方法还有一些常量变量域。
2.实现效果
3实现过程
对比原生的tablayou和简书的，你会发现几处不同，一是简书的tabIndicator是圆角矩形，二是背景图的宽度是跟随文字宽度变化的。
首先呢，
我们熟知tablayout常规使用如下:
private void inittb2() {
FragmentPagerAdapter fragmentPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return MyFragment.newInstance(position);
}
@Override
public int getCount() {
return titles.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
};
vp2.setAdapter(fragmentPagerAdapter);
tb2.setupWithViewPager(vp2);
跟进去setupWithViewPager()
public void setupWithViewPager(@Nullable ViewPager viewPager) {
setupWithViewPager(viewPager, true);
}
public void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh) {
setupWithViewPager(viewPager, autoRefresh, false);
}
private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
boolean implicitSetup) {
if (mViewPager != null) {
// If we've already been setup with a ViewPager, remove us from it
if (mPageChangeListener != null) {
mViewPager.removeOnPageChangeListener(mPageChangeListener);
}
if (mAdapterChangeListener != null) {
mViewPager.removeOnAdapterChangeListener(mAdapterChangeListener);
}
}
if (mCurrentVpSelectedListener != null) {
// If we already have a tab selected listener for the ViewPager, remove it
removeOnTabSelectedListener(mCurrentVpSelectedListener);
mCurrentVpSelectedListener = null;
}
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); ------------tips1
}
// 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);
}
mSetupViewPagerImplicitly = implicitSetup;
}
上面主要是tablayout跟viewpager滑动之间的关系绑定
从tips1的地方一直跟进去你会发现
private void addTabView(Tab tab) {
final TabView tabView = tab.mView;
mTabStrip.addView(tabView, tab.getPosition(), createLayoutParamsForTabs());
}
回到第一张类结构图，我知道了每一个tabItem是添加在private final SlidingTabStrip mTabStrip在这个对象中的，
然后我在SlidingTabStrip 的draw方法看到了
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
// Thick colored underline below the current selection
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
}
}
即是绘制滑动条的代码。
我将其改为：
@Override
protected void dispatchDraw(Canvas canvas) {
// Thick colored underline below the current selection
RectF r2 = new RectF(); //RectF对象
r2.left = mIndicatorLeft; //左边
r2.top = (getHeight() - mSelectedIndicatorHeight) / 2; //上边
r2.right = mIndicatorRight; //右边
r2.bottom = r2.top + mSelectedIndicatorHeight;
mSelectedIndicatorPaint.setAntiAlias(true);
if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
canvas.drawRoundRect(r2, mSelectedIndicatorHeight / 2, mSelectedIndicatorHeight / 2, mSelectedIndicatorPaint);
}
super.dispatchDraw(canvas);
}
请注意我这里用了dispatchdraw，这个方法我找了很久，我尝试把tabindicator的高度设置为30，发现他会把文字挡住。我就百度搜索关键字
我百度了很多，没找到想要的，基本都是setLayer这个方法相关，很多博客也是讲的是draw的时候两个图形隐藏与显示还有透明度的关系
终于，
我找到了，
然后成功将tabIndicator绘制到了文字下方。嘤嘤嘤，当时还是很开心的。
然后呢
它的宽度是平局值分布的。我从draw方法里知道绘制tabIndicator的时候需要两个参数mIndicatorLeft 、mIndicatorRight
然后代码里搜索发现：
private void updateIndicatorPosition() {
final View selectedTitle = getChildAt(mSelectedPosition);
int left, right;
if (selectedTitle != null && selectedTitle.getWidth() > 0) {
left = selectedTitle.getLeft();
right = selectedTitle.getRight();
if (mSelectionOffset > 0f && mSelectedPosition < getChildCount() - 1) {
// Draw the selection partway between the tabs
View nextTitle = getChildAt(mSelectedPosition + 1);
left = (int) (mSelectionOffset * nextTitle.getLeft() +
(1.0f - mSelectionOffset) * left);
right = (int) (mSelectionOffset * nextTitle.getRight() +
(1.0f - mSelectionOffset) * right);
}
} else {
left = right = -1;
}
setIndicatorPosition(left, right);
}
通过一次次的断点调试，发现left，right的取值还是决定于selectedTitle.getLeft()和
selectedTitle.getRight()。
然后我看了SlidingTabStrip的onMeasure方法和TabView的onMeasure方法并没有发现什么端倪。
我的tablayout是设置为可滚动的scrollable，然后七个字的tab背景也能包裹，两个字和三个字的背景宽度差不多长，所以我想是不是tab有一个最小宽度然后自适应的。
然后我发现
mScrollableTabMinWidth = res.getDimensionPixelSize(R.dimen.design_tab_scrollable_min_width);
private int getTabMinWidth() {
if (mRequestedTabMinWidth != INVALID_WIDTH) {
// If we have been given a min width, use it
return mRequestedTabMinWidth;
}
// Else, we'll use the default value
return mMode == MODE_SCROLLABLE ? mScrollableTabMinWidth : 0;
}
所以我在dimes里面design_tab_scrollable_min_width设置了一个较小的值，
果然就是宽度自动包裹了。
宽度的问题解决了，但是滑动的时候我发现相邻一个tab滑动的时候很匀称，但是间隔几个tab的时候滑动不自然。于是我找到了下面代码：
void animateIndicatorToPosition(final int position, int duration) {
if (mIndicatorAnimator != null && mIndicatorAnimator.isRunning()) {
mIndicatorAnimator.cancel();
}
final boolean isRtl = ViewCompat.getLayoutDirection(this)
== ViewCompat.LAYOUT_DIRECTION_RTL;
final View targetView = getChildAt(position);
if (targetView == null) {
// If we don't have a view, just update the position now and return
updateIndicatorPosition();
return;
}
final int targetLeft = targetView.getLeft();
final int targetRight = targetView.getRight();
final int startLeft;
final int startRight;
if (Math.abs(position - mSelectedPosition) <= 1) {
// If the views are adjacent, we'll animate from edge-to-edge
startLeft = mIndicatorLeft;
startRight = mIndicatorRight;
} else {
// Else, we'll just grow from the nearest edge
final int offset = dpToPx(MOTION_NON_ADJACENT_OFFSET);
if (position < mSelectedPosition) {
// We're going end-to-start
if (isRtl) {
startLeft = startRight = targetLeft - offset;
} else {
startLeft = startRight = targetRight + offset;
}
} else {
// We're going start-to-end
if (isRtl) {
startLeft = startRight = targetRight + offset;
} else {
startLeft = startRight = targetLeft - offset;
}
}
}
if (startLeft != targetLeft || startRight != targetRight) {
ValueAnimator animator = mIndicatorAnimator = new ValueAnimator();
animator.setInterpolator(AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR);
animator.setDuration(duration);
animator.setFloatValues(0, 1);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animator) {
final float fraction = animator.getAnimatedFraction();
setIndicatorPosition(
AnimationUtils.lerp(startLeft, targetLeft, fraction),
AnimationUtils.lerp(startRight, targetRight, fraction));
}
});
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animator) {
mSelectedPosition = position;
mSelectionOffset = 0f;
}
});
animator.start();
}
}
我做了如下修改
if (Math.abs(position - mSelectedPosition) <= 1) {
// If the views are adjacent, we'll animate from edge-to-edge
startLeft = mIndicatorLeft;
startRight = mIndicatorRight;
} else {
startLeft = mIndicatorLeft;
startRight = mIndicatorRight;
/* // Else, we'll just grow from the nearest edge
final int offset = dpToPx(MOTION_NON_ADJACENT_OFFSET);
if (position < mSelectedPosition) {
// We're going end-to-start
if (isRtl) {
startLeft = startRight = targetLeft - offset;
} else {
startLeft = startRight = targetRight + offset;
}
} else {
// We're going start-to-end
if (isRtl) {
startLeft = startRight = targetRight + offset;
} else {
startLeft = startRight = targetLeft - offset;
}
}*/
}
意思就是1个或多个tab滑动的时候都直接按indicator的左右端点计算。它原本的代码是把左右端点设为一样的了，暂时不知道为何要这么做。
使用时我又发现原来简书tablayout的viewpager滑动时，indicator滑动到下一tab90%处，tab才更新文字颜色。我的JSTabLayout是50%左右就更新文字颜色。
setScrollPosition方法修改如下:
positionOffset为两个Tab间滑动时百分比，Math.round意为取四舍五入。
4最后
我的简书TabLayout就基本完成了。
github地址，需要源码的的自取。
https://github.com/honglei92/JSTabLayout。