博文出處：玩轉仿探探卡片式滑動效果，歡迎大家關注我的博客，謝謝！
講起本篇博客的歷史起源，估計有一段“歷史”了。
最早可以追溯到我試玩探探這個 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() 方法：
@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 的觸摸滑動事件相必都不陌生吧，如果對這方面不太了解的同學可以看一下我之前的博客：《RecyclerView實現拖拽排序和側滑刪除》。
我們暫且命名為 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 。總體來說還是比較簡單的，相信你已經會啦。
Goodbye ~~
最后，放上 GitHub 地址：yuqirong/CardSwipeLayout
喜歡的可以來一波 star 哦。@_@
