实现卡片布局，左右滑动

谁借莪１个温暖的怀抱￠ 2022-07-11 04:27 365阅读 0赞

人人影视版特点（需求）：

*  动画：最多可见的这四层，在顶层卡片滑动时，**每一层都会位移&放大动画，有种补充到顶层的感觉**。
 *  动画：松手时，如果未被判定为删除，则会有顶层以下每一层卡片**收缩回原位**的动画。
 *  无限循环：模仿人人影视，顶层卡片被删除后，补充到最底层。

除上述动画特点，探探版特点（需求）：

*  Roate的变化：左右滑动时，顶层卡片会慢慢**旋转**，到阈值max大概十五度。
 *  Alpha的变化：左滑时顶层卡片的**删除按钮会慢慢显现**，右滑时**爱心按钮会慢慢显现**。
 *  显然，松手时，以上动画也需要复位。

我们的效果，基本上和原版一致了，写起来怎么样呢？  
我不是标题党，如标题所说：

*  简单：思路**简单清晰易理解**
 *  优雅：**性能**没有任何隐患，`LayoutManager`只会加载显示屏幕上**可见的数量的View**。
 *  快速：利用`ItemTouchHelper`处理拖拽&滑动删除逻辑，核心代码不超过50行。且经过封装，四行代码就可以用。

### 伸手党福利： ###

如果懒得看这么多文字只想用，直接移步gayhub，gradle导入相关文件or复制。然后如下，搞定。

mRv.setLayoutManager(new OverLayCardLayoutManager());
            CardConfig.initConfig(this);
            ItemTouchHelper.Callback callback = new RenRenCallback(mRv, mAdapter, mDatas);
            ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
            itemTouchHelper.attachToRecyclerView(mRv);

而且我将一些参  
数都以变量形式计算，这样就做到了可配置，假如老板让你一开始多显示几层卡片，例如6层，你只需要修改一个参数即可，效果如图：  
![6层View][6_View]

### 正确的姿势 ###

正确的姿势就是：

*  利用`LayoutManager`实现卡片层叠布局，值得注意的是，只layout出界面上可能会看见的那些View。
 *  搭配`ItemTouchHelper`，它本身实现了拖拽&滑动删除逻辑，我们只需要在`onChildDraw()`中绘制动画和`onSwiped()`中处理数据集（循环or删除）。

所以本文也算是填了\[LayoutManger系列\]的坑，实现了一个酷炫效果的布局。  
Let’s [ Go][Go]!

# LayoutManager的实现卡片层叠 #

其实本例中的`LayoutManager`十分简单，因为`ItemTouchHelper`的存在，`LayoutManager`根本不需要处理它的滑动事件，而`LayoutManager`中最难写的就是在滑动时的`View`回收和复用，以及`layout`新`View`的处理。

关于LayoutManager的基础知识和铺垫，我就不再赘述，可参考我以前的文章：[LayoutManager实现流式布局][LayoutManager]

### 唯一注意事项 ###

但是即便如此，还是有一个唯一的注意事项。我们只`layout`出界面上**可能会看见**的那些`View`即可。  
因为考虑到动画，所以是**可能会看见**。  
我们看人人美剧的界面：  
![底部细节][38bc7867508386b0a877.png]  
初始化时，界面上可见三个`View`,我们分别起名:`TopView,Top-1View,Top-2View`。其中`TopView`完全可见，`Top-1View,Top-2View`只有下边缘可见。

如文首GIF，滑动`TopView`时，`Top-1View,Top-2View`开始慢慢放大，并且向上位移，直至填充至它们各自上层的View。这时候露出了`Top-3View`。

所以我们在书写`LayoutManager`的`onLayoutChildren()`方法时，只要`layout`出当前数据集**最后四个View**即可。

前文提到的参数配置如下：  
包括一些配置

*  界面最多显示几个View
 *  每一级View之间的Scale差异、translationY等等

public class CardConfig {
        //屏幕上最多同时显示几个Item
        public static int MAX_SHOW_COUNT;
        //每一级Scale相差0.05f，translationY相差7dp左右
        public static float SCALE_GAP;
        public static int TRANS_Y_GAP;
    
