前言

最近在做的一个小说阅读 APP，打算模仿掌阅实现 TabLayout 切换时的动画效果。

首先看下掌阅的切换效果：

接下来是我的实现效果：

分析

切换动画主要有两部分组成：

1. 字体的缩放动画：进入页面的字体逐渐放大，移除页面的字体逐渐缩小
2. Indicator 的长度变化动画：在进行页面滑动时，Indicator 的长度由短边长再变短。以页面移出一半为分界线，前半部分 Indicator 由短变长，后半部分 Indicator 由长变短。

接下来的实现也分这两部分进行。

实现字体缩放动画

这里的重点是获取到当前页面移出屏幕和旁边页面进入屏幕的比例，我采用的方法是实现 ViewPager.PageTransformer 接口，通过里面 transformPage 方法的 position 参数获取页面移出（进入）屏幕的比例。

这里的难点是如何理解 position 参数的变化规律，怎么理解就不在这里讲了，要解释清楚需要很大篇幅，想要了解的话可以另外查资料，或者看下我写的这篇分析：ViewPager.PageTransformer 的 position 分析

具体的接口实现如下：

/**
 * @author Feng Zhaohao
 * Created on 2019/11/2
 */
public class MyPageTransformer implements ViewPager.PageTransformer {

    public static final float MAX_SCALE = 1.3f;

    private TabLayout mTabLayout;
    @SuppressLint("UseSparseArrays")
    private HashMap<Integer, Float> mLastMap = new HashMap<>();

    public MyPageTransformer(TabLayout mTabLayout) {
        this.mTabLayout = mTabLayout;
    }

    @Override
    public void transformPage(@NonNull View view, float v) {
        if (v > -1 && v < 1) {
            int currPosition = (int) view.getTag(); // 获取当前 View 对应的索引
            final float currV = Math.abs(v);
            if (!mLastMap.containsKey(currPosition)) {
                mLastMap.put(currPosition, currV);
                return;
            }
            float lastV = mLastMap.get(currPosition);
            // 获取当前 TabView 的 TextView 
            LinearLayout ll = (LinearLayout) mTabLayout.getChildAt(0);
            TabLayout.TabView tb = (TabLayout.TabView) ll.getChildAt(currPosition);
            View textView = tb.getTextView();

            // 先判断是要变大还是变小
            // 如果 currV > lastV，则为变小；如果 currV < lastV，则为变大
            if (currV > lastV) {
                float leavePercent = currV; // 计算离开屏幕的百分比
                // 变小
                textView.setScaleX(MAX_SCALE - (MAX_SCALE - 1.0f) * leavePercent);
                textView.setScaleY(MAX_SCALE - (MAX_SCALE - 1.0f) * leavePercent);
            } else if (currV < lastV) {
                float enterPercent = 1 - currV; // 进入屏幕的百分比
                // 变大
                textView.setScaleX(1.0f + (MAX_SCALE - 1.0f) * enterPercent);
                textView.setScaleY(1.0f + (MAX_SCALE - 1.0f) * enterPercent);
            }
            mLastMap.put(currPosition, currV);
        }
    }
}

有几点说明一下。

1. 为了通过 View 获取到其对应的位置，在给 Fragment 创建视图的时候，给它设置一个 tag，值为它的位置索引：

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = LayoutInflater.from(getActivity()).inflate(R.layout.fragment_test, null);
        view.setTag(index);     // index 为该 Fragment 的位置索引

        return view;
    }

2. 在获取当前 TabView 的 TextView 时，我通过当前位置获取到的 TabView 可以直接进行转换：

            LinearLayout ll = (LinearLayout) mTabLayout.getChildAt(0);
            TabLayout.TabView tb = (TabLayout.TabView) ll.getChildAt(currPosition);

如果使用官方 TabLayout，是不能这样做的，因为它内部的 TabView 不是 public，你在外界不能访问到。我这里能这样做是因为这个 TabLayout 是我拷贝官方 TabLayout 到我的项目中，并对它进行了一些修改（之所以要修改官方 TabLayout，是为了实现 Indicator 的动画效果，之后会说到）。这里只需将内部类 TabView 的访问等级修改为 public 就行了。

3. 这里我是通过 setScaleX 和 setScaleY 方法对 TextView 进行缩放操作。

其实一开始我是直接使用 setTextSize 来进行缩放的，不过这样做的话会很发生很明显的文字抖动，所以放弃了这种做法。

后来参考一个开源库（MagicIndicator）的实现，使用 setScaleX 和 setScaleY 方法进行缩放，发现这样做效果好了很多。最终采用了这种方式实现文字的缩放。

