给 RecyclerView 加上折叠的效果

Posted 2023-03-03

参考技术A RecyclerView 有很高的自由度，可以说只有想不到没有做不到，真是越用越喜欢。这次用超简单的方法，让 RecyclerView 带上折叠的效果。

效果是这样的。

总结一下这个列表的特点，就是以下三点：

下面我们来一个个解决。

我们新建一个 ParallaxRecyclerView，让它继承 RecyclerView，并使用 LinearLayoutManager 作为布局管理器。

其实就是每一项都搭一部分在它前面那项而已。我们知道，RecyclerView 可以通过设置 ItemDecoration 来实现列表的间隔效果，有没有想过要是把间隔设为负数会怎么样？比如：

没错，这就实现了我们的重叠效果。

在 Material Design 里是有Z轴这个概念的，我们可以给控件设置垂直于屏幕的高度，让不在同一高度的控件看起来有层次感。当然，我们要用 Material Design 的控件才有这个属性，这里我用的是 CardView。

我们给 ParallaxRecyclerView 增加一个滑动监听，在 onScrolled 方法里面做如下设置：

其中，setCardElevation 方法就是用来给 CardView 设置高度的，这里让每一项的高度比它的上一项高 5dp。

最后，我们想给第一项增加一个差动效果，这个同样在 onScrolled 方法里面做处理就好了：

这样相当于第一项的滑动速度变成原来的一半。但这也会导致一个问题， 由于改变了控件的位置，当这个控件被复用时，会出现位置不正确的情况。所以我们在设置高度的时候，可以顺便把控件的位置复原了：

这样就完成了一个带有简单折叠效果的 RecyclerView 了，妥妥的。

源码地址