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开发者们能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。