玩转仿探探卡片式滑动效果

讲起本篇博客讲起本篇博客的历史起源，估计有一段“历史”了。的历史起源，估计有一段“历史”了。

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

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

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

RecyclerView 是最佳选择!

RecyclerView 是最佳选择!

RecyclerView 是最佳选择!

重要的话讲三遍!!!

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

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

CardLayoutManager

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

1. @Override 
2.  
3. public RecyclerView.LayoutParams generateDefaultLayoutParams() { 
4.  
5.     return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); 
6.  
7. }  

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

下面这个方法就是我们的重点了。 onLayoutChildren(final RecyclerView.Recycler recycler, RecyclerView.State state) 方法就是用来实现 Item View 布局的：

1. @Override 
2.  
3. public void onLayoutChildren(final RecyclerView.Recycler recycler, RecyclerView.State state) { 
4.  
5.     super.onLayoutChildren(recycler, state); 
6.  
7.     // 先移除所有view 
8.  
9.     removeAllViews(); 
10.  
11.     // 在布局之前，将所有的子 View 先 Detach 掉，放入到 Scrap 缓存中 
12.  
13.     detachAndScrapAttachedViews(recycler); 
14.  
15.     int itemCount = getItemCount(); 
16.  
17.     // 在这里，我们默认配置 CardConfig.DEFAULT_SHOW_ITEM = 3。即在屏幕上显示的卡片数为3 
18.  
19.     // 当数据源个数大于最大显示数时 
20.  
21.     if (itemCount > CardConfig.DEFAULT_SHOW_ITEM) { 
22.  
23.         // 把数据源倒着循环，这样，第0个数据就在屏幕最上面了 
24.  
25.         for (int position = CardConfig.DEFAULT_SHOW_ITEM; position >= 0; position--) { 
26.  
27.             final View view = recycler.getViewForPosition(position); 
28.  
29.             // 将 Item View 加入到 RecyclerView 中 
30.  
31.             addView(view); 
32.  
33.             // 测量 Item View 
34.  
35.             measureChildWithMargins(view, 0, 0); 
36.  
37.             // getDecoratedMeasuredWidth(view) 可以得到 Item View 的宽度 
38.  
39.             // 所以 widthSpace 就是除了 Item View 剩余的值 
40.  
41.             int widthSpace = getWidth() - getDecoratedMeasuredWidth(view); 
42.  
43.             // 同理 
44.  
45.             int heightSpace = getHeight() - getDecoratedMeasuredHeight(view); 
46.  
47.             // 将 Item View 放入 RecyclerView 中布局 
48.  
49.             // 在这里默认布局是放在 RecyclerView 中心 
50.  
51.             layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2, 
52.  
53.                     widthSpace / 2 + getDecoratedMeasuredWidth(view), 
54.  
55.                     heightSpace / 2 + getDecoratedMeasuredHeight(view)); 
56.  
57.             // 其实屏幕上有四张卡片，但是我们把第三张和第四张卡片重叠在一起，这样看上去就只有三张 
58.  
59.             // 第四张卡片主要是为了保持动画的连贯性 
60.  
61.             if (position == CardConfig.DEFAULT_SHOW_ITEM) { 
62.  
63.                 // 按照一定的规则缩放，并且偏移Y轴。 
64.  
65.                 // CardConfig.DEFAULT_SCALE 默认为0.1f，CardConfig.DEFAULT_TRANSLATE_Y 默认为14 
66.  
67.                 view.setScaleX(1 - (position - 1) * CardConfig.DEFAULT_SCALE); 
68.  
69.                 view.setScaleY(1 - (position - 1) * CardConfig.DEFAULT_SCALE); 
70.  
71.                 view.setTranslationY((position - 1) * view.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
72.  
73.             } else if (position > 0) { 
74.  
75.                 view.setScaleX(1 - position * CardConfig.DEFAULT_SCALE); 
76.  
77.                 view.setScaleY(1 - position * CardConfig.DEFAULT_SCALE); 
78.  
79.                 view.setTranslationY(position * view.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
80.  
81.             } else { 
82.  
83.                 // 设置 mTouchListener 的意义就在于我们想让处于顶层的卡片是可以随意滑动的 
84.  
85.                 // 而第二层、第三层等等的卡片是禁止滑动的 
86.  
87.                 view.setOnTouchListener(mOnTouchListener); 
88.  
89.             } 
90.  
91.         } 
92.  
93.     } else { 
94.  
95.         // 当数据源个数小于或等于最大显示数时，和上面的代码差不多 
96.  
97.         for (int position = itemCount - 1; position >= 0; position--) { 
98.  
99.             final View view = recycler.getViewForPosition(position); 
100.  
101.             addView(view); 
102.  
103.             measureChildWithMargins(view, 0, 0); 
104.  
105.             int widthSpace = getWidth() - getDecoratedMeasuredWidth(view); 
106.  
107.             int heightSpace = getHeight() - getDecoratedMeasuredHeight(view); 
108.  
109.  
110.             layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2, 
111.  
112.                     widthSpace / 2 + getDecoratedMeasuredWidth(view), 
113.  
114.                     heightSpace / 2 + getDecoratedMeasuredHeight(view)); 
115.  
116.  
117.             if (position > 0) { 
118.  
119.                 view.setScaleX(1 - position * CardConfig.DEFAULT_SCALE); 
120.  
121.                 view.setScaleY(1 - position * CardConfig.DEFAULT_SCALE); 
122.  
123.                 view.setTranslationY(position * view.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
124.  
125.             } else { 
126.  
127.                 view.setOnTouchListener(mOnTouchListener); 
128.  
129.             } 
130.  
131.         } 
132.  
133.     } 
134.  
135. } 
136.  
137.  
138. private View.OnTouchListener mOnTouchListener = new View.OnTouchListener() { 
139.  
140.  
141.     @Override 
142.  
143.     public boolean onTouch(View v, MotionEvent event) { 
144.  
145.         RecyclerView.ViewHolder childViewHolder = mRecyclerView.getChildViewHolder(v); 
146.  
147.         // 把触摸事件交给 mItemTouchHelper，让其处理卡片滑动事件 
148.  
149.         if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) { 
150.  
151.             mItemTouchHelper.startSwipe(childViewHolder); 
152.  
153.         } 
154.  
155.         return false; 
156.  
157.     } 
158.  
159. };  

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

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

