专栏首页NanBox给 RecyclerView 加上折叠的效果

给 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 了,妥妥的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 仿 iOS 列表的编辑功能 - 删除篇

    在 iOS 的设置里面,有一种编辑的效果,进入编辑状态后,列表左边推出圆形的删除按钮,点击后再出现右边确认删除按钮,相当于给用户二次确认。看下在 Android...

    NanBox
  • 实现列表悬浮标签「顶上去」的效果

    列表顶部的标签悬浮大家应该都知道,但「顶上去」是个啥玩意? 看一下效果图就知道了,注意看顶部的悬浮标签切换时的效果:

    NanBox
  • 实现一个带下拉弹簧动画的 ScrollView

    在刚推出的 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画,也就是弹簧动画。要是用它来做一个滑动控件下拉...

    NanBox
  • Educational Codeforces Round 55 (Rated for Div. 2) B. Vova and Trophies(思维模拟)

    题目链接:http://codeforces.com/contest/1082/problem/B

    Ch_Zaqdt
  • 一个吸顶Item的简单实现方法分享

    一般的对于上图样式的Sticker我们使用CoordinatorLayout & AppBarLayout就可以说实现。

    砸漏
  • Flask-Admin修改成中文显示

    今天的文章的主题是国际化和本地化,通常简称 I18n 和 L10n。我们想要我们的 microblog 应用程序被尽可能多的用户使用,因为我们不能忘记有许多人是...

    菲宇
  • 部分和问题(DFS)

    题意:给定整数a1,a2,a3,a4,a5,an。判断是否可以从中选出若干数,使它们的和恰好为k。

    杨鹏伟
  • How to calculate “hard” runtime complexity?

    在技术面试中,准确说出一个解法的runtime complexity(算法时间复杂度)是一个非常重要的点。考虑到对于算法时间复杂度的理解是CS领域的基础,因此这...

    包子面试培训
  • NameError: name 'reduce' is not defined

    原来自 Python3 之后,这个函数从全局命名空间中移除,放在了 functools模块,因为如果想正确执行,必须这样

    大江小浪
  • 谈谈关于Exception 和 Error 的理解

    世界上存在永远不会出现错误的程序吗?也许这只会出现在程序员的梦中。随着软件的诞生,异常就如影随形的围绕着我们,所以,只有正确处理好程序的意外情况,才能有效的避免...

    cxuan

扫码关注云+社区

领取腾讯云代金券