淘宝App的商品详情页，在向上滑动的时候，顶部图片会以一个比较慢的速度向上滑动，并慢慢被详情页覆盖，我也不知道这种特效的学名叫什么，姑且先叫视觉差吧，效果如下：
淘宝
想要实现这样的效果，我在网上也找了很多资料，有的说法是把这个顶部图片控件添加到UITableView中，然后再使用sendSubviewToBack方法把图片移到tableView底部去，在滚动方法中去调整图片的位移。这种方式我尝试了一下，并没有成功，图片还是会显示在最前面一层，导致tableView向上滑动的时候无法覆盖图片，而且使用sendSubviewToBack方法，会影响到图片控件的事件响应，使用轮播图片的时候左右滑动起来怪怪的，可能是我实现的方法有问题，如果有小伙伴通过这种方式实现了，也可以分享一下。
下面说一下我的实现思路
首先，顶部的图片我们可以用UIImageView，也可以用自定义的图片轮播控件，这里我使用的轮播控件是我自己封装的ADLoopView，需要的小伙伴也可以看一下之前的文章。
简书ADLoopView：
https://www.jianshu.com/p/9526e2f4124d
我实现的方式并不是将图片以比较慢的速度向上位移，而是tableView向上滑动的时候，缩小顶部图片的高度，并且图片的contentMode为.scaleAspectFill，这样就会产生一个错觉，好像是图片慢慢被下方列表覆盖的感觉。
同理，当tableView往下拉时，也是增加顶部图的高度，当下拉高度超过图片控件的原始高度时，慢慢将图片控件的x值慢慢左移，从而产生一个放大的效果（ADLoopView可以配置是否产生放大效果）
实现效果：
UITableView+轮播控件
UITableView+UIImageView
附上Demo地址
GitHub ADLoopInTableView：
https://github.com/jiabin87428/ADLoopView
网友评论