前言

第一次进入探探软件界面，就被这种通过卡片式滑动来选择“喜欢/不喜欢”的设计所吸引了。当时就非常想通过自己来实现这种仿探探式的效果，然而却没什么思路。不过毋庸置疑的是，这种效果的原理肯定和 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开发者们能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# android  # 卡片滑动效果  # 卡片左右滑动  # android卡片式滑动  # 使用ViewPager实现左右循环滑动及滑动跳转  # Android App中ViewPager所带来的滑动冲突问题解决方法  # 自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果  # Android App中使用ViewPager+Fragment实现滑动切换效果  # Android利用ViewPager实现滑动广告板实例源码  # Android中ViewPager带来的滑动卡顿问题解决要点解析  # Android开发之使用ViewPager实现图片左右滑动切换效果  # Android ViewPager无限循环实现底部小圆点动态滑动  # Android实现横向滑动卡片效果  # ViewPager+RadioGroup实现左右滑动卡片布局  # 滑出  # 回调  # 的是  # 来实现  # 在这里  # 最佳选择  # 第二层  # 四张  # 我们可以  # 自定义  # 重写  # 相对应  # 移除  # 第三层  # 默认为  # 是一个  # 也不  # 好了  # 放在  # 就在 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  Laravel怎么使用Collection集合方法_Laravel数组操作高级函数pluck与map【手册】  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  laravel怎么实现图片的压缩和裁剪_laravel图片压缩与裁剪方法  Laravel如何为API生成Swagger或OpenAPI文档  深入理解Android中的xmlns:tools属性  焦点电影公司作品,电影焦点结局是什么？  如何在香港服务器上快速搭建免备案网站？  Laravel用户密码怎么加密_Laravel Hash门面使用教程  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  Java遍历集合的三种方式  html如何与html链接_实现多个HTML页面互相链接【互相】  微信小程序 canvas开发实例及注意事项  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  Laravel怎么清理缓存_Laravel optimize clear命令详解  Laravel如何优化应用性能？（缓存和优化命令）  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  如何快速选择适合个人网站的云服务器配置？  如何在七牛云存储上搭建网站并设置自定义域名？  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  Android仿QQ列表左滑删除操作  Laravel Sail是什么_基于Docker的Laravel本地开发环境Sail入门  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  Swift中循环语句中的转移语句 break 和 continue  如何在建站宝盒中设置产品搜索功能？  Android GridView 滑动条设置一直显示状态(推荐)  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  如何在建站主机中优化服务器配置？  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  ,南京靠谱的征婚网站？  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  详解Huffman编码算法之Java实现  如何确保FTP站点访问权限与数据传输安全？  清除minerd进程的简单方法  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  Laravel如何正确地在控制器和模型之间分配逻辑_Laravel代码职责分离与架构建议  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  Laravel Livewire是什么_使用Laravel Livewire构建动态前端界面  Java垃圾回收器的方法和原理总结  如何在Windows环境下新建FTP站点并设置权限？  如何在万网主机上快速搭建网站？  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  如何快速搭建个人网站并优化SEO？  jQuery validate插件功能与用法详解  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复