基于TabLayout源码实现自定义TabLayout

最新推荐文章于 2024-08-05 17:25:59 发布

deliqiu

最新推荐文章于 2024-08-05 17:25:59 发布

阅读量585

点赞数 1

分类专栏： android控件文章标签： android tablayout 自定义view 安卓 ViewPager

本文链接：https://blog.csdn.net/qiudeli18/article/details/79253911

版权

android控件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细解析TabLayout与ViewPager的绑定原理，探讨如何自定义tab底部indicator及滑动机制。针对点击Tab时的平滑切换问题，提出了通过监听positionOffset改进的解决方案，以提高用户体验。

摘要由CSDN通过智能技术生成

        mFragments = new ArrayList<>();
        mFragments.add(new NewsTypeFragment());
        mFragments.add(new NewsTypeFragment());
        mFragments.add(new NewsTypeFragment());
        mViewPagerFragmentAdapter = new ViewPagerFragmentAdapter(getChildFragmentManager(), mFragments);
        viewpager.setAdapter(mViewPagerFragmentAdapter);
        tablayout.setupWithViewPager(viewpager);

viewpager和tablayout存在双向绑定的机制:

绑定流程如下:
这里写图片描述
通过监听viewpager, 与之绑定的TabLayout也随viewpager更改视图，以下是TabLayoutOnPageChangeListener的源码。

public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
        private final WeakReference<TabLayout> mTabLayoutRef;
        private int mPreviousScrollState;
        private int mScrollState;

        public TabLayoutOnPageChangeListener(TabLayout tabLayout) {
            mTabLayoutRef = new WeakReference<>(tabLayout);
        }

        @Override
        public void onPageScrollStateChanged(final int state) {
            mPreviousScrollState = mScrollState;
            mScrollState = state;
        }

        @Override
        public void onPageScrolled(final int position, final float positionOffset,
                final int positionOffsetPixels) {
            final TabLayout tabLayout = mTabLayoutRef.get();
            if (tabLayout != null) {
                // Only update the text selection if we're not settling, or we are settling after
                // being dragged
                final boolean updateText = mScrollState != SCROLL_STATE_SETTLING ||
                        mPreviousScrollState == SCROLL_STATE_DRAGGING;
                // Update the indicator if we're not settling after being idle. This is caused
                // from a setCurrentItem() call and will be handled by an animation from
                // onPageSelected() instead.
                final boolean updateIndicator = !(mScrollState == SCROLL_STATE_SETTLING
                        && mPreviousScrollState == SCROLL_STATE_IDLE);
                tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
            }
        }

        @Override
        public void onPageSelected(final int position) {
            final TabLayout tabLayout = mTabLayoutRef.get();
            if (tabLayout != null && tabLayout.getSelectedTabPosition() != position
                    && position < tabLayout.getTabCount()) {
                // Select the tab, only updating the indicator if we're not being dragged/settled
                // (since onPageScrolled will handle that).
                final boolean updateIndicator = mScrollState == SCROLL_STATE_IDLE
                        || (mScrollState == SCROLL_STATE_SETTLING
                        && mPreviousScrollState == SCROLL_STATE_IDLE);
                tabLayout.selectTab(tabLayout.getTabAt(position), updateIndicator);
            }
        }

        void reset() {
            mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
        }
    }

其中onPageScrollStateChanged() 得到viewpager的三种状态，并保存前置状态和当前状态,影响后续页面布局和动画效果。

    /**
     * Indicates that the pager is in an idle, settled state. The current page
     * is fully in view and no animation is in progress.
     * 表示viewpager的状态为静止状态（无动画、无滑动）
     */
    public static final int SCROLL_STATE_IDLE = 0;

    /**
     * Indicates that the pager is currently being dragged by the user.
     * 表示viewpager的状态滑动状态
     */
    public static final int SCROLL_STATE_DRAGGING = 1;

    /**
     * Indicates that the pager is in the process of settling to a final position.
     */
    public static final int SCROLL_STATE_SETTLING = 2;

public void onPageScrolled(final int position, final float positionOffset,final int positionOffsetPixels)该方法监听的是Viewpager的位置以及每个page的偏移量（这里解释一下positionOffset，它对应ViewPager当前page的偏移量，其中左划数值从0-1,右滑数值从1-0，后续会根据positionOffset计算整个HorizontalScrollView的位置）、对应的像素位置，==onPageScrolled()和下面onPageSelected() 是与TabLayout联动最关键的两个方法== ,在这个方法中，会将position和positionOffset传递给setScrollPosition(),并通过这个方法更新TabLayout视图，其中包括，底部indicater（tab追踪条），text（tab的名称），HorizontalScrollView的偏移位置，运用对偏移量四舍五入的计算方法，设置tab标题颜色。这里要尤其注意，onPageScrolled返回的position会根据滑动方向改变，左滑position保持当前pager的值，而从静止开始往右滑动则变成当前page-1，尤其区分这里的position和onPageSelected返回的position。

