【移动应用开发技术】Android仿探探卡片式滑动效果实现

【移动应用开发技术】Android仿探探卡片式滑动效果实现

前言第一次进入探探软件界面，就被这种通过卡片式滑动来选择“喜欢/不喜欢”的设计所吸引了。当时就非常想通过自己来实现这种仿探探式的效果，然而却没什么思路。不过毋庸置疑的是，这种效果的原理肯定和ListView/RecyclerView类似，涉及到ItemView的回收和重用，否则早就因为大量的ItemView而OOM了。

再到后来，看到许多大神也推出了同样仿探探效果的博客，从头到尾阅读下来，写得通俗易懂，基本上没什么问题。于是，实现仿探探效果的想法再次出现在脑海中。那么，还犹豫什么，趁热来一发吧!就这么愉快地决定了。

首先面临的问题就是关于实现View上的考虑。毫无疑问。

RecyclerView是最佳选择!

RecyclerView是最佳选择!

RecyclerView是最佳选择!

重要的话讲三遍!!!

究其原因，第一，RecyclerView是自带ItemView回收和重用功能的，就不需要我们考虑这个问题了;第二，RecyclerView的布局方式是通过设置LayoutManager来实现的，这样就充分地把布局和RecyclerView“解耦”开来了。而LayoutManager是可以通过自定义的方式来实现的。这恰恰是我们想要的!!!再说一点，这也正是不选用ListView的原因之一。

下面，我们就开始动手了。带你见证奇迹的时刻。

CardLayoutManager

创建CardLayoutManager并继承自RecyclerView.LayoutManager。需要我们自己实现generateDefaultLayoutParams()方法：

一般情况下，像上面这样写即可。

下面这个方法就是我们的重点了。onLayoutChildren(finalRecyclerView.Recyclerrecycler,RecyclerView.Statestate)方法就是用来实现ItemView布局的：

总体来说，CardLayoutManager主要就是为ItemView布局，然后根据position做相对应的偏差。我们一起来看下完成的效果图：

可以看出，大致的效果已经有了。缺少的就是处理触摸滑动事件了。

OnSwipeListener

在看滑动事件的代码之前，我们先定义一个监听器。主要用于监听卡片滑动事件，代码就如下所示，注释也给出来了。应该都看得懂吧：

CardItemTouchHelperCallback

现在，我们可以回过头来看看卡片滑动了。对于ItemTouchHelper来处理ItemView的触摸滑动事件相必都不陌生吧!

我们暂且命名为CardItemTouchHelperCallback。对于ItemTouchHelper.Callback而言，需要在getMovementFlags(RecyclerViewrecyclerView,RecyclerView.ViewHolderviewHolder)方法中配置swipeFlags和dragFlags。

具体的方法如下，对于swipeFlags只关心左右两个方向：

还有一点需要注意，前面说过，为了防止第二层和第三层卡片也能滑动，因此我们需要设置isItemViewSwipeEnabled()返回false。

接下来，就是去重写onMove(RecyclerViewrecyclerView,RecyclerView.ViewHolderviewHolder,RecyclerView.ViewHoldertarget)和onSwiped(RecyclerView.ViewHolderviewHolder,intdirection)方法。但是因为在上面我们对于dragFlags配置的是0，所以在onMove(RecyclerViewrecyclerView,RecyclerView.ViewHolderviewHolder,RecyclerView.ViewHoldertarget)中直接返回false即可。

这样，我们就把目光投向onSwiped(RecyclerView.ViewHolderviewHolder,intdirection)方法：

写好后，我们先来看看滑动效果：

发现还是差了点什么，没错!是缺少了动画。在滑动的过程中我们可以重写onChildDraw(Canvasc,RecyclerViewrecyclerView,RecyclerView.ViewHolderviewHolder,floatdX,floatdY,intactionState,booleanisCurrentlyActive)方法来添加动画：

现在我们加上动画后，来看看效果：

发现还是有问题，第一层的卡片滑出去之后第二层的就莫名其妙地偏了。这正是因为ItemView重用机制“捣鬼”。所以我们应该在clearView(Recycle