登录 立即注册
安币:

五行代码实现 炫动滑动 卡片层叠布局,仿探探、人人影视...

[复制链接]
来自: Lllllllier 分类: Android精品源码 上传时间: 2016-12-19 10:32:13
Tag:
立即下载
收藏

项目介绍:

[i=s] 本帖最后由 Lllllllier 于 2017-2-5 23:13 编辑 [/i]

转载请标明出处:
http://blog.csdn.net/zxt0601/article/details/53730908

本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)
代码传送门:喜欢的话,随手点个star。多谢
https://github.com/mcxtzhang/LayoutManagerDemo

经济上支持我 or 想通过视频看我是怎么实现的:

http://edu.csdn.net/course/detail/3956

概述

前几天看有人实现了仿人人美剧的订阅界面,不过在细节之处以及实现方式我个人认为都不是最佳的姿势。
于是我也动手撸了一个,还顺带撸了个探探的界面,先看GIF:
探探皇帝翻牌子即视感

人人美剧订阅界面

这里吐个槽,探探这种设计真的像皇帝翻牌子的感觉,不喜欢左滑,喜欢右滑。

人人影视版特点(需求):

  • 动画:最多可见的这四层,在顶层卡片滑动时,每一层都会位移&放大动画,有种补充到顶层的感觉

  • 动画:松手时,如果未被判定为删除,则会有顶层以下每一层卡片收缩回原位的动画。

  • 无限循环:模仿人人影视,顶层卡片被删除后,补充到最底层。

除上述动画特点,探探版特点(需求):

  • Roate的变化:左右滑动时,顶层卡片会慢慢旋转,到阈值max大概十五度。

  • Alpha的变化:左滑时顶层卡片的删除按钮会慢慢显现,右滑时爱心按钮会慢慢显现

  • 显然,松手时,以上动画也需要复位。

我们的效果,基本上和原版一致了,写起来怎么样呢?
我不是标题党,如标题所说:

  • 简单:思路简单清晰易理解

  • 优雅:性能没有任何隐患,LayoutManager只会加载显示屏幕上可见的数量的View

  • 快速:利用ItemTouchHelper处理拖拽&滑动删除逻辑,核心代码不超过50行。且经过封装,四行代码就可以用。

伸手党福利:

如果懒得看这么多文字只想用,直接移步gayhub,gradle导入相关文件or复制。然后如下,搞定。

        mRv.setLayoutManager(new OverLayCardLayoutManager());
        CardConfig.initConfig(this);
        ItemTouchHelper.Callback callback = new RenRenCallback(mRv, mAdapter, mDatas);
        ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
        itemTouchHelper.attachToRecyclerView(mRv);

而且我将一些参
数都以变量形式计算,这样就做到了可配置,假如老板让你一开始多显示几层卡片,例如6层,你只需要修改一个参数即可,效果如图:
6层View

正确的姿势

正确的姿势就是:

  • 利用LayoutManager实现卡片层叠布局,值得注意的是,只layout出界面上可能会看见的那些View。

  • 搭配ItemTouchHelper,它本身实现了拖拽&滑动删除逻辑,我们只需要在onChildDraw()中绘制动画和onSwiped()中处理数据集(循环or删除)。

所以本文也算是填了[LayoutManger系列]的坑,实现了一个酷炫效果的布局。
Let's Go!

LayoutManager的实现卡片层叠

其实本例中的LayoutManager十分简单,因为ItemTouchHelper的存在,LayoutManager根本不需要处理它的滑动事件,而LayoutManager中最难写的就是在滑动时的View回收和复用,以及layoutView的处理。

关于LayoutManager的基础知识和铺垫,我就不再赘述,可参考我以前的文章:[LayoutManager实现流式布局]

唯一注意事项

但是即便如此,还是有一个唯一的注意事项。我们只layout出界面上可能会看见的那些View即可。
因为考虑到动画,所以是可能会看见
我们看人人美剧的界面:
底部细节
初始化时,界面上可见三个View,我们分别起名:TopView,Top-1View,Top-2View。其中TopView完全可见,Top-1View,Top-2View只有下边缘可见。

如文首GIF,滑动TopView时,Top-1View,Top-2View开始慢慢放大,并且向上位移,直至填充至它们各自上层的View。这时候露出了Top-3View

所以我们在书写LayoutManageronLayoutChildren()方法时,只要layout出当前数据集最后四个View即可。

前文提到的参数配置如下: