给 RecyclerView 加上折叠的效果

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

效果是这样的。

总结一下这个列表的特点,就是以下三点:

  1. 重叠效果;
  2. 层次感;
  3. 首项的差动。

下面我们来一个个解决。

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

重叠效果

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

addItemDecoration(new ItemDecoration() {
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
                super.getItemOffsets(outRect, view, parent, state);
                outRect.bottom = -dp2px(context, 10);
            }
        });

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

层次感

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

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

LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
int firstPosition = layoutManager.findFirstVisibleItemPosition();
int lastPosition = layoutManager.findLastVisibleItemPosition();
int visibleCount = lastPosition - firstPosition;
//重置控件的高度
int elevation = 1;
for (int i = firstPosition - 1; i <= (firstPosition + visibleCount) + 1; i++) {
    View view = layoutManager.findViewByPosition(i);
    if (view != null) {
        if (view instanceof CardView) {
            ((CardView) view).setCardElevation(dp2px(context, elevation));
            elevation += 5;
        }
       
    }
}

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

首项的差动

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

View firstView = layoutManager.findViewByPosition(firstPosition);
float firstViewTop = firstView.getTop();
firstView.setTranslationY(-firstViewTop / 2.0f);

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

 float translationY = view.getTranslationY();
if (i > firstPosition && translationY != 0) {
    view.setTranslationY(0);
}

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

源码地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,228评论 25 708
  • 今天我给大家讲一个感人的故事。 今天我们来老姑家探亲。听老姑讲她们那个年代的故事,亲身感受了她们婚姻的温度。 这次...
    大山女孩阅读 370评论 0 1
  • 到底经历多少之后,才能做到既不将就也不强求?
    昵什么称呢阅读 71评论 0 0
  • 1.利用元认知能力,快速学习所需技能和知识。2.深度思考、创造欲、好奇心相结合,发现产品、业务、商业人性背后的规律...
    数据研究员阅读 333评论 0 2
  • 在上一节中主要对第一节的代码做了封装,它们都是用OpenGL来渲染和显示一个固定颜色的长方形,但实际开发中很少只会...
    YxxxHao阅读 1,307评论 2 1