原标题:巧用RecyclerView ItemDecoration 实现炫酷视差效果
本文作者
作者:seagazer
https://www.jianshu.com/p/b96ca7edba40
1
概述
最近项目又开始大刀阔斧的改版迭代,PM也再次开始了其疯狂CX大法。不过对此早已习以为常了,毕竟我们也曾经看懂过这么一本书《RR is PM》。哈哈,有点扯远了,回归正题,先来看看这次要实现的交互效果(CX目标):
简单描述下,界面就是一个横向列表,滑动的时候,背景图跟着一起滑动,并且附带视差效果,随着滑动距离增加,背景图一直在循环展示。
看到这种效果,列表方案肯定是首选RecyclerView,接着看这背景视差效果,首先想到的就是通过绘制background的方式实现。
大家都知道,RecyclerView有这么一个内部类ItemDecoration,可以提供绘制前景,背景,Item分割线能力,所以我们可以通过构建一个ItemDecoration来绘制我们的背景。
2
分析
通过滑动RecyclerView仔细观察背景的内容,发现它是在一直循环展示的,因此猜测背景应该是一系列的图片横向并排拼凑成一个长图。为了验证我们的猜想,把对方的apk解压,找到对应的资源文件。果然证实了之前的猜想,背景长图是一系列的同尺寸图片拼接而成。
到此,我们基本上可以确定目标方案:
自定义一个ItemDecoration,传入一个背景图片集合
在ItemDecoration的onDraw方法中,计算出当前RecyclerView的滑动距离
根据RecyclerView的滑动距离和parallax视差系数,计算出当前背景的滑动距离
根据背景的滑动距离换算成坐标,绘制到RecyclerView的Canvas上
需要特别处理循环绘制逻辑,以及只绘制当前屏幕可见数量的图片
首先看下下面这张图:
上面这部分,屏幕完全可见的背景图片数量为3,当bg3的右边距与screen的右边距相差1px时,说明bg4有1px的内容显示在屏幕上,所以当前屏幕最大可见图片数量为4。
再来看看下面这部分,假设上面那张图b