Android Studio中如何实现Tab指示器滑动切换的动态伸缩效果

核心实现逻辑 #

完全抛弃TabLayout默认的指示器平移动画逻辑，以ViewPager2的实时滑动回调作为动画驱动源，把从当前Tab滑到目标Tab的整段交互过程拆成两个连贯的动画阶段，实现和参考动图一致的视觉效果：

• 滑动前半程：用户手指从当前Tab向目标Tab拖动到半程位置时，指示器从当前Tab的原生尺寸开始，向两侧同步向外扩展，宽度逐步变大，模拟“轻微鼓起”的视觉效果，外扩幅度一般设置为单个Tab宽度的15%~20%，不会显得过于夸张。
• 滑动后半程：拖动进度过半、即将切到目标Tab时，指示器从外扩的“鼓起”状态同步向内收缩，宽度逐步缩小，最终完全对齐到目标Tab的尺寸和位置，消除生硬的直接平移的机械感。

可落地的实现步骤 #

1. 基础准备
   确保项目引入不低于1.9.0版本的Material组件库，覆盖TabLayout自定义Indicator的相关API。布局中先关闭TabLayout默认的内置指示器，避免绘制冲突：

   <com.google.android.material.tabs.TabLayout
       android:id="@+id/tabLayout"
       app:tabIndicator="@null"
       app:tabRippleColor="@android:color/transparent"/>
   

2. 自定义Indicator核心实现
   继承TabLayout的BaseSlideIndicator类做自定义绘制，全程复用绘制对象避免内存抖动：
   • 提前定义复用的边界变量：当前选中Tab的左右边界、目标Tab的左右边界、外扩状态下的左右边界，所有边界值都通过Tab控件的实时坐标获取，不做硬编码。
   • 绑定ViewPager2的onPageScrolled回调，拿到实时的滑动位置和偏移量，以0.5的进度为阈值拆分动画阶段做插值计算：
     • 偏移量小于0.5时，走外扩逻辑：把当前进度归一化到0~1区间，计算外扩状态下的左右边界值
     • 偏移量大于等于0.5时，走内收逻辑：把当前进度归一化到0~1区间，计算收缩后对齐到目标Tab的左右边界值
   • 重写onDraw方法，用提前复用的RectF对象设置当前计算好的边界值，绘制带圆角的胶囊形状指示器，圆角半径取指示器高度的一半，实现和参考动图一致的圆角外观。
3. 手感调校
   • 外扩阶段搭配减速插值器，让扩展动作跟手，不会出现动画慢半拍的情况
   • 内收阶段搭配先加速后减速的插值器，让收缩动作过渡自然
   • 快速来回滑动场景下，实时更新当前激活Tab和目标Tab的边界值，避免动画位置错位。

常见踩坑提醒 #

• 不要在Indicator的onDraw方法中创建新的绘制对象（比如RectF、Paint），所有绘制相关对象都提为类成员复用，避免滑动时频繁创建销毁对象造成内存抖动、掉帧。
• 不要把TabLayout的OnTabSelectedListener作为动画的唯一触发源，这种方式只能响应Tab的点击事件，无法匹配用户手指滑动的跟手效果，必须以ViewPager2的滑动回调作为动画驱动的核心入口。
• 外扩幅度不要超过Tab宽度的20%，过大的外扩量会让指示器视觉上过于突兀，和参考动图的轻量化效果不匹配。

内容的提问来源于stack exchange，提问作者Edward