2、实现效果
jianshu.gif
jstablayout.gif
Screenshot_1542029939.png 3、实现过程
对比原生的tablayou和简书的,你会发现几处不同,一是简书的tabIndicator是圆角矩形,二是背景图的宽度是跟随文字宽度变化的。
3.1、源码追踪
首先呢,
我们熟知tablayout常规使用如下:
privatevoidinittb2(){
FragmentPagerAdapter fragmentPagerAdapter = newFragmentPagerAdapter(getSupportFragmentManager()) {
@Override
publicFragment getItem(intposition){
returnMyFragment.newInstance(position);
}
@Override
publicintgetCount(){
returntitles.size();
}
@Nullable
@Override
publicCharSequence getPageTitle(intposition){
returntitles.get(position);
}
};
vp2.setAdapter(fragmentPagerAdapter);
tb2.setupWithViewPager(vp2);
跟进去setupWithViewPager()
publicvoidsetupWithViewPager(@Nullable ViewPager viewPager){
setupWithViewPager(viewPager, true);
}
publicvoidsetupWithViewPager(@Nullable finalViewPager viewPager, booleanautoRefresh){
setupWithViewPager(viewPager, autoRefresh, false);
}
privatevoidsetupWithViewPager(@Nullable finalViewPager viewPager, booleanautoRefresh,
booleanimplicitSetup){
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 = newTabLayoutOnPageChangeListener( this);
}
mPageChangeListener.reset();
viewPager.addOnPageChangeListener(mPageChangeListener);
// Now we'll add a tab selected listener to set ViewPager's current item
mCurrentVpSelectedListener = newViewPagerOnTabSelectedListener(viewPager);
addOnTabSelectedListener(mCurrentVpSelectedListener);
finalPagerAdapter 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 = newAdapterChangeListener();
}
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的地方一直跟进去你会发现
privatevoidaddTabView(Tab tab){
finalTabView tabView = tab.mView;
mTabStrip.addView(tabView, tab.getPosition(), createLayoutParamsForTabs());
}
回到第一张类结构图,我知道了每一个tabItem是添加在private final SlidingTabStrip mTabStrip在这个对象中的,
然后我在SlidingTabStrip 的draw方法看到了
@Override
publicvoiddraw(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
protectedvoiddispatchDraw(Canvas canvas){
// Thick colored underline below the current selection
RectF r2 = newRectF(); //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,发现他会把文字挡住。我就百度搜索关键字
image.png
我百度了很多,没找到想要的,基本都是setLayer这个方法相关,很多博客也是讲的是draw的时候两个图形隐藏与显示还有透明度的关系
终于,
draw.png
我找到了,
image.png
然后成功将tabIndicator绘制到了文字下方。嘤嘤嘤,当时还是很开心的。
3.2、修改
然后呢
它的宽度是平局值分布的。我从draw方法里知道绘制tabIndicator的时候需要两个参数mIndicatorLeft 、mIndicatorRight
然后代码里搜索发现:
privatevoidupdateIndicatorPosition(){
finalView selectedTitle = getChildAt(mSelectedPosition);
intleft, 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有一个最小宽度然后自适应的。
width.png
然后我发现
mScrollableTabMinWidth = res.getDimensionPixelSize(R.dimen.design_tab_scrollable_min_width);
privateintgetTabMinWidth(){
if(mRequestedTabMinWidth != INVALID_WIDTH) {
// If we have been given a min width, use it
returnmRequestedTabMinWidth;
}
// Else, we'll use the default value
returnmMode == MODE_SCROLLABLE ? mScrollableTabMinWidth : 0;
}
所以我在dimes里面design_tab_scrollable_min_width设置了一个较小的值,
果然就是宽度自动包裹了。
宽度的问题解决了,但是滑动的时候我发现相邻一个tab滑动的时候很匀称,但是间隔几个tab的时候滑动不自然。于是我找到了下面代码:
voidanimateIndicatorToPosition(finalintposition, intduration){
if(mIndicatorAnimator != null&& mIndicatorAnimator.isRunning()) {
mIndicatorAnimator.cancel();
}
finalbooleanisRtl = ViewCompat.getLayoutDirection( this)
== ViewCompat.LAYOUT_DIRECTION_RTL;
finalView targetView = getChildAt(position);
if(targetView == null) {
// If we don't have a view, just update the position now and return
updateIndicatorPosition();
return;
}
finalinttargetLeft = targetView.getLeft();
finalinttargetRight = targetView.getRight();
finalintstartLeft;
finalintstartRight;
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
finalintoffset = 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 = newValueAnimator();
animator.setInterpolator(AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR);
animator.setDuration(duration);
animator.setFloatValues( 0, 1);
animator.addUpdateListener( newValueAnimator.AnimatorUpdateListener() {
@Override
publicvoidonAnimationUpdate(ValueAnimator animator){
finalfloatfraction = animator.getAnimatedFraction();
setIndicatorPosition(
AnimationUtils.lerp(startLeft, targetLeft, fraction),
AnimationUtils.lerp(startRight, targetRight, fraction));
}
});
animator.addListener( newAnimatorListenerAdapter() {
@Override
publicvoidonAnimationEnd(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的左右端点计算。它原本的代码是把左右端点设为一样的了,暂时不知道为何要这么做。
4、最后
我的简书TabLayout就基本完成了。
github地址,需要源码的的自取。
https://github.com/honglei92/JSTabLayout。
●编号395,输入编号直达本文