ItemTouchHelper 實現交互動畫

時間 2020-02-15

標籤 itemtouchhelper 實現交互動畫简体版

原文原文鏈接

目錄介紹

01.拖拽須要實現功能
02.幾個重要的方法說明
03.簡單實現思路
04.拖拽效果上優化
05.完整代碼展現

好消息

博客筆記大彙總【16年3月到至今】，包括Java基礎及深刻知識點，Android技術博客，Python學習筆記等等，還包括平時開發中遇到的bug彙總，固然也在工做之餘收集了大量的面試題，長期更新維護而且修正，持續完善……開源的文件是markdown格式的！同時也開源了生活博客，從12年起，積累共計N篇[近100萬字，陸續搬到網上]，轉載請註明出處，謝謝！
連接地址：github.com/yangchong21…
若是以爲好，能夠star一下，謝謝！固然也歡迎提出建議，萬事起於忽微，量變引發質變！

01.拖拽須要實現功能

須要實現拖拽的功能以下所示
- 長按item後拖動，與其餘item交換位置
- 按住item右面的圖標後拖動，與其餘item交換位置
- 左滑item變透明並縮小，超出屏幕後，其餘item補上
- 右滑item變透明並縮小，超出屏幕後，其餘item補上

02.幾個重要的方法說明

幾個重要的方法說明

須要自定義類實現ItemTouchHelper.Callback類，並重寫其中幾個方法

isLongPressDragEnabled                  是否能夠長按拖拽排序
isItemViewSwipeEnabled                  Item是否能夠被滑動
getMovementFlags                        當用戶拖拽或者滑動Item的時候須要咱們告訴系統滑動或者拖拽的方向
onMove                                  當Item被拖拽的時候被回調
onSwiped                                當View被滑動刪除的時候
onSelectedChanged                       當item被拖拽或側滑時觸發
複製代碼

03.簡單實現思路

幾個方法中代碼思路
- 要想達到上面功能需求，在getMovementFlags方法中，當用戶拖拽或者滑動Item的時候須要咱們告訴系統滑動或者拖拽的方向，那咱們知道支持拖拽和滑動刪除的無非就是LinearLayoutManager和GridLayoutManager了，因此能夠根據佈局管理器的不一樣作了響應的區分。
- 在onMove方法中處理拖拽的回調邏輯，那麼何時被調用？當Item被拖拽排序移動到另外一個Item的位置的時候被調用。在onSwiped方法[當Item被滑動刪除到不見]中處理被刪除後的邏輯。爲了下降代碼耦合度，能夠經過接口listener回調的方式交給外部處理。
上下拖動時與其餘item進行位置交換
- ItemTouchHelper.Callback自己不具有將兩個item互換位置的功能，但RecyclerView能夠，咱們能夠在item拖動的時候把當前item與另外一個item的數據位置交換，再調用RecyclerView的notifyItemMoved()方法刷新佈局，同時，由於RecyclerView自帶item動畫，就能夠完成上面的交互效果。
左右滑出屏幕時其餘item補上
- 只要在item滑出屏幕時，將對應的數據刪掉，再調用RecyclerView的notifyItemRemoved()方法刷新佈局便可。

04.拖拽效果上優化

拖拽效果優化
- 在item被拖拽或側滑時修改背景色，當動做結束後將背景色恢復回來，而ItemTouchHelper.Callback中正好有對應這兩個狀態的方法，分別是：onSelectedChanged()、clearView()。那麼優化處理其實能夠放到這兩個方法中處理。
- 左右滑動使item透明度變淺且縮小該如何實現呢？讓item執行了兩種屬性動畫而已，在ItemTouchHelper.Callback中有一個方法能夠拿到item被拖拽或滑動時的位移變化，那就是onChildDraw()方法，在該方法中設置item漸變和縮放屬性動畫。
- 出現問題，按照上面作法會出現刪除後有空白item留出來，那麼爲何會出現這種狀況呢？並非多出了兩條空白數據，它們是正常的數據，只是看不到了，這是由於RecyclerView條目（itemView）覆用致使的，前面在onChildDraw()方法中對itemView設置了透明和縮小，而一個列表中固定只有幾個itemView而已，當那兩個透明縮小的itemView被再次使用時，以前設置的透明度和高度比例已是0，因此就出現了這種狀況，解決方法也很簡單，只要在item被移除後，將itemView的透明度和高度比例設置回來便可

05.完整代碼展現

代碼的GitHub地址：github.com/yangchong21…

完整代碼以下所示

/**
 * <pre>
 *     @author 楊充
 *     blog  : https://github.com/yangchong211
 *     time  : 2017/5/2
 *     desc  : 自定義ItemTouchHelper
 *     revise: 參考嚴正傑大神博客：https://blog.csdn.net/yanzhenjie1003/article/details/51935982
 * </pre>
 */
public class ItemTouchHelpCallback extends ItemTouchHelper.Callback {

    /**
     * Item操做的回調，去更新UI和數據源
     */
    private OnItemTouchCallbackListener onItemTouchCallbackListener;
    /**
     * 是否能夠拖拽
     */
    private boolean isCanDrag = false;
    /**
     * 是否能夠被滑動
     */
    private boolean isCanSwipe = false;
    /**
     * 按住拖動item的顏色
     */
    private int color = 0;

