玩转仿探探卡片式滑动效果
讲起本篇博客讲起本篇博客的历史起源，估计有一段“历史”了。的历史起源，估计有一段“历史”了。
最早可以追溯到我试玩探探这个 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