本文介绍了如何利用RecyclerView的ItemDecoration实现炫酷的横向视差效果。通过自定义ItemDecoration，结合滑动距离和视差系数，计算背景图片的滑动位置并进行绘制，从而达到背景循环展示的效果。详细讲解了计算完全可见图片数量、滑动距离以及视差处理的步骤，最终实现了背景图随列表滑动的动态视差效果。
原标题：巧用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
最低0.47元/天 解锁文章
1321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
