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

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

赞 (0)

相关推荐

  • Android App开发中RecyclerView控件的基本使用教程

    Android App开发中RecyclerView控件的基本使用教程

    概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用. 据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件我们并不陌生,例如:ListView.GridView. 那么有了ListView.GridView为什么还需要RecyclerView这样的控件呢?整体上看RecyclerView架构,提供了一种插拔式的体验,高度的解耦,异常的灵活,通过设置它提供的不同LayoutManager,ItemDecor

  • Android RecyclerView基本使用详解

    Android RecyclerView基本使用详解

    什么是RecyclerView 关于RecyclerView,是一个主要用于展示和回收View的有一个控件,在官用了一句话来概括 RecyclerView 是一种通过提供有限的数据项窗口有效显示大数据集的视图. 基提供几个基本的功能, 控制其显示的方式 --->LayoutManager-(必需) 控制Item间的间隔 --->ItemDecoration--(非必需) 控制Item增删的动画--->ItemAnimator--(非必需) 以上就可以完成ListView大部的功能了,但是

  • Android应用开发中RecyclerView组件使用入门教程

    Android应用开发中RecyclerView组件使用入门教程

    RecyclerView是一种列表容器, 发布很久了, 才想起来写点什么. RecyclerView相比于ListView, 在回收重用时更具有灵活性, 也就是低耦合, 并且提供了扩展. 加载多个视图时, 应该多用RecyclerView代替ListView. 那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图. 首先我们从一个HelloWorld写起, 看看如何构建一个RecyclerView. 1. 依赖库 Gradle配置, 添加Recycler库 compile 'com.and

  • Android RecyclerView 基础知识详解

    Android RecyclerView 基础知识详解

    本周的谷歌I/O大会带来了很多关于Android的振奋人心的消息.可能我们需要较长的时间来消化Android L引入的新东西. 这些天我一直在研究RecyclerView,并想在此给各位分享一下到目前为止我的成果. RecyclerView是什么? RecyclerView是一种新的视图组,目标是为任何基于适配器的视图提供相似的渲染方式.它被作为ListView和GridView控件的继承者,在最新的support-V7版本中提供支持. 在开发RecyclerView时充分考虑了扩展性,因此用它

  • Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    前言 首先不得不吐槽一下产品,尼玛为啥要搞这样的功能....搞个两级的不就好了嘛...自带控件,多好.三级,四级,听说还有六级的....这样丧心病狂的设计,后台也不好给数据吧. 先看看效果: 两级的效果: 三级的效果: 全部展开的效果(我只写了五级) 说说为什么写这货吧: 公司产品提出三级这个需求后,我就在网上找啊找. 找的第一个,发现实现其实是ExpandListview嵌套. 找的第二个,ExpandRecyclview,然后就用呗,发现三级展开很卡,看源码, 发现是RecyclerView

  • Android开发之RecyclerView控件

    Android开发之RecyclerView控件

    现阶段,我们创建了最简单的Android项目,现在在此公布github链接https://github.com/neuyu/android-best-practices,希望大家多多支持. 因为之前谈到过包结构的定义,我选择第一种方式,按照Android特性定义,所以你的包结构应该是这样的: RecyclerView 在MainActivity中,我们需要用到RecyclerView这一新控件,那么如何引用,如何使用它呢?在gradle文件中添加库依赖: compile 'com.android

  • Android RecyclerView布局就这么简单

    Android RecyclerView布局就这么简单

    RecyclerView是什么? 笔者个人看法,RecyclerView只是一个对ListView的升级版,这个升级的主要目的是为了让这个view的效率更高,并且使用更加方便. 我们知道,ListView通过使用ViewHolder来提升性能.ViewHolder通过保存item中使用到的控件的引用来减少findViewById的调用,以此使ListView滑动得更加顺畅.但这种模式在listview中即使不使用也无妨. 换言之,在ListView中你不考虑复用的问题也可以,只是你牺牲了内存来方

  • 深入解析Android中的RecyclerView组件

    深入解析Android中的RecyclerView组件

    前些日子,组里为了在目前的Android程序里实现基于ListView子项的动画效果,希望将最新的RecyclerView引入到程序中,于是我便花了一些时间研究了一下RecyclerView的基本情况.本文算是对这些日子里了解的内容做一些汇总. 在网上关于RecyclerView的基本使用方式已经有了比较详细介绍,而且其设计结构也类似于ListView,所以本文将不重点介绍如何使用,在文末的引用中都可以相关内容.这里主要是介绍RecyclerView的基本功能.设计理念,以及系统提供API的情况

  • android给RecyclerView加上折叠的效果示例

    android给RecyclerView加上折叠的效果示例

    RecyclerView有很高的自由度,可以说只有想不到没有做不到,真是越用越喜欢.这次用超简单的方法,让RecyclerView带上折叠的效果. 效果是这样的. 总结一下这个列表的特点,就是以下三点: 1. 重叠效果: 2. 层次感: 3. 首项的差动效果. 下面我们来一个个解决. 我们新建一个ParallaxRecyclerView,让它继承RecyclerView,并使用LinearLayoutManager作为布局管理器. 重叠效果 其实就是每一项都搭一部分在它前面那项而已.我们知道,R

  • Android实现RecyclerView下拉刷新效果

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

  • Android利用RecyclerView实现列表倒计时效果

    Android利用RecyclerView实现列表倒计时效果

    最近面试时,面试官问了一个列表倒计时效果如何实现,现在记录一下. 运行效果图 实现思路 实现方法主要有两个: 1.为每个开始倒计时的item启动一个定时器,再做更新item处理: 2.只启动一个定时器,然后遍历数据,再做再做更新item处理. 经过思考,包括性能.实现等方面,决定使用第2种方式实现. 实现过程 数据实体 /** * 总共的倒计时的时间(结束时间-开始时间),单位:毫秒 * 例: 2019-02-23 11:00:30 与 2019-02-23 11:00:00 之间的相差的毫秒数

  • Android开发TextvView实现镂空字体效果示例代码

    记录一下... 自定义TextView public class HollowTextView extends AppCompatTextView { private Paint mTextPaint, mBackgroundPaint; private Bitmap mBackgroundBitmap,mTextBitmap; private Canvas mBackgroundCanvas,mTextCanvas; private RectF mBackgroundRect; private

  • Android开发RecyclerView实现折线图效果

    本文实例为大家分享了Android开发RecyclerView实现折线图效果的具体代码,供大家参考,具体内容如下 效果图如下: 实现的关键是自定义的控件: package com.example.recyclelinechart.test; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; imp

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

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

  • Android使用API实现图像扭曲效果示例

    本文实例讲述了Android使用API实现图像扭曲效果.分享给大家供大家参考,具体如下: /** * Android API实现图像扭曲效果 * @description: * @date 2016-7-22 下午2:19:12 */ public class BitmapMesh extends GraphicsActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sav

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

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

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

  • Android实现局部图片滑动指引效果示例

    Android实现局部图片滑动指引效果示例

    今天发布本文的原因是应一个网友要求,就是实现局部的图片滑动指引效果.这种效果一般是在新闻客户端上比较常见,其功能是: 1.顶部单张图片左右拖拉滑动: 2.带指引: 3.仅滑动顶部单张图片,不滑动页面,下面的图文内容不动: 4.类似于新闻客户端的功能 为了大家能更好的理解,我们先来看下要实现的效果图: 以上便是实现的效果图,其实实现原理也并不难,我们只需要将android-support-v4.jar包中ViewPager控件设置成局部就可以,只是处理界面时稍微有点麻烦,不过看完本篇之后,大家以后

  • Android实现状态栏白底黑字效果示例代码

    Android实现状态栏白底黑字效果示例代码

    前言 本文主要给大家介绍了关于Android如何实现状态栏白底黑字的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.描述 在项目中有的时候Ui设计状态栏背景颜色是白色的,虽然还挺好看,不过可坑了我们做程序的,需要对很多机型进行适配,此文章列举了兼容多个机型版本的状态栏方案. 二.状态栏 1 只要设置下面的代码即可,我是放在BaseActivtiy里面用的 StatusBarUtil.transparencyBar(this); //设置状态栏全透明 StatusB

随机推荐