OnSwipeListener

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

1. public interface OnSwipeListener<T> { 
2.  
3.  
4.     /** 
5.  
6.      * 卡片还在滑动时回调 
7.  
8.      * 
9.  
10.      * @param viewHolder 该滑动卡片的viewHolder 
11.  
12.      * @param ratio      滑动进度的比例 
13.  
14.      * @param direction  卡片滑动的方向，CardConfig.SWIPING_LEFT 为向左滑，CardConfig.SWIPING_RIGHT 为向右滑， 
15.  
16.      *                   CardConfig.SWIPING_NONE 为不偏左也不偏右 
17.  
18.      */ 
19.  
20.     void onSwiping(RecyclerView.ViewHolder viewHolder, float ratio, int direction); 
21.  
22.  
23.     /** 
24.  
25.      * 卡片完全滑出时回调 
26.  
27.      * 
28.  
29.      * @param viewHolder 该滑出卡片的viewHolder 
30.  
31.      * @param t          该滑出卡片的数据 
32.  
33.      * @param direction  卡片滑出的方向，CardConfig.SWIPED_LEFT 为左边滑出；CardConfig.SWIPED_RIGHT 为右边滑出 
34.  
35.      */ 
36.  
37.     void onSwiped(RecyclerView.ViewHolder viewHolder, T t, int direction); 
38.  
39.  
40.     /** 
41.  
42.      * 所有的卡片全部滑出时回调 
43.  
44.      */ 
45.  
46.     void onSwipedClear(); 
47.  
48.  
49. }  

CardItemTouchHelperCallback

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

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

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

1. @Override 
2.  
3. public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
4.  
5.     int dragFlags = 0; 
6.  
7.     int swipeFlags = 0; 
8.  
9.     RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager(); 
10.  
11.     if (layoutManager instanceof CardLayoutManager) { 
12.  
13.         swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT; 
14.  
15.     } 
16.  
17.     return makeMovementFlags(dragFlags, swipeFlags); 
18.  
19. }  

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

1. @Override 
2.  
3. public boolean isItemViewSwipeEnabled() { 
4.  
5.     return false; 
6.  
7. }  

接下来，就是去重写 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 即可。

1. @Override 
2.  
3. public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { 
4.  
5.     return false; 
6.  
7. }  

这样，我们就把目光投向 onSwiped(RecyclerView.ViewHolder viewHolder, int direction) 方法：

