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

支付宝福卡功能刚出来,我就对支付宝福卡的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 (感兴趣的可以星下)。效果如下:

支付宝福卡破解——居中的ViewPager_第1张图片



你可能感兴趣的:(android)