Android仿探探卡片式滑动效果实现
前言
第一次进入探探软件界面,就被这种通过卡片式滑动来选择“喜欢/不喜欢”的设计所吸引了。当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路。不过毋庸置疑的是,这种效果的原理肯定和 listview / recyclerview 类似,涉及到 item view 的回收和重用,否则早就因为大量的 item view 而 oom 了。
再到后来,看到许多大神也推出了同样仿探探效果的博客,从头到尾阅读下来,写得通俗易懂,基本上没什么问题。于是,实现仿探探效果的想法再次出现在脑海中。那么,还犹豫什么,趁热来一发吧!就这么愉快地决定了。
首先面临的问题就是关于实现 view 上的考虑。毫无疑问。
recyclerview 是最佳选择!
recyclerview 是最佳选择!
recyclerview 是最佳选择!
重要的话讲三遍!!!
究其原因,第一,recyclerview 是自带 item view 回收和重用功能的,就不需要我们考虑这个问题了;第二,recyclerview 的布局方式是通过设置 layoutmanager 来实现的,这样就充分地把布局和 recyclerview “解耦”开来了。而 layoutmanager 是可以通过自定义的方式来实现的。这恰恰是我们想要的!!!再说一点,这也正是不选用 listview 的原因之一。
下面,我们就开始动手了。带你见证奇迹的时刻。
cardlayoutmanager
创建 cardlayoutmanager 并继承自 recyclerview.layoutmanager
。需要我们自己实现 generatedefaultlayoutparams()
方法:
@override public recyclerview.layoutparams generatedefaultlayoutparams() { return new recyclerview.layoutparams(viewgroup.layoutparams.wrap_content, viewgroup.layoutparams.wrap_content); }
一般情况下,像上面这样写即可。
下面这个方法就是我们的重点了。 onlayoutchildren(final recyclerview.recycler recycler, recyclerview.state state)
方法就是用来实现 item view 布局的:
@override public void onlayoutchildren(final recyclerview.recycler recycler, recyclerview.state state) { super.onlayoutchildren(recycler, state); // 先移除所有view removeallviews(); // 在布局之前,将所有的子 view 先 detach 掉,放入到 scrap 缓存中 detachandscrapattachedviews(recycler); int itemcount = getitemcount(); // 在这里,我们默认配置 cardconfig.default_show_item = 3。即在屏幕上显示的卡片数为3 // 当数据源个数大于最大显示数时 if (itemcount > cardconfig.default_show_item) { // 把数据源倒着循环,这样,第0个数据就在屏幕最上面了 for (int position = cardconfig.default_show_item; position >= 0; position--) { final view view = recycler.getviewforposition(position); // 将 item view 加入到 recyclerview 中 addview(view); // 测量 item view measurechildwithmargins(view, 0, 0); // getdecoratedmeasuredwidth(view) 可以得到 item view 的宽度 // 所以 widthspace 就是除了 item view 剩余的值 int widthspace = getwidth() - getdecoratedmeasuredwidth(view); // 同理 int heightspace = getheight() - getdecoratedmeasuredheight(view); // 将 item view 放入 recyclerview 中布局 // 在这里默认布局是放在 recyclerview 中心 layoutdecoratedwithmargins(view, widthspace / 2, heightspace / 2, widthspace / 2 + getdecoratedmeasuredwidth(view), heightspace / 2 + getdecoratedmeasuredheight(view)); // 其实屏幕上有四张卡片,但是我们把第三张和第四张卡片重叠在一起,这样看上去就只有三张 // 第四张卡片主要是为了保持动画的连贯性 if (position == cardconfig.default_show_item) { // 按照一定的规则缩放,并且偏移y轴。 // cardconfig.default_scale 默认为0.1f,cardconfig.default_translate_y 默认为14 view.setscalex(1 - (position - 1) * cardconfig.default_scale); view.setscaley(1 - (position - 1) * cardconfig.default_scale); view.settranslationy((position - 1) * view.getmeasuredheight() / cardconfig.default_translate_y); } else if (position > 0) { view.setscalex(1 - position * cardconfig.default_scale); view.setscaley(1 - position * cardconfig.default_scale); view.settranslationy(position * view.getmeasuredheight() / cardconfig.default_translate_y); } else { // 设置 mtouchlistener 的意义就在于我们想让处于顶层的卡片是可以随意滑动的 // 而第二层、第三层等等的卡片是禁止滑动的 view.setontouchlistener(montouchlistener); } } } else { // 当数据源个数小于或等于最大显示数时,和上面的代码差不多 for (int position = itemcount - 1; position >= 0; position--) { final view view = recycler.getviewforposition(position); addview(view); measurechildwithmargins(view, 0, 0); int widthspace = getwidth() - getdecoratedmeasuredwidth(view); int heightspace = getheight() - getdecoratedmeasuredheight(view); layoutdecoratedwithmargins(view, widthspace / 2, heightspace / 2, widthspace / 2 + getdecoratedmeasuredwidth(view), heightspace / 2 + getdecoratedmeasuredheight(view)); if (position > 0) { view.setscalex(1 - position * cardconfig.default_scale); view.setscaley(1 - position * cardconfig.default_scale); view.settranslationy(position * view.getmeasuredheight() / cardconfig.default_translate_y); } else { view.setontouchlistener(montouchlistener); } } } } private view.ontouchlistener montouchlistener = new view.ontouchlistener() { @override public boolean ontouch(view v, motionevent event) { recyclerview.viewholder childviewholder = mrecyclerview.getchildviewholder(v); // 把触摸事件交给 mitemtouchhelper,让其处理卡片滑动事件 if (motioneventcompat.getactionmasked(event) == motionevent.action_down) { mitemtouchhelper.startswipe(childviewholder); } return false; } };
总体来说,cardlayoutmanager 主要就是为 item view 布局,然后根据 position 做相对应的偏差。我们一起来看下完成的效果图:
可以看出,大致的效果已经有了。缺少的就是处理触摸滑动事件了。
onswipelistener
在看滑动事件的代码之前,我们先定义一个监听器。主要用于监听卡片滑动事件,代码就如下所示,注释也给出来了。应该都看得懂吧:
public interface onswipelistener<t> { /** * 卡片还在滑动时回调 * * @param viewholder 该滑动卡片的viewholder * @param ratio 滑动进度的比例 * @param direction 卡片滑动的方向,cardconfig.swiping_left 为向左滑,cardconfig.swiping_right 为向右滑, * cardconfig.swiping_none 为不偏左也不偏右 */ void onswiping(recyclerview.viewholder viewholder, float ratio, int direction); /** * 卡片完全滑出时回调 * * @param viewholder 该滑出卡片的viewholder * @param t 该滑出卡片的数据 * @param direction 卡片滑出的方向,cardconfig.swiped_left 为左边滑出;cardconfig.swiped_right 为右边滑出 */ void onswiped(recyclerview.viewholder viewholder, t t, int direction); /** * 所有的卡片全部滑出时回调 */ void onswipedclear(); }
carditemtouchhelpercallback
现在,我们可以回过头来看看卡片滑动了。对于 itemtouchhelper 来处理 item view 的触摸滑动事件相必都不陌生吧!
我们暂且命名为 carditemtouchhelpercallback 。对于 itemtouchhelper.callback
而言,需要在 getmovementflags(recyclerview recyclerview, recyclerview.viewholder viewholder)
方法中配置 swipeflags 和 dragflags 。
具体的方法如下,对于 swipeflags 只关心左右两个方向:
@override public int getmovementflags(recyclerview recyclerview, recyclerview.viewholder viewholder) { int dragflags = 0; int swipeflags = 0; recyclerview.layoutmanager layoutmanager = recyclerview.getlayoutmanager(); if (layoutmanager instanceof cardlayoutmanager) { swipeflags = itemtouchhelper.left | itemtouchhelper.right; } return makemovementflags(dragflags, swipeflags); }
还有一点需要注意,前面说过,为了防止第二层和第三层卡片也能滑动,因此我们需要设置 isitemviewswipeenabled()
返回 false 。
@override public boolean isitemviewswipeenabled() { return false; }
接下来,就是去重写 onmove(recyclerview recyclerview, recyclerview.viewholder viewholder, recyclerview.viewholder target)
和 onswiped(recyclerview.viewholder viewholder, int direction)
方法。但是因为在上面我们对于 dragflags 配置的是 0 ,所以在 onmove(recyclerview recyclerview, recyclerview.viewholder viewholder, recyclerview.viewholder target)
中直接返回 false 即可。
@override public boolean onmove(recyclerview recyclerview, recyclerview.viewholder viewholder, recyclerview.viewholder target) { return false; }
这样,我们就把目光投向 onswiped(recyclerview.viewholder viewholder, int direction)
方法:
@override public void onswiped(recyclerview.viewholder viewholder, int direction) { // 移除之前设置的 ontouchlistener, 否则触摸滑动会乱了 viewholder.itemview.setontouchlistener(null); // 删除相对应的数据 int layoutposition = viewholder.getlayoutposition(); t remove = datalist.remove(layoutposition); adapter.notifydatasetchanged(); // 卡片滑出后回调 onswipelistener 监听器 if (mlistener != null) { mlistener.onswiped(viewholder, remove, direction == itemtouchhelper.left ? cardconfig.swiped_left : cardconfig.swiped_right); } // 当没有数据时回调 onswipelistener 监听器 if (adapter.getitemcount() == 0) { if (mlistener != null) { mlistener.onswipedclear(); } } }
写好后,我们先来看看滑动效果:
发现还是差了点什么,没错!是缺少了动画。在滑动的过程中我们可以重写 onchilddraw(canvas c, recyclerview recyclerview, recyclerview.viewholder viewholder, float dx, float dy, int actionstate, boolean iscurrentlyactive)
方法来添加动画:
@override public void onchilddraw(canvas c, recyclerview recyclerview, recyclerview.viewholder viewholder, float dx, float dy, int actionstate, boolean iscurrentlyactive) { super.onchilddraw(c, recyclerview, viewholder, dx, dy, actionstate, iscurrentlyactive); view itemview = viewholder.itemview; if (actionstate == itemtouchhelper.action_state_swipe) { // 得到滑动的阀值 float ratio = dx / getthreshold(recyclerview, viewholder); // ratio 最大为 1 或 -1 if (ratio > 1) { ratio = 1; } else if (ratio < -1) { ratio = -1; } // 默认最大的旋转角度为 15 度 itemview.setrotation(ratio * cardconfig.default_rotate_degree); int childcount = recyclerview.getchildcount(); // 当数据源个数大于最大显示数时 if (childcount > cardconfig.default_show_item) { for (int position = 1; position < childcount - 1; position++) { int index = childcount - position - 1; view view = recyclerview.getchildat(position); // 和之前 onlayoutchildren 是一个意思,不过是做相反的动画 view.setscalex(1 - index * cardconfig.default_scale + math.abs(ratio) * cardconfig.default_scale); view.setscaley(1 - index * cardconfig.default_scale + math.abs(ratio) * cardconfig.default_scale); view.settranslationy((index - math.abs(ratio)) * itemview.getmeasuredheight() / cardconfig.default_translate_y); } } else { // 当数据源个数小于或等于最大显示数时 for (int position = 0; position < childcount - 1; position++) { int index = childcount - position - 1; view view = recyclerview.getchildat(position); view.setscalex(1 - index * cardconfig.default_scale + math.abs(ratio) * cardconfig.default_scale); view.setscaley(1 - index * cardconfig.default_scale + math.abs(ratio) * cardconfig.default_scale); view.settranslationy((index - math.abs(ratio)) * itemview.getmeasuredheight() / cardconfig.default_translate_y); } } // 回调监听器 if (mlistener != null) { if (ratio != 0) { mlistener.onswiping(viewholder, ratio, ratio < 0 ? cardconfig.swiping_left : cardconfig.swiping_right); } else { mlistener.onswiping(viewholder, ratio, cardconfig.swiping_none); } } } } private float getthreshold(recyclerview recyclerview, recyclerview.viewholder viewholder) { return recyclerview.getwidth() * getswipethreshold(viewholder); }
现在我们加上动画后,来看看效果:
发现还是有问题,第一层的卡片滑出去之后第二层的就莫名其妙地偏了。这正是因为 item view 重用机制“捣鬼”。所以我们应该在 clearview(recyclerview recyclerview, recyclerview.viewholder viewholder)
方法中重置一下:
@override public void clearview(recyclerview recyclerview, recyclerview.viewholder viewholder) { super.clearview(recyclerview, viewholder); viewholder.itemview.setrotation(0f); }
大功告成,我们试一下效果:
perfect !
正是我们梦寐以求的效果。我们终于实现了!!!
总结
在这整个代码流程中我们主要是运用了自定义 layoutmanager 以及 itemtouchhelper.callback 。总体来说还是比较简单的,相信你已经会啦。好了,以上就是这篇文章的全部内容了,希望本文的内容对各位android开发者们能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。