前言

2020 年后第一篇，来点轻松的话题吧。在家办公，UI美眉心血来潮要搞一个滑动特效。 ViewPager+TabLayout ，老生常谈的东西了。ViewPager 是基础的滑动切换控件，TabLayout 是 和ViewPager配合使用的 标题栏部分（但是TabLayout也可以脱离ViewPager 独立使用). 根据查到的资料显示，谷歌工程师在ViewPager创立之时，就给 风骚的动画特效预留了接口，我们可以很方便地去使用这个接口进行动画编程，但是TabLayout就比较悲情，不但动画没预留接口，甚至一些常规操作的接口都没有提供，所以网上也出现了一些人按照 原TabLayout的代码，自己去创造新的xxTabLayout控件。

本文将提供ViewPager+TabLayout 的 实例效果，开发思路 ，以及**Demo `

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

github`工程**. 有兴趣的童鞋们希望可以留言多多交流。

Demo 地址：https://github.com/18598925736/StudyTabLayout/tree/hank_v1

正文大纲

• 参考效果

• 前置技能

• 实现思路

• 关键代码

• 思维拓展

承接前篇。

关键代码

有了思路，那么 IT 民工现在开始搬砖。

一，动画拆分各个击破

1. 子 view 重叠排布

原本的子 view 都是横向，从左到又排布，默认的排布方式并没有相互覆盖. 所以我们可以考虑使用视图动画

（？ 为什么是视图动画，而不是属性动画？因为没必要，当前的需求我只需要视觉效果上的位置变化，不需要子 view 的交互事件，用属性动画理论上应该也可以，但是直觉会存在交互问题，有时间再试试）.

使用视图动画，将所有子 view 层叠在一起。原本都是横向排布，所以只需要将所有的 view 进行 x 轴位移，即可。

上代码：

公式的推导很简单，就是让右边的子 view 向左平移 -position 个自身宽度.

效果为：

滑动之后，不再出现其他子 view。

2. 让多个子 view 之间呈现 x 轴上的位置差

虽然重叠在了一起，但是我还需要让右边的子 view 呈现位置偏差. 并且，越往右，偏差越大。

上代码：

效果：

3. 让多个子 view 之间呈现缩放差

x 轴上的位置差虽然有了，但是，原图上，越往右，越小，所以还需要做出 x，y 方向上的缩放

上代码：

效果：

4. 监听滑动 position，做出透明度逐渐变化

视觉效果都有了，那么可以开始做动画效果.

经过对 position 的观察，我们知道 position 会以小数的形式渐变。原图中，向左滑出的 view，会以一个透明度慢慢减小的方式消失，那么先来完成这一步。

效果：

5. 监听滑动 position，做出左滑时 当前 view 的平移动画