    public ItemTouchHelpCallback(OnItemTouchCallbackListener onItemTouchCallbackListener) {
        this.onItemTouchCallbackListener = onItemTouchCallbackListener;
    }

    /**
     * 設置是否能夠被拖拽
     *
     * @param canDrag 是true，否false
     */
    public void setDragEnable(boolean canDrag) {
        isCanDrag = canDrag;
    }

    /**
     * 設置是否能夠被滑動
     *
     * @param canSwipe 是true，否false
     */
    public void setSwipeEnable(boolean canSwipe) {
        isCanSwipe = canSwipe;
    }

    /**
     * 設置按住拖動item的顏色
     * @param color     顏色
     */
    public void setColor(@ColorInt int color){
        this.color = color;
    }

    /**
     * 當Item被長按的時候是否能夠被拖拽
     *
     * @return                      true
     */
    @Override
    public boolean isLongPressDragEnabled() {
        return isCanDrag;
    }

    /**
     * Item是否能夠被滑動(H：左右滑動，V：上下滑動)
     * isItemViewSwipeEnabled()返回值是否能夠拖拽排序，true能夠，false不能夠
     * @return                      true
     */
    @Override
    public boolean isItemViewSwipeEnabled() {
        return isCanSwipe;
    }

    /**
     * 當用戶拖拽或者滑動Item的時候須要咱們告訴系統滑動或者拖拽的方向
     * 動做標識分：dragFlags和swipeFlags
     * dragFlags：列表滾動方向的動做標識（如豎直列表就是上和下，水平列表就是左和右）
     * wipeFlags：與列表滾動方向垂直的動做標識（如豎直列表就是左和右，水平列表就是上和下）
     *
     * 思路：若是你不想上下拖動，能夠將 dragFlags = 0
     *      若是你不想左右滑動，能夠將 swipeFlags = 0
     *      最終的動做標識（flags）必需要用makeMovementFlags()方法生成
     */
    @Override
    public int getMovementFlags(@NonNull RecyclerView recyclerView,
                                @NonNull RecyclerView.ViewHolder viewHolder) {
        RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
        if (layoutManager instanceof GridLayoutManager) {
            // flag若是值是0，至關於這個功能被關閉
            int dragFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT
                    | ItemTouchHelper.UP | ItemTouchHelper.DOWN;
            int swipeFlag = 0;
            // create make
            return makeMovementFlags(dragFlag, swipeFlag);
        } else if (layoutManager instanceof LinearLayoutManager) {
            LinearLayoutManager linearLayoutManager = (LinearLayoutManager) layoutManager;
            int orientation = linearLayoutManager.getOrientation();

            int dragFlag = 0;
            int swipeFlag = 0;

            // 爲了方便理解，至關於分爲橫着的ListView和豎着的ListView
            // 若是是橫向的佈局
            if (orientation == LinearLayoutManager.HORIZONTAL) {
                swipeFlag = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
                dragFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
            } else if (orientation == LinearLayoutManager.VERTICAL) {
                // 若是是豎向的佈局，至關於ListView
                dragFlag = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
                swipeFlag = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
            }
            //第一個參數是拖拽flag，第二個是滑動的flag
            return makeMovementFlags(dragFlag, swipeFlag);
        }
        return 0;
    }


    /**
     * 當Item被拖拽的時候被回調
     *
     * @param recyclerView          recyclerView
     * @param srcViewHolder         當前被拖拽的item的viewHolder
     * @param targetViewHolder      當前被拖拽的item下方的另外一個item的viewHolder
     * @return                      是否被移動
     */
    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView,
                          @NonNull RecyclerView.ViewHolder srcViewHolder,
                          @NonNull RecyclerView.ViewHolder targetViewHolder) {
        if (onItemTouchCallbackListener != null) {
            int srcPosition = srcViewHolder.getAdapterPosition();
            int targetPosition = targetViewHolder.getAdapterPosition();
            return onItemTouchCallbackListener.onMove(srcPosition, targetPosition);
        }
        return false;
    }


    /**
     * 當item側滑出去時觸發（豎直列表是側滑，水平列表是豎滑）
     *
     * @param viewHolder            viewHolder
     * @param direction             滑動的方向
     */
    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
        if (onItemTouchCallbackListener != null) {
            onItemTouchCallbackListener.onSwiped(viewHolder.getAdapterPosition());
        }
    }

    /**
     * 當item被拖拽或側滑時觸發
     *
     * @param viewHolder            viewHolder
     * @param actionState           當前item的狀態
     */
    @Override
    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
        super.onSelectedChanged(viewHolder, actionState);
        //不論是拖拽或是側滑，背景色都要變化
        if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
            if (color==0){
                viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext()
                        .getResources().getColor(android.R.color.darker_gray));
            }else {
                viewHolder.itemView.setBackgroundColor(color);
            }
        }
    }


    /**
     * 當item的交互動畫結束時觸發
     *
     * @param recyclerView          recyclerView
     * @param viewHolder            viewHolder
     */
    @Override
    public void clearView(@NonNull RecyclerView recyclerView,
                          @NonNull RecyclerView.ViewHolder viewHolder) {
        super.clearView(recyclerView, viewHolder);
        viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources()
                .getColor(android.R.color.white));
        viewHolder.itemView.setAlpha(1);
        viewHolder.itemView.setScaleY(1);
    }


    @Override
    public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView recyclerView,
                            @NonNull RecyclerView.ViewHolder viewHolder,
                            float dX, float dY, int actionState, boolean isCurrentlyActive) {
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
        if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
            float value = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
            viewHolder.itemView.setAlpha(value);
            viewHolder.itemView.setScaleY(value);
        }
    }


    public interface OnItemTouchCallbackListener {
        /**
         * 當某個Item被滑動刪除的時候
         *
         * @param adapterPosition   item的position
         */
        void onSwiped(int adapterPosition);

        /**
         * 當兩個Item位置互換的時候被回調
         *
         * @param srcPosition       拖拽的item的position
         * @param targetPosition    目的地的Item的position
         * @return                  開發者處理了操做應該返回true，開發者沒有處理就返回false
         */
        boolean onMove(int srcPosition, int targetPosition);
    }
}
複製代碼