void setScrollPosition(int position, float positionOffset, boolean updateSelectedText,
                           boolean updateIndicatorPosition) {
        final int roundedPosition = Math.round(position + positionOffset);
        if (roundedPosition < 0 || roundedPosition >= mTabStrip.getChildCount()) {
            return;
        }

        // Set the indicator position, if enabled
        if (updateIndicatorPosition) {
            mTabStrip.setIndicatorPositionFromTabPosition(position, positionOffset);
        }

        // Now update the scroll position, canceling any running animation
        if (mScrollAnimator != null && mScrollAnimator.isRunning()) {
            mScrollAnimator.cancel();
        }
        scrollTo(calculateScrollXForTab(position, positionOffset), 0);

        // Update the 'selected state' view as we scroll, if enabled
        if (updateSelectedText) {
            setSelectedTabView(roundedPosition);
        }
    }

public void onPageSelected(final int position) 该方法只有在动画完成，页面静止的时候调用，position显示当前page的页数（从0开始）

二、具体实现

2.1 tab底部indicator自定义

原生TabLayout的底部indicator默认是矩形条，并且只能修改其高度，所以它的可定制性非常低，而绘制矩形条的类SlidingTabStrip是私密内部类，所以为了自定义indcator需要将tablayout整体移植到自己的工程项目内，并修改SlidingTabStrip这个类。这里提供简单的三种自定义图形

        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);

            // Thick colored underline below the current selection
            if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
                //自定义画圆
                //canvas.drawCircle((mIndicatorLeft + mIndicatorRight) / 2, getHeight() - mSelectedIndicatorHeight, mSelectedIndicatorHeight, mSelectedIndicatorPaint);
                //自定义三角形
                Path path = new Path();
                path.moveTo((mIndicatorLeft + mIndicatorRight) / 2, getHeight() - mSelectedIndicatorHeight - 10);
                path.lineTo((mIndicatorLeft + mIndicatorRight) / 2 - mSelectedIndicatorHeight - 10, getHeight());
                path.lineTo((mIndicatorLeft + mIndicatorRight) / 2 + mSelectedIndicatorHeight + 10, getHeight());
                path.close();
                canvas.drawPath(path, mSelectedIndicatorPaint);
                //自定义矩形、条形（默认）
                //canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight,
                // mIndicatorRight, getHeight(), mSelectedIndicatorPaint);
            }
        }

2.2 tab滑动机制自定义

通常TabLayout与fragment+ViewPager一起使用，不知道大家有没有遇到过这种情况，当设置ViewPager的setCurrentItem方法时，可以选择pager的滑动是否是smooth，true的时候，tablayout也是smooth，false的时候，tablayout的切换也变得生硬，包括现在的网易新闻，今日头条的tablayout就是这种机制。产生这种不协调的原因是因为上述监听ViewPager的onPageScrolled方法，点击tab的时候onPageScrolled方法返回的positionOffset一直为0，每次点击tab时，最后一次调用的是onPageScrolled方法而不是onPageSelected方法，通过点击tab时候的log可以看出来：

02-04 08:35:59.965 7206-7206/com.deli.newsdemo D/mTabLayoutRef: onPageScrolled:1 
02-04 08:36:08.591 7206-7206/com.deli.newsdemo D/mTabLayoutRef: onPageSelected: 2
02-04 08:36:08.597 7206-7206/com.deli.newsdemo D/mTabLayoutRef: onPageScrolled:1

==所以，以最后一次onPageScrolled的监听为主，同时positionOffset为0，就导致没有动画效果，也就是导致点击tab很生硬的主要原因==！

那有没有一种机制一能防止viewpager产生过渡动画，又能让tablayout有过渡动画。其实很简单，就是监听positionOffset，当positionOffset大于0时执行setScrollPosition方法：

@Override
        public void onPageScrolled(final int position, final float positionOffset,
                                   final int positionOffsetPixels) {
            final TabLayout tabLayout = mTabLayoutRef.get();
            Log.d("mTabLayoutRef", "onPageScrolled:1 ");
            if (tabLayout != null) {
                // Only update the text selection if we're not settling, or we are settling after
                // being dragged
                final boolean updateText = mScrollState != SCROLL_STATE_SETTLING ||
                        mPreviousScrollState == SCROLL_STATE_DRAGGING;
                // Update the indicator if we're not settling after being idle. This is caused
                // from a setCurrentItem() call and will be handled by an animation from
                // onPageSelected() instead.
                final boolean updateIndicator = !(mScrollState == SCROLL_STATE_SETTLING
                        && mPreviousScrollState == SCROLL_STATE_IDLE);
                if (positionOffset>0)
                tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
            }
        }