使用ViewPager实现卡片叠加效果(效果非常棒)

我们来看一下效果图:

背景

在开发项目时，需要对 App的某个资源模块进行界面重构，其中在资源展示部分中新的交互以卡片叠加的效果替代了原来的资源组织树门禁展示方式。在新的资源展示方式中，每一个新的卡片都是在最上面的，其顺序以栈的形式存储在内存。卡片支持叠加效果，左右滑动切换到下一页或上一页，且卡片中的资源是以列表的形式展示，支持上下滑动，上拉刷新，下拉加载更多。目前网上存在的卡片布局第三方库，并不能满足我们的项目需求，有的是无法达到叠加效果，有的会是卡片中不能有列表，否则会产生View滑动事件冲突，导致列表无法滑动，因此考虑使用已有的知识，自己实现这样的功能。

 

实现                              

在Android系统中，没有能直接能实现该效果的控件，可以实现左右滑动切换页面的控件首先想到ViewPager，但ViewPager并不能直接实现页面叠加效果，通过查阅资料，发现可以自定义ViewPager.PageTransformer接口去控制ViewPager中各个页面的偏移显示效果。

 

编码尝试：

1、创建基本界面结构：

首先我们先创建一个Activity，配置好页面，就像以下效果。一个ViewPager,里面放View。还需要给ViewPager的setOffscreenPageLimit一个大一点的值，这样可以使Viewpager预加载多个页面。

正常情况下，ViewPager里面的内容是水平排列的，如下图：