1. @Override 
2.  
3. public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { 
4.  
5.     // 移除之前设置的 onTouchListener, 否则触摸滑动会乱了 
6.  
7.     viewHolder.itemView.setOnTouchListener(null); 
8.  
9.     // 删除相对应的数据 
10.  
11.     int layoutPosition = viewHolder.getLayoutPosition(); 
12.  
13.     T remove = dataList.remove(layoutPosition); 
14.  
15.     adapter.notifyDataSetChanged(); 
16.  
17.     // 卡片滑出后回调 OnSwipeListener 监听器 
18.  
19.     if (mListener != null) { 
20.  
21.         mListener.onSwiped(viewHolder, remove, direction == ItemTouchHelper.LEFT ? CardConfig.SWIPED_LEFT : CardConfig.SWIPED_RIGHT); 
22.  
23.     } 
24.  
25.     // 当没有数据时回调 OnSwipeListener 监听器 
26.  
27.     if (adapter.getItemCount() == 0) { 
28.  
29.         if (mListener != null) { 
30.  
31.             mListener.onSwipedClear(); 
32.  
33.         } 
34.  
35.     } 
36.  
37. }  

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

发现还是差了点什么，没错!是缺少了动画。在滑动的过程中我们可以重写 onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) 方法来添加动画：

1. @Override 
2.  
3. public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, 
4.  
5.                         float dX, float dY, int actionState, boolean isCurrentlyActive) { 
6.  
7.     super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); 
8.  
9.     View itemView = viewHolder.itemView; 
10.  
11.     if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) { 
12.  
13.         // 得到滑动的阀值 
14.  
15.         float ratio = dX / getThreshold(recyclerView, viewHolder); 
16.  
17.         // ratio 最大为 1 或 -1 
18.  
19.         if (ratio > 1) { 
20.  
21.             ratio = 1; 
22.  
23.         } else if (ratio < -1) { 
24.  
25.             ratio = -1; 
26.  
27.         } 
28.  
29.         // 默认最大的旋转角度为 15 度 
30.  
31.         itemView.setRotation(ratio * CardConfig.DEFAULT_ROTATE_DEGREE); 
32.  
33.         int childCount = recyclerView.getChildCount(); 
34.  
35.         // 当数据源个数大于最大显示数时 
36.  
37.         if (childCount > CardConfig.DEFAULT_SHOW_ITEM) { 
38.  
39.             for (int position = 1; position < childCount - 1; position++) { 
40.  
41.                 int index = childCount - position - 1; 
42.  
43.                 View view = recyclerView.getChildAt(position); 
44.  
45.                 // 和之前 onLayoutChildren 是一个意思，不过是做相反的动画 
46.  
47.                 view.setScaleX(1 - index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE); 
48.  
49.                 view.setScaleY(1 - index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE); 
50.  
51.                 view.setTranslationY((index - Math.abs(ratio)) * itemView.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
52.  
53.             } 
54.  
55.         } else { 
56.  
57.             // 当数据源个数小于或等于最大显示数时 
58.  
59.             for (int position = 0; position < childCount - 1; position++) { 
60.  
61.                 int index = childCount - position - 1; 
62.  
63.                 View view = recyclerView.getChildAt(position); 
64.  
65.                 view.setScaleX(1 - index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE); 
66.  
67.                 view.setScaleY(1 - index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE); 
68.  
69.                 view.setTranslationY((index - Math.abs(ratio)) * itemView.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
70.  
71.             } 
72.  
73.         } 
74.  
75.         // 回调监听器 
76.  
77.         if (mListener != null) { 
78.  
79.             if (ratio != 0) { 
80.  
81.                 mListener.onSwiping(viewHolder, ratio, ratio < 0 ? CardConfig.SWIPING_LEFT : CardConfig.SWIPING_RIGHT); 
82.  
83.             } else { 
84.  
85.                 mListener.onSwiping(viewHolder, ratio, CardConfig.SWIPING_NONE); 
86.  
87.             } 
88.  
89.         } 
90.  
91.     } 
92.  
93. } 
94.  
95.  
96. private float getThreshold(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
97.  
98.     return recyclerView.getWidth() * getSwipeThreshold(viewHolder); 
99.  
100. }  

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

发现还是有问题，第一层的卡片滑出去之后第二层的就莫名其妙地偏了。这正是因为 Item View 重用机制“捣鬼”。所以我们应该在 clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) 方法中重置一下：

1. @Override 
2.  
3. public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
4.  
5.     super.clearView(recyclerView, viewHolder); 
6.  
7.     viewHolder.itemView.setRotation(0f); 
8.  
9. }  

大功告成，我们试一下效果：

Perfect !

这正是我们梦寐以求的效果。我们终于实现了!!!

总结一下，在这整个代码流程中我们主要是运用了自定义 LayoutManager 以及 ItemTouchHelper.Callback 。总体来说还是比较简单的，相信你已经会啦。

作者：俞其荣

来源：51CTO