        public static void initConfig(Context context) {
            MAX_SHOW_COUNT = 6;
            SCALE_GAP = 0.05f;
            TRANS_Y_GAP = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 15, context.getResources().getDisplayMetrics());
        }
    }

LayoutManager全部代码如下，布满注释，如果看不懂，建议阅读前置文章\[LayoutManger系列\]：

public class OverLayCardLayoutManager extends RecyclerView.LayoutManager {
         
        @Override
        public RecyclerView.LayoutParams generateDefaultLayoutParams() {
            return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        }
        @Override
        public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
            detachAndScrapAttachedViews(recycler);
            int itemCount = getItemCount();
            if (itemCount >= MAX_SHOW_COUNT) {
                //从可见的最底层View开始layout，依次层叠上去
                for (int position = itemCount - MAX_SHOW_COUNT; position < itemCount; position++) {
                    View view = recycler.getViewForPosition(position);
                    addView(view);
                    measureChildWithMargins(view, 0, 0);
                    int widthSpace = getWidth() - getDecoratedMeasuredWidth(view);
                    int heightSpace = getHeight() - getDecoratedMeasuredHeight(view);
                    //我们在布局时，将childView居中处理，这里也可以改为只水平居中
                    layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2,
                            widthSpace / 2 + getDecoratedMeasuredWidth(view),
                            heightSpace / 2 + getDecoratedMeasuredHeight(view));
                    /**
                     * TopView的Scale 为1，translationY 0
                     * 每一级Scale相差0.05f，translationY相差7dp左右
                     *
                     * 观察人人影视的UI，拖动时，topView被拖动，Scale不变，一直为1.
                     * top-1View 的Scale慢慢变化至1，translation也慢慢恢复0
                     * top-2View的Scale慢慢变化至 top-1View的Scale，translation 也慢慢变化只top-1View的translation
                     * top-3View的Scale要变化，translation岿然不动
                     */
    
                    //第几层,举例子，count =7， 最后一个TopView（6）是第0层，
                    int level = itemCount - position - 1;
                    //除了顶层不需要缩小和位移
                    if (level > 0 /*&& level < mShowCount - 1*/) {
                        //每一层都需要X方向的缩小
                        view.setScaleX(1 - SCALE_GAP * level);
                        //前N层，依次向下位移和Y方向的缩小
                        if (level < MAX_SHOW_COUNT - 1) {
                            view.setTranslationY(TRANS_Y_GAP * level);
                            view.setScaleY(1 - SCALE_GAP * level);
                        } else {
        //第N层在 向下位移和Y方向的缩小的成都与 N-1层保持一致
                            view.setTranslationY(TRANS_Y_GAP * (level - 1));
                            view.setScaleY(1 - SCALE_GAP * (level - 1));
                        }
                    }
                }
            }
        }
    
    }

撸到这里，我们的静态界面已经成型，下面让我们动起来：  
![静态界面][5aafce84b484990fc886.png]

## ItemTouchHelper实现炫动滑动： ##

`ItemTouchHelper`的基础知识，建议大家自行学习，网上文章很多，我简单介绍一下，

