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。