如何使用，代碼以下所示

ItemTouchHelpCallback callback = new ItemTouchHelpCallback((srcPosition, targetPosition) -> {
        if (imageBeans != null) {
            try {
                // 更換數據源中的數據Item的位置。更改list中開始和結尾position的位置
                Collections.swap(imageBeans, srcPosition, targetPosition);
                // 更新UI中的Item的位置，主要是給用戶看到交互效果
                mAdapter.notifyItemMoved(srcPosition, targetPosition);
            } catch (Exception e){
                e.printStackTrace();
            }
            return true;
        }
        return true;
    });
callback.setDragEnable(true);
callback.setSwipeEnable(true);
callback.setColor(this.getResources().getColor(R.color.base_background_block));
//建立helper對象，callback監聽recyclerView item 的各類狀態
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
try{
    //關聯recyclerView，一個helper對象只能對應一個recyclerView
    itemTouchHelper.attachToRecyclerView(recyclerView);
}catch (Exception e){
    e.printStackTrace();
}
複製代碼

開源庫地址[融合大多數recyclerView使用案例，能夠直接下載demo]：github.com/yangchong21…

00.RecyclerView複雜封裝庫
- 幾乎融合了該系列博客中絕大部分的知識點，歡迎一遍看博客一遍實踐，一步步從簡單實現功能強大的庫
01.RecyclerView
- RecycleView的結構，RecyclerView簡單用法介紹
02.Adapter
- RecyclerView.Adapter扮演的角色，通常經常使用的重寫方法說明，數據變動通知之觀察者模式，查看.notifyChanged();源碼
03.ViewHolder
- ViewHolder的做用，如何理解對於ViewHolder對象的數量「夠用」以後就中止調用onCreateViewHolder方法，ViewHolder簡單封裝
04.LayoutManager
- LayoutManager做用是什麼？setLayoutManager源碼分析
05.SnapHelper
- SnapHelper做用，什麼是Fling操做，SnapHelper類重要的方法，
06.ItemTouchHelper
07.SpanSizeLookup
- SpanSizeLookup如何使用，同時包含列表，2列的網格，3列的網格如何優雅實現？
08.ItemDecoration
- ItemDecoration的用途，addItemDecoration()源碼分析
09.RecycledViewPool
- RecyclerViewPool用於多個RecyclerView之間共享View。
11.RecyclerView上拉加載
- 添加recyclerView的滑動事件，上拉加載分頁數據，設置上拉加載的底部footer佈局，顯示和隱藏footer佈局
12.RecyclerView緩存原理
- RecyclerView作性能優化要說複雜也複雜，好比說佈局優化，緩存，預加載，複用池，刷新數據等等
13.SnapHelper源碼分析
- SnapHelper旨在支持RecyclerView的對齊方式，也就是經過計算對齊RecyclerView中TargetView 的指定點或者容器中的任何像素點。
16.自定義SnapHelper
- 自定義SnapHelper
19.自定義ItemDecoration分割線
- 須要自定義類實現RecyclerView.ItemDecoration類，並選擇重寫合適方法
22.RecyclerView問題彙總
- getLayoutPosition()和getAdapterPosition()的區別
23.RecyclerView滑動衝突
- 01.如何判斷RecyclerView控件滑動到頂部和底部
- 02.RecyclerView嵌套RecyclerView 條目自動上滾的Bug
- 03.ScrollView嵌套RecyclerView滑動衝突
- 04.ViewPager嵌套水平RecyclerView橫向滑動到底後不滑動ViewPager
- 05.RecyclerView嵌套RecyclerView的滑動衝突問題
- 06.RecyclerView使用Glide加載圖片致使圖片錯亂問題解決
24.ScrollView嵌套RecyclerView問題
- 要實如今NestedScrollView中嵌入一個或多個RecyclerView，會出現滑動衝突，焦點搶佔，顯示不全等。如何處理？