> This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView.  
> It works with a RecyclerView and a Callback class, which configures what type of interactions  
> are enabled and also receives events when user performs these actions.  
> Depending on which functionality you support, you should override  
> \{@link Callback\#onMove(RecyclerView, ViewHolder, ViewHolder)\} and / or  
> \{@link Callback\#onSwiped(ViewHolder, int)\}.

翻译 + 总结：

> 这货是一个工具类，为RecyclerView扩展滑动消失（删除）和drag & drop效果的。  
> 它需要和RecyclerView、Callback 一起工作。Callback 类里定义了 允许哪些交互，并且会接收到对应的交互事件  
> 根据你需要哪种功能（滑动消失（删除）和drag & drop），你需要重写  
> Callback\#onMove(RecyclerView, ViewHolder, ViewHolder)—–drag & drop  
> Callback\#onSwiped(ViewHolder, int) 方法。 —–滑动消失（删除）

总结一下入门级用法如下，三个步骤:

*  定义一个Callback：`ItemTouchHelper.Callback callback = new ItemTouchHelper.SimpleCallback(int，int)`，这两个int分别代表要 **监听哪几个方向上的拖拽、滑动事件**。 常用：`ItemTouchHelper.DOWN | ItemTouchHelper.UP | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT`
 *  将Callback传给ItemTouchHelper：`ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);`
 *  关联ItemTouchHelper和RecyclerView：`itemTouchHelper.attachToRecyclerView(mRv)`

这三个步骤做完后，ItemTouchHelper就会自动帮我们完成 **滑动消失（删除）和drag & drop** 的功能。

### 滑动删除 ###

我们本例中，需要的是**滑动消失（删除）** ，所以我们的`Callback`不需要关注`onMove()`方法。  
且我们需要上下左右滑动都可以删除的效果。  
则如下构造Callback,传入上下左右：

ItemTouchHelper.Callback callback = new ItemTouchHelper.SimpleCallback(0,
                    ItemTouchHelper.DOWN | ItemTouchHelper.UP | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT)

`onSwiped()`方法，是滑动删除动作**已经发生后回调**的，即，我们先滑动卡片，然后松手，此时`ItemTouchHelper`判断我们的手势是删除手势，会**自动对这个卡片执行丢出屏幕外的动画**，同时回调`onSwiped()`方法。  
所以我们需要在其中如下写：

@Override
                public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
                    //★实现循环的要点
                    SwipeCardBean remove = mDatas.remove(viewHolder.getLayoutPosition());
                    mDatas.add(0, remove);
                    mAdapter.notifyDataSetChanged();
                }

在这里我们完成了循环的操作：

*  利用当前被删除的`View`的`ViewHolder`拿到`Position`
 *  删除数据集中对应`Position`的数据源
 *  同时将该数据源插入数据集中的首位。
 *  调用`notifyDataSetChanged()`,通知列表刷新  
    如此我们便完成了，**循环列表的需求**。

这里提一下为什么我们要调用`notifyDataSetChanged()`。  
看官方文档：

> ItemTouchHelper moves the items’ translateX/Y properties to reposition them

即ItemTouchHelper实现的滑动删除，其实只是**隐藏了这个滑动的View**。并不是真的删除了。

在[LayoutManager实现流式布局][LayoutManager]一文第五节中，我们已经提到，`notifyDataSetChanged()`会回调`onLayoutChildren()`这个函数，而在这个函数中，我们会**重新布局**，即真正的移除（不再layout）滑动掉的View，同时**会补充进新的最底层的View**。

嗯，JavaBean也看一眼吧,没亮点：

public class SwipeCardBean {
        private int postition;//位置
        private String url;
        private String name;
        }

我们写到这里已经完成了滑动删除的功能，其实我们什么都没有写是吧，复杂的判断都由ItemTouchHelper帮我们处理掉了，例如速度、滑动距离是否到达删除阈值，删除成功移除的动画、取消删除复位的动画等等。  
所以我说利用ItemTouchHelper才是正确的姿势，因为很简单&快速。  
下面我们来实现滑动时的动画。

### 滑动时动画 ###

我们需要重写`Callback`的`onChildDraw()`方法,这个方法参数较多：

* @param c                 The canvas which RecyclerView is drawing its children
    
         * @param recyclerView      The RecyclerView to which ItemTouchHelper is attached to
    
         * @param viewHolder        The ViewHolder which is being interacted by the User or it was
                                    interacted and simply animating to its original position
    
         * @param dX                The amount of horizontal displacement caused by user's action
    
         * @param dY                The amount of vertical displacement caused by user's action
    
         * @param actionState       是拖拽还是滑动事件  The type of interaction on the View. Is either {@link #ACTION_STATE_DRAG} or {@link #ACTION_STATE_SWIPE}.  
    
         * @param isCurrentlyActive 事件是用户产生还是动画产生的 True if this view is currently being controlled by the user or false it is simply animating back to its original state.

对我们比较有用的有`dX dX`，可以**判断滑动方向，以及计算滑动的比例，从而控制缩放、位移动画的程度**。

本文如下编写，对View的缩放、位移，其实是对LayoutManager里的操作的**逆操作**，值得注意的是最后一层，即`top-3View`在Y轴上是保持不变的：

@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);
                    //先根据滑动的dxdy 算出现在动画的比例系数fraction
                    double swipValue = Math.sqrt(dX * dX + dY * dY);
                    double fraction = swipValue / getThreshold(viewHolder);
                    //边界修正 最大为1
                    if (fraction > 1) {
                        fraction = 1;
                    }
                    //对每个ChildView进行缩放 位移
                    int childCount = recyclerView.getChildCount();
                    for (int i = 0; i < childCount; i++) {
                        View child = recyclerView.getChildAt(i);
                        //第几层,举例子，count =7， 最后一个TopView（6）是第0层，
                        int level = childCount - i - 1;
                        if (level > 0) {
                            child.setScaleX((float) (1 - SCALE_GAP * level + fraction * SCALE_GAP));
    
                            if (level < MAX_SHOW_COUNT - 1) {
                                child.setScaleY((float) (1 - SCALE_GAP * level + fraction * SCALE_GAP));
                                child.setTranslationY((float) (TRANS_Y_GAP * level - fraction * TRANS_Y_GAP));
                            }
                        }
                    }
                }

