支付宝福卡破解——居中的ViewPager

最新推荐文章于 2023-06-13 17:43:13 发布

原创最新推荐文章于 2023-06-13 17:43:13 发布 · 2.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android #支付宝 #破解 #viewpager #ui

android 专栏收录该内容

14 篇文章

订阅专栏

本文探索了支付宝福卡UI的实现，通过hierarchyviewer和apkide分析，发现福卡UI是通过一个自定义的ViewPager实现，该ViewPager有自定义字段用于居中显示选中项，并结合ZoomOutPageTransformer动画，提供了类似效果。源代码已开源在GitHub上。

支付宝福卡功能刚出来，我就对支付宝福卡的UI实现很感兴趣。第一是因为福卡的UI比较新颖而且不久前做的项目跟福卡UI有些类似，第二也是很想知道支付宝这样的大厂会不会更优雅地实现福卡的UI。

1、使用hierarchyviewer查看发现福卡的容器是com.alipay.android.wallet.newyear.card.ui.ViewPager，是一个自定义的ViewPager。

2、使用apkide查看支付宝的smali发现这个自定义的ViewPager有自定义的字段mPageSpace、mCenterLockEnabled等，多出来的字段都是为了让ViewPager选中的item居中显示且左右有空间显示其他pager

3、查看smali发现ViewPager使用了切换动画ZoomOutPageTransformer，ZoomOutPageTransformer是Android的一个例子，但在居中ViewPager使用时要做小小的修改

//float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 原来的代码
float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); //修改后

总结起来就是支付宝福卡的容器是用居中选中item的ViewPager和放大效果的过场动画来实现的。我把破解出来的代码放到 https://github.com/smallnew/FuCardPager (感兴趣的可以星下)。效果如下：