玩轉仿探探卡片式滑動效果

HannahPeder 7年前發布 | 15K 次閱讀 Android開發移動開發 RecyclerView

最早可以追溯到我試玩探探這個 APP 。第一次進入軟件界面，就被這種通過卡片式滑動來選擇“喜歡/不喜歡”的設計所吸引了。當時就非常想通過自己來實現這種仿探探式的效果，然而卻沒什么思路。不過毋庸置疑的是，這種效果的原理肯定和 ListView / RecyclerView 類似，涉及到 Item View 的回收和重用，否則早就因為大量的 Item View 而 OOM 了。

再到后來，看到許多大神也推出了同樣仿探探效果的博客，從頭到尾閱讀下來，寫得通俗易懂，基本上沒什么問題。于是，實現仿探探效果的想法再次出現在腦海中。那么，還猶豫什么，趁熱來一發吧！就這么愉快地決定了。

首先面臨的問題就是關于實現 View 上的考慮。毫無疑問，

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 。總體來說還是比較簡單的，相信你已經會啦。

來自：https://juejin.im/entry/58c6625c570c3500583d4d7d

本文由用戶 HannahPeder 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1489474898688.html

Android開發移動開發 RecyclerView

玩轉仿探探卡片式滑動效果

CardLayoutManager

OnSwipeListener

CardItemTouchHelperCallback

相關經驗

相關資訊

相關文檔

目錄