`getThreshold(viewHolder)`函数，返回**是否可以被回收掉的阈值**，关于它为什么这么写，我是从源码里找到的，本末会讲解：

//水平方向是否可以被回收掉的阈值
                public float getThreshold(RecyclerView.ViewHolder viewHolder) {
                    return mRv.getWidth() * getSwipeThreshold(viewHolder);
                }

## 探探效果的实现 ##

一开始文章撸到这里应该结束了，群里出来一个马小跳，告诉我探探和这略有不同，希望我一并实现。  
嗯，好吧。表示没听说过探探，那我先去下载一个看看吧。  
loading-install-open……..  
哎哟呵，十分钟过去了，我还在滑动看美女 忘记了要干什么，被女票看到胖揍了我一顿。  
好的，我捂着脸继续分析。

探探和人人影视有**两点不同**:

*  Roate的变化：左右滑动时，顶层卡片会慢慢**旋转**，到阈值max大概十五度。
 *  Alpha的变化：左滑时顶层卡片的**删除按钮会慢慢显现**，右滑时**爱心按钮会慢慢显现**。

感觉也是炒鸡简单，来吧。五分钟撸完吃外卖。修改点：

*  在layout布局添加『 X 』&『 爱心 』。
 *  在`onChildDraw()`里，按比例修改TopView的Rotate & Alpha

### 监听方向 ###

还有一点小不同，上滑下滑不再能删除，所以我们构造时只传入左右即可：

ItemTouchHelper.Callback callback = new ItemTouchHelper.SimpleCallback(0,
                    ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT)

### 布局添加两个按钮 ###

略

### onChildDraw() ###

在上文人人影视的基础上扩展，上文的效果，对`TopView`是不做任何操作的。这里只需要再对`TopView`做额外操作即可：

@Override
                public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
                    ...
                    for (int i = 0; i < childCount; i++) {
                        View child = recyclerView.getChildAt(i);
                        //第几层,举例子，count =7， 最后一个TopView（6）是第0层，
                        int level = childCount - i - 1;
                        if (level > 0) {
                            ...
                        } else {
                            //探探只是第一层加了rotate & alpha的操作
                            //不过他区分左右
                            float xFraction = dX / getThreshold(viewHolder);
                            //边界修正 最大为1
                            if (xFraction > 1) {
                                xFraction = 1;
                            } else if (xFraction < -1) {
                                xFraction = -1;
                            }
                            //rotate
                            child.setRotation(xFraction * MAX_ROTATION);
    
                            //自己感受一下吧 Alpha
                            if (viewHolder instanceof ViewHolder) {
                                ViewHolder holder = (ViewHolder) viewHolder;
                                if (dX > 0) {
                                    //露出左边，比心
                                    holder.setAlpha(R.id.iv_love, xFraction);
                                } else {
                                    //露出右边，滚犊子
                                    holder.setAlpha(R.id.iv_del, -xFraction);
                                }
                            }
                        }
                    }
                }

