TabLayout源码解析和仿简书首页TabLayout效果

96
honglei92
0.1 2018.11.12 13:22* 字数 875

初衷:想学习下源码,刚好就拿TabLayout开刀。正好产品和UI提了需求做成简书那样的效果。

本来是想自己写一个的,但是ondraw里面画了几个文字textview之后,觉得可能还是在TabLayout之上二次开发来的容易。

1,TabLayout类结构

TabLayoutStructure.png

两个注解一个接口七个类,70来个方法还有一些常量变量域。

2.实现效果

jianshu.gif
jstablayout.gif
Screenshot_1542029939.png

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,发现他会把文字挡住。我就百度搜索关键字


image.png

我百度了很多,没找到想要的,基本都是setLayer这个方法相关,很多博客也是讲的是draw的时候两个图形隐藏与显示还有透明度的关系

终于,
draw.png

我找到了,
image.png

然后成功将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有一个最小宽度然后自适应的。

width.png

然后我发现

 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方法修改如下:


90%更新.png

positionOffset为两个Tab间滑动时百分比,Math.round意为取四舍五入。

4最后

我的简书TabLayout就基本完成了。
github地址,需要源码的的自取。
https://github.com/honglei92/JSTabLayout

android应用层
Web note ad 1