自定义ViewPage2滑动切换效果
在 Android 开发中,ViewPager2 已经成为实现页面滑动切换的首选控件。相比于传统的 ViewPager,它基于 RecyclerView 实现,支持垂直/水平滑动、RTL布局、DiffUtil 刷新等新特性。
默认情况下,ViewPager2 提供了类似翻页的滑动效果,但在实际项目中,经常需要 个性化的切换动画,例如:缩放、旋转、淡入淡出等。本文将从零开始,实战如何实现自定义的 ViewPager2 页面切换效果。
为什么需要自定义切换效果?
默认效果虽然简洁,但往往不能满足个性化需求。常见的定制场景包括:
- 轮播图:滑动时缩放,突出中间页面,弱化两侧页面;
- 阅读器/相册:左右切换时淡入淡出,避免突兀感;
- 卡片浏览:滑动时叠加旋转,增强层次感。
这些效果都可以通过 ViewPager2 的 PageTransformer 接口 来实现。
PageTransformer 原理
ViewPager2.PageTransformer 的核心原理是:
在页面滑动过程中,系统会回调 transformPage(View page, float position) 方法,可以根据 position 值对页面进行变换。
- position = 0:当前正在显示的页面;
- position = 1:右侧相邻的页面;
- position = -1:左侧相邻的页面;
- position 在 (-1,1) 之间时,表示页面正在滑动中。
通过对 page 设置 translationX、scaleX、alpha、rotation 等属性,就能实现各种动画效果。
实现自定义切换效果
缩放渐隐效果
class ScaleFadePageTransformer : ViewPager2.PageTransformer {override fun transformPage(page: View, position: Float) {page.apply {val scale = 0.85f.coerceAtLeast(1 - kotlin.math.abs