实现完后，我以为结束了，结果比我们想象的还要复杂一丢丢。因为此时删除后，`notifyDataSetChanged()`刷新界面，而`TopView`还是倾斜的，爱心、删除图标也是出现的。这显然与预期不符。所以我们需要在`onSwiped()`里将其复位:

@Override
                public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
                ...
                    //探探只是第一层加了rotate & alpha的操作
                    //对rotate进行复位
                    viewHolder.itemView.setRotation(0);
                    //自己感受一下吧 Alpha
                    if (viewHolder instanceof ViewHolder) {
                        ViewHolder holder = (ViewHolder) viewHolder;
                        holder.setAlpha(R.id.iv_love, 0);
                        holder.setAlpha(R.id.iv_del, 0);
                    }
                }

Ok，大功告成。效果和文首一样，尽情去跟产品UI嘚瑟吧。

## 阈值的寻找之路 ##

阈值的寻找，花费了我一些时间，因为我想做到**和系统的行为保持一致**。  
即，当删除、喜欢图标全显，当`Top-1View`显示完毕时，松手 `TopView`会回收。  
这就决定了我们的缩放、位移的阈值不能随便定，所以我们必须**去源代码里找答案**。

//水平方向是否可以被回收掉的阈值
        public float getThreshold(RecyclerView.ViewHolder viewHolder) {
            return mRv.getWidth() * getSwipeThreshold(viewHolder);
        }

因为滑动删除操作是touch事件导致的，且应该是ACTION\_UP时，触发的，  
所以在`ItemTouchHelper` 源码里，搜索onTouch字样：  
定位到：`mOnItemTouchListener`,->  
继续定位其中的`onTouchEvent()`,->  
`case MotionEvent.ACTION_UP:`,->  
`void select(ViewHolder selected, int actionState)`\->  
在这里我注意到有一句代码：`animationType = ANIMATION_TYPE_SWIPE_SUCCESS;`  
这说明删除成功，它的触发条件是：`if (swipeDir > 0)`\->  
`swipeDir`的值： `final int swipeDir = prevActionState == ACTION_STATE_DRAG ? 0 : swipeIfNecessary(prevSelected);` \->  
`int swipeIfNecessary(ViewHolder viewHolder)`\->

if ((swipeDir = checkHorizontalSwipe(viewHolder, flags)) > 0) {
                    return swipeDir;
      }

如此返回1的话，则->`checkHorizontalSwipe(viewHolder, flags)`\->  
在其中终于找到源码里阈值的获取之处：

final float threshold = mRecyclerView.getWidth() * mCallback
            .getSwipeThreshold(viewHolder);

于是我就直接复制出来。

## 总结 ##

本文利用`LayoutManager`加载显示屏幕上**可见的数量的View**，搭配`ItemTouchHelper`处理拖拽&滑动删除逻辑，核心代码不超过50行。且经过封装，四行代码就可以用。

记住`LayoutManager`，我们写，只layout出界面上可能会看见的那些View即可。

关于`ItemTouchHelper`，它本身实现了拖拽&滑动删除逻辑，我们只需要在`onChildDraw()`中绘制动画和`onSwiped()`中处理数据集（循环or删除）即可。

以后老板让你做这种效果，你只需要：

如果需要定制特殊的参数，例如显示6层：

CardConfig.MAX_SHOW_COUNT = 6;

[6_View]: https://dn-mhke0kuv.qbox.me/cabb8fc5257100815a17.gif
[Go]: http://lib.csdn.net/base/go
[LayoutManager]: http://blog.csdn.net/zxt0601/article/details/52956504
[38bc7867508386b0a877.png]: https://dn-mhke0kuv.qbox.me/38bc7867508386b0a877.png
[5aafce84b484990fc886.png]: https://dn-mhke0kuv.qbox.me/5aafce84b484990fc886.png