本文探索了支付宝福卡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使用时要做小小的修改
最低0.47元/天 解锁文章
扫一扫
1153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