以下是我对于这种差别的原因猜测（不知道对不对）：setScaleX 和 setScaleY 内部使用 invalidate(false) 重绘视图，而 setTextSize 使用 invalidate()（即 invalidate(true)）重绘视图， invalidate 方法传入的参数表示是否让此视图的缓存无效，也就是说传入 true 时不使用缓存。所以我觉得是因为 setScaleX 和 setScaleY 使用了缓存，所以效率更高，特别是进行动画时需要重绘多次，使用缓存对于效率的提高就更加明显了。

实现 Indicator 的长度变化动画

实现这个还是挺不容易的。要实现长度变化动画，你首先就要改变它的长度，但 TabLayout 并没有直接提供设置 Indicator 宽度的方法，只能通过其他方式来设置。

总的来说有这几种方法：反射实现、自定义 View、sdk28+ 属性配置、layer-list。但是这几种方法都不能实现最终的动画效果。

反射不能让 Indicator 的宽度小于文本宽度，不然会压缩文本。sdk28+ 属性配置虽然简单，但 Indicator 的宽度只能等于文本宽度。自定义 View 实现麻烦，并且很难实现动画效果。layer-list 实现简单，但缺点是 Indicator 没有动画效果。

以上方法除了自定义 View，我都一一尝试过，后来发现很难满足自己的需求。后来看到这篇文章骚操作之改造TabLayout，修改指示线宽增加切Tab过渡动画，里面讲到可以通过修改官方 TabLayout 来实现功能，受此启发，我最终通过修改官方 TabLayout 实现了 Indicator 的长度变化动画。

下面看下具体过程：

一、准备工作

1. 导入相关类

这里我使用的是 API26 的 TabLayout。

2. 一开始发现 Indicator 不显示，需在 xml 文件设置 Indicator 的颜色和高度

    <com.feng.tablayoutdemo.tablayout.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/holo_blue_light"
        app:tabIndicatorHeight="3dp" />

3. 一些分析

TabLayout 包含一个 SlidingTabStrip，SlidingTabStrip 中包含 n 个 TabView，TabView 包含：

        private Tab mTab;
        private TextView mTextView;
        private ImageView mIconView;

通过 TabView 的 update() 方法添加 mIconView 和 mTextView

TextView 不能放大到整个 tab，是因为它的父 View（TabView）默认设置了 padding。

二、让 TextView 撑满 TabView

默认情况下，TabView 是有 padding 的，所以文本之间才会有间距。但是这样会影响到我放大字体，字体放大是需要空间的，所以要在 TextView 内部设置 padding，但是由于 TabView 也有 padding，两个 padding 加起来会使得文本间距很大，很难看。所以我要取消 TabView 的 padding，让 TextView 撑满整个 TabView，然后在 TextView 内部设置 padding，留下放大的空间。

实现过程如下：

1. 取消 TabView 默认的 padding：

        public TabView(Context context) {
//            ViewCompat.setPaddingRelative(this, mTabPaddingStart, mTabPaddingTop,
//                    mTabPaddingEnd, mTabPaddingBottom);
        }

2. 给 TabView 的 TextView 加上自己的布局：

        final void update() {

                if (mTextView == null) {
//                    TextView textView = (TextView) LayoutInflater.from(getContext())
//                            .inflate(R.layout.design_layout_tab_text, this, false);
                    TextView textView = (TextView) LayoutInflater.from(getContext())
                            .inflate(com.feng.tabdemo.R.layout.tab_text, this, false);
                }

        }

R.layout.tab_text：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:ellipsize="end"
    android:gravity="center"
    android:maxLines="2"
    android:paddingStart="10dp"
    android:paddingEnd="10dp"/>

通过 paddingStart 和 paddingEnd 设置字体间的间距。

3. TabView 设置了一个最小宽度，为了防止 TextView 比较短时不能撑满，把它取消掉：

    private TabView createTabView(@NonNull final Tab tab) {

//        tabView.setMinimumWidth(getTabMinWidth());

    }

三、实现滑动时 Indicator 的动画效果

动画效果：当从一个页面滑向另一个页面时，Indicator 的宽度由短变长再变短。

下面简单分析下动画过程

以页面滑出一半（另一个页面进来一半）为分界线，在前半段，由短变长：

页面滑动一半时，Indicator 的宽度达到最长：

在后半段，由长变短：

实现步骤：

1. SlidingTabStrip 的修改

    public class SlidingTabStrip extends LinearLayout {
        
        // Indicator 的左右边界
        private float left;
        private float right;
        
        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);

            canvas.drawRect(left, getHeight() - mSelectedIndicatorHeight,
                    right, getHeight(), mSelectedIndicatorPaint);
        }
    }

在 SlidingTabStrip 中增加两个变量表示 Indicator 的左右边界，并且改写它的 draw 方法，这样做是为了方便滑动监听器修改 Indicator 的左右边界。

2. 修改 TabLayoutOnPageChangeListener 的 onPageScrolled 方法

TabLayoutOnPageChangeListener 的 onPageScrolled 方法在页面滑动时回调，可以从中知道偏移页面和页面偏移量。知道偏移量就可以重新设置 Indicator 的左右边界并进行动画重绘。具体代码如下：

        /**
         * @param position 当前显示的第一页的索引（右侧页面进入时显示的是当前页面，左侧页面进入时显示的是左侧页面）
         * @param positionOffset 取值范围 [0, 1)，表示 position 页面的偏移量（在屏幕外的比例）
         * @param positionOffsetPixels
         */
        @Override
        public void onPageScrolled(final int position, final float positionOffset,
                final int positionOffsetPixels) {
            // ... 原有代码不用删，保留即可
            
            if (tabLayout == null) {
                return;
            }
            // Indicator 的宽度占 TabView 的比例
            float scale = 0.3f;

            // 左滑（右侧页面进入）的第一阶段
            // 以及右滑（左侧页面进入）的第二阶段
            if (positionOffset > 0 && positionOffset < 0.5) {
                tabLayout.mTabStrip.left = tabLayout.mTabStrip.getChildAt(position).getLeft()
                        + scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
                float lr = tabLayout.mTabStrip.getChildAt(position).getRight()
                        - scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
                float rr = tabLayout.mTabStrip.getChildAt(position + 1).getRight()
                        - scale * tabLayout.mTabStrip.getChildAt(position + 1).getWidth();
                tabLayout.mTabStrip.right = lr + (positionOffset / 0.5f) * (rr - lr);
                ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
            }
            // 左滑（右侧页面进入）的第二阶段
            // 以及右滑（左侧页面进入）的第一阶段
            if (positionOffset > 0.5) {
                float rr = tabLayout.mTabStrip.getChildAt(position + 1).getRight()
                        - scale * tabLayout.mTabStrip.getChildAt(position + 1).getWidth();
                // 先确保 Indicator 滑动最右
                if (tabLayout.mTabStrip.right < rr) {
                    tabLayout.mTabStrip.right = rr;
                    ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
                }
                float ll = tabLayout.mTabStrip.getChildAt(position).getLeft()
                        + scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
                float rl = tabLayout.mTabStrip.getChildAt(position + 1).getLeft()
                        + scale * tabLayout.mTabStrip.getChildAt(position + 1).getWidth();
                tabLayout.mTabStrip.left = ll + ((positionOffset - 0.5f) / 0.5f) * (rl - ll);
                ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
            }
            // 滑动开始或结束
            if (positionOffset == 0) {
                tabLayout.mTabStrip.left = tabLayout.mTabStrip.getChildAt(position).getLeft()
                        + scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
                tabLayout.mTabStrip.right = tabLayout.mTabStrip.getChildAt(position).getRight()
                        - scale * tabLayout.mTabStrip.getChildAt(position).getWidth();
                ViewCompat.postInvalidateOnAnimation(tabLayout.mTabStrip);
            }
        }

到此为止，就实现了完整的 Indicator 动画效果。

字体的缩放动画和 Indicator 的动画是分开实现的，把它们两者合并起来就是最后的动画效果了，合并的时候并不会产生什么冲突，毕竟它们的实现原理不同，也没有什么耦合。

写在最后

实现完整的动画效果花了我三天时间，这三天包括还周末的两天，时间还是花了挺久的。不过总的来说还是值得的，因为在实现过程不断地发现问题不断地解决，学到了不少。对反射的作用有了新的理解，对 TabLayout 的布局更加清晰了，也体会到了改官方源码的快感（笑）。写这篇文章更多是为了趁刚写完把自己的理解记录下来，方便以后回看。如果能够帮助到有需要的人，那就更好了。

参考

• 骚操作之改造TabLayout，修改指示线宽增加切Tab过渡动画
• 仿陌陌选项卡：文字大小变化的SlidingScaleTabLayout
• 优雅地修改 TabLayout 指示线 Indicator 的宽度
• 关于Android改变TabLayout 下划线(Indicator)宽度实践总结