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

源码地址:ParallaxRecyclerView_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-09-17 03:46:05

android给RecyclerView加上折叠的效果示例的相关文章

Android实现RecyclerView下拉刷新效果

本文为大家分享了Android实现RecyclerView下拉刷新效果的具体代码,供大家参考,具体内容如下 思路 RealPullRefreshView继承了一个LinearLayout 里面放置了一个刷新头布局,将其margin_top设置为负的刷新头的高度的 再添加一个RecyclerView 触摸事件分发机制,当在特定条件下让RealPullRefreshView拦截触摸事件,否则的话,不拦截,让RecyclerView自己去处理触摸事件 在手指下拉时,定义好不同的状态STATE,在不同状

Android TextView多文本折叠展开效果

最近做项目,效果图要用到TextView的折叠,超过一定行数的时候,就会折叠起来,点击可以展开.网上找了一些效果,自己也稍作了修改.便拿来与网友分享分享. 参考文献:Android UI实现多行文本折叠展开效果 第一种:通过多个布局组合实现 大概步骤: - 定义布局,垂直的线性LinearLayout布局.TextView和ImageView. 在layout中定义基本组件. - 设置TextView的高度为指定行数*行高. 不使用maxLine的原因是maxLine会控制显示文本的行数,不方便

Android基于ImageView绘制的开关按钮效果示例

本文实例讲述了Android基于ImageView绘制的开关按钮效果.分享给大家供大家参考,具体如下: 今天弄了一下用图片绘制开关按钮. 效果图: 还有我两张start图片和stop图片就是上面的图片,到时候大家可以按照自己的图片调用.. Main.xml文件 在xml进入这段代码就ok了. <ImageView Android:id="@+id/start" android:layout_width="150.px" android:layout_heigh

Android多行文本折叠展开效果

转自:http://blog.csdn.net/qiaoidea/article/details/45568653 [导航]  - 单行文本水平触摸滑动效果 通过EditText实现TextView单行长文本水平滑动效果  - 多行文本折叠展开 自定义布局View实现多行文本折叠和展开 1.概述 经常在APP中能看到有引用文章或大段博文的内容,他们的展示样式也有点儿意思,默认是折叠的,当你点击文章之后它会自动展开.再次点击他又会缩回去.  网上有找到部分效果,感觉不是很满意.最后自己尝试用 自定

Android TextView多文本折叠展开效果_Android

最近做项目,效果图要用到TextView的折叠,超过一定行数的时候,就会折叠起来,点击可以展开.网上找了一些效果,自己也稍作了修改.便拿来与网友分享分享. 参考文献:http://www.jb51.net/article/95544.htm 第一种:通过多个布局组合实现 大概步骤: - 定义布局,垂直的线性LinearLayout布局.TextView和ImageView. 在layout中定义基本组件. - 设置TextView的高度为指定行数*行高. 不使用maxLine的原因是maxLin

android中RecyclerView悬浮吸顶效果

MultiType-Adapter打造悬浮吸顶效果 注:当前版本只适合配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,由于实现机制的原因,暂时不支持触摸事件. MultiType-Adapter介绍地址:MultiType-Adapter 是一款轻量级支持多数据类型的 RecyclerView 适配器; 使用简单,完全解耦; 悬浮吸顶效果 ```groovy // root build.gradle repositories { jcenter() maven

Android实现伸缩弹力分布菜单效果的示例_Android

这两天无意间看到一园友的博文实现Path2.0中绚丽的的旋转菜单,感觉效果不错,但是发现作者没有处理线程安全的问题,所以在这里我修正了下,并且改善下部分功能.今天发布这篇文章的目的是希望能在Android用户体验上提出一些相关的解决方案,方便我们在开发项目或产品时增强用户体验效果,当然也希望能起到抛砖引玉的作用. =废话不多说,还是老规矩,先让我们看一下实现的效果图: =在上图中,我将菜单弹出的效果设置成直线型,最终的弹出或汇总点在下面的红色按钮中. 它的实现原理是设置动画的同时并利用动画中的插

Android实现伸缩弹力分布菜单效果的示例

这两天无意间看到一园友的博文实现Path2.0中绚丽的的旋转菜单,感觉效果不错,但是发现作者没有处理线程安全的问题,所以在这里我修正了下,并且改善下部分功能.今天发布这篇文章的目的是希望能在Android用户体验上提出一些相关的解决方案,方便我们在开发项目或产品时增强用户体验效果,当然也希望能起到抛砖引玉的作用. =废话不多说,还是老规矩,先让我们看一下实现的效果图: =在上图中,我将菜单弹出的效果设置成直线型,最终的弹出或汇总点在下面的红色按钮中. 它的实现原理是设置动画的同时并利用动画中的插

jQuery实现可展开折叠的导航效果示例_jquery

本文实例讲述了jQuery实现可展开折叠的导航效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0;} li{ list-style-type: none;}