2. 程式人生 > >滑動刪除Item，拖拽切換Item，你想了解的都在這兒

滑動刪除Item，拖拽切換Item，你想了解的都在這兒

阿新 • • 發佈：2018-12-31

1. 概述

如果上兩篇對RecyclerView介紹後，依然沒有引起你的興趣，那麼下面關於RecyclerView的使用我相信一定會讓你如獲珍寶。直接看執行效果。


圖-1 RecyclerView滑動刪除
圖-2 RecyclerView拖拽切換

用ListView或者GridView實現上圖中的功能非常麻煩，而如果用RecyclerView來實現，則非常簡單。

如果對RecyclerView還沒有認識的同學，可以檢視這兩篇文章。

2. ItemTouchHelper&ItemToucheHelper.CallBack

要實現上面的效果，程式碼很簡單，只需要新增以下程式碼。

mItemTouchHelper = new ItemTouchHelper(mItemTouchCallBack);

mItemTouchHelper.attachToRecyclerView(mRecyclerView);

       ItemTouchHelper主要用於對RecyclerView滑動刪除和拖拽切換提供支援，它支援所有的型別的佈局管理器LayoutManager。它只有一個建構函式，必須傳入ItemToucheHelper.CallBack這個類的例項化物件。

       ItemToucheHelper.CallBack它可以控制使用者的哪些行為是可以操控列表的Item的，當用戶進行了這些操作，它會收到回撥。它有幾個重要的回撥方法。

mItemTouchCallBack = new ItemTouchHelper.Callback() {
    /**
     * 設定滑動型別標記
     *
     * @param recyclerView
     * @param viewHolder
     * @return
     *          返回一個整數型別的標識，用於判斷Item那種移動行為是允許的
     */
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        return
 
 makeMovementFlags(0,ItemTouchHelper.START | ItemTouchHelper.END);
    }

    /**
     * Item是否支援長按拖動
     *
     * @return
     *          true  支援長按操作
     *          false 不支援長按操作
     */
    @Override
    public boolean isLongPressDragEnabled() {
        return false;
    }

    /**
     * Item是否支援滑動
     *
     * @return
     *          true  支援滑動操作
     *          false 不支援滑動操作
     */
    @Override
    public boolean isItemViewSwipeEnabled() {
        return true;
    }

    /**
     * 拖拽切換Item的回撥
     *
     * @param recyclerView
     * @param viewHolder
     * @param target
     * @return
     *          如果Item切換了位置，返回true；反之，返回false
     */
    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        return true;
    }

    /**
     * 滑動刪除Item
     *
     * @param viewHolder
     * @param direction
     *           Item滑動的方向
     */
    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        mAdapter.delete(viewHolder.getAdapterPosition());
    }

    /**
     * Item被選中時候回撥
     *
     * @param viewHolder
     * @param actionState
     *          當前Item的狀態
     *          ItemTouchHelper.ACTION_STATE_IDLE   閒置狀態
     *          ItemTouchHelper.ACTION_STATE_SWIPE  滑動中狀態
     *          ItemTouchHelper#ACTION_STATE_DRAG   拖拽中狀態
     */
    @Override
    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
        //  item被選中的操作
        if(actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
            viewHolder.itemView.setBackgroundResource(R.color.md_gray);
        }
        super.onSelectedChanged(viewHolder, actionState);
    }

    /**
     * 移動過程中繪製Item
     *
     * @param c
     * @param recyclerView
     * @param viewHolder
     * @param dX
     *          X軸移動的距離
     * @param dY
     *          Y軸移動的距離
     * @param actionState
     *          當前Item的狀態
     * @param isCurrentlyActive
     *          如果當前被使用者操作為true，反之為false
     */
    @Override
    public void onChildDraw(Canvas c, RecyclerView recyclerView,
                            RecyclerView.ViewHolder viewHolder,
                            float dX, float dY, int actionState, boolean isCurrentlyActive) {
        float x = Math.abs(dX) + 0.5f;
        float width = viewHolder.itemView.getWidth();
        float alpha = 1f - x / width;
        viewHolder.itemView.setAlpha(alpha);
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState,
                isCurrentlyActive);
    }

    /**
     * 移動過程中繪製Item
     *
     * @param c
     * @param recyclerView
     * @param viewHolder
     * @param dX
     *          X軸移動的距離
     * @param dY
     *          Y軸移動的距離
     * @param actionState
     *          當前Item的狀態
     * @param isCurrentlyActive
     *          如果當前被使用者操作為true，反之為false
     */
    @Override
    public void onChildDrawOver(Canvas c, RecyclerView recyclerView,
                                RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState,
                                boolean isCurrentlyActive) {
        super.onChildDrawOver(c, recyclerView, viewHolder, dX, dY, actionState,
                isCurrentlyActive);
    }

    /**
     * 使用者操作完畢或者動畫完畢後會被呼叫
     *
     * @param recyclerView
     * @param viewHolder
     */
    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        // 操作完畢後恢復顏色
        viewHolder.itemView.setBackgroundResource(R.color.md_white);
        viewHolder.itemView.setAlpha(1.0f);
        super.clearView(recyclerView, viewHolder);
    }
};

       可以看見，其實使用者的行為都被官方提供的v7包給封裝了一層，只暴露出幾個重要的方法，也就是說滑動刪除和拖拽切換主要的操作行為都在ItemToucheHelper.CallBack中，我們主要關注它就行了。

3. 滑動刪除

       RecyclerView的具體使用就不再次貼程式碼了，不清楚的同學可以檢視RecyclerView使用這篇文章。看一下滑動刪除的ItemToucheHelper.CallBack的實現。

mItemTouchCallBack = new ItemTouchHelper.Callback() {
    /**
     * 設定滑動型別標記，可從兩端滑動Item
     */
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        return makeMovementFlags(0,ItemTouchHelper.START | ItemTouchHelper.END);
    }

    /**
     * 設定Item不支援長按拖動
     */
    @Override
    public boolean isLongPressDragEnabled() {
        return false;
    }

    /**
     * Item支援滑動
     */
    @Override
    public boolean isItemViewSwipeEnabled() {
        return true;
    }

    /**
     * 滑動刪除Item的操作
     */
    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        mAdapter.delete(viewHolder.getAdapterPosition());
    }

    /**
     * Item被選中時候，改變Item的背景
     */
    @Override
    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
        //  item被選中的操作
        if(actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
            viewHolder.itemView.setBackgroundResource(R.color.md_gray);
        }
        super.onSelectedChanged(viewHolder, actionState);
    }

    /**
     * 移動過程中重新繪製Item，隨著滑動的距離，設定Item的透明度
     */
    @Override
    public void onChildDraw(Canvas c, RecyclerView recyclerView,
                            RecyclerView.ViewHolder viewHolder,
                            float dX, float dY, int actionState, boolean isCurrentlyActive) {
        float x = Math.abs(dX) + 0.5f;
        float width = viewHolder.itemView.getWidth();
        float alpha = 1f - x / width;
        viewHolder.itemView.setAlpha(alpha);
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState,
                isCurrentlyActive);
    }

    /**
     * 使用者操作完畢或者動畫完畢後呼叫，恢復item的背景和透明度
     */
    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        // 操作完畢後恢復顏色
        viewHolder.itemView.setBackgroundResource(R.color.md_white);
        viewHolder.itemView.setAlpha(1.0f);
        super.clearView(recyclerView, viewHolder);
    }
};

做了以下修改，說明一下各個方法的作用：

  • 在getMovementFlags()方法中，呼叫了一個已經有的方法makeMovementFlags(int dragFlags, int swipeFlags)，它用於建立一個滑動型別標記，有兩個引數，第一個引數是拖拽的標記，第二個引數是滑動的標記。在這裡我設定不可拖拽Item（傳入0），可滑動Item的兩端。
  • isLongPressDragEnabled返回了false，讓Item不會觸發長按事件。
  • isItemViewSwipeEnabled()返回了true，讓Item支援滑動操作。
  • 在onSelectedChanged()方法中當Item的狀態為滑動或者拖拽時候，改變Item背景。
  • 在onChildDraw()方法中處理了Item滑動操作，首先根據滑動距離改變了Item的透明度，然後呼叫父類方法，讓Item根據手勢滑動。
  • 在clearView()中，恢復了Item的背景和透明度。
  • 在onSwiped()方法中，呼叫自定的Adapter中的delete()方法，將該位置的資料刪除，並重新繪製列表。
public void delete(int position) {
    if(position < 0 || position > getItemCount()) {
        return;
    }
    mData.remove(position);
    notifyItemRemoved(position);
}

最後實現的效果如下圖。


圖-3 RecyclerView滑動刪除

4. 拖拽切換

       拖拽切換和滑動刪除思路相同，只不過在處理過程有一些不同。網易新聞在新增欄目時候，就有網格的列表，長按之後可以拖拽切換Item，可以參考一下，也做個類似的demo。先看下ItemToucheHelper.CallBack的實現。

mItemTouchCallBack = new ItemTouchHelper.Callback() {
    /**
     * 設定滑動型別標記
     *
     * @param recyclerView
     * @param viewHolder
     * @return
     *          返回一個整數型別的標識，用於判斷Item那種移動行為是允許的
     */
    @Override
    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        return makeMovementFlags(ItemTouchHelper.RIGHT | ItemTouchHelper.LEFT | ItemTouchHelper.DOWN | ItemTouchHelper.UP, 0);
    }

    /**
     * Item是否支援長按拖動
     *
     * @return
     *          true  支援長按操作
     *          false 不支援長按操作
     */
    @Override
    public boolean isLongPressDragEnabled() {
        return true;
    }

    /**
     * Item是否支援滑動
     *
     * @return
     *          true  支援滑動操作
     *          false 不支援滑動操作
     */
    @Override
    public boolean isItemViewSwipeEnabled() {
        return false;
    }

    /**
     * 拖拽切換Item的回撥
     *
     * @param recyclerView
     * @param viewHolder
     * @param target
     * @return
     *          如果Item切換了位置，返回true；反之，返回false
     */
    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        mAdapter.move(viewHolder.getAdapterPosition(), target.getAdapterPosition());
        return true;
    }

    /**
     * Item被選中時候回撥
     *
     * @param viewHolder
     * @param actionState
     *          當前Item的狀態
     *          ItemTouchHelper.ACTION_STATE_IDLE   閒置狀態
     *          ItemTouchHelper.ACTION_STATE_SWIPE  滑動中狀態
     *          ItemTouchHelper#ACTION_STATE_DRAG   拖拽中狀態
     */
    @Override
    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
        //  item被選中的操作
        if(actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
            viewHolder.itemView.setBackgroundResource(R.color.md_gray);
        }
        super.onSelectedChanged(viewHolder, actionState);
    }

    /**
     * 使用者操作完畢或者動畫完畢後會被呼叫
     *
     * @param recyclerView
     * @param viewHolder
     */
    @Override
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        // 操作完畢後恢復顏色
        viewHolder.itemView.setBackgroundResource(R.drawable.md_common_bg);
        super.clearView(recyclerView, viewHolder);
    }
};

做了以下的修改，說明一下各個方法的作用：

  • getMovementFlags()中設定可上下左右拖拽Item，但是不能滑動Item。
  • isLongPressDragEnabled()設定為true，Item會出髮長按事件
  • isItemViewSwipeEnabled()設定為false，Item不可滑動
  • onSelectedChanged()設定了Item被選中時候的背景
  • clearView()恢復了Item的背景
  • onMove()呼叫了自定義的Adapter中的move()方法，將資料放到新的位置，並且重新繪製列表。
public void move(int fromPosition, int toPosition) {
    String prev = mData.remove(fromPosition);
    mData.add(toPosition > fromPosition ? toPosition - 1 : toPosition, prev);
    notifyItemMoved(fromPosition, toPosition);
}

然後在設定RecyclerView的一些其他屬性。

// 例項化ItemTouchHelperm
mItemTouchHelper = new ItemTouchHelper(mItemTouchCallBack);
// 例項化介面卡
mAdapter = new MDDragRvAdapter(MDMockData.getRvData());
// 例項化佈局管理器，網格樣式
mLayoutManager = new GridLayoutManager(this, 4, OrientationHelper.VERTICAL, false);
// 設定介面卡
mRecyclerView.setAdapter(mAdapter);
// 設定佈局管理器
mRecyclerView.setLayoutManager(mLayoutManager);
// 關聯RecyclerView和ItemTouchHelper
mItemTouchHelper.attachToRecyclerView(mRecyclerView);

最後看一下實現的效果。


圖-4 RecyclerView拖拽切換

5. 總結

       在熟悉了ItemToucheHelper.CallBack後，就能根據自己的需求實現各種效果，列表或者網格的都可以滿足，使用起來非常簡單。關於RecyclerView使用的介紹，也到此為止了。最後附上Demo工程的地址。

相關推薦

滑動刪除Item，拖拽切換Item，你想了解的都在這兒

1. 概述 如果上兩篇對RecyclerView介紹後，依然沒有引起你的興趣，那麼下面關於RecyclerView的使用我相信一定會讓你如獲珍寶。直接看執行效果。 圖-1 RecyclerView滑動刪除 圖-2 RecyclerView拖拽切換

你想了解×××，但你知道×××是什麽嗎？

讀書 環境 興趣 聯網 一點 微信公眾 .com 永遠 互聯 各位讀書人好，在當今社會互聯網+ 的 大環境下 ，給了我們這些 很年輕 有能力 有抱負，但就是沒有經濟能力的社會菜鳥們一次翻身，實現自己財富自由的機會！但是要在互聯網上，要實現財富自由需要具備幾方面！ 1.你要有

比爾·蓋茨：如果你想了解矽谷，就看《矽谷》吧

簡評：本文系譯文，這是 Bill Gates 為美劇《矽谷》撰寫的一篇文章，沒想到 Bill Gates 也在追這部超魔幻現實主義科技喜劇。劇中對科技行業的描繪恰如其分，劇組曾拜訪過 Bill Gates，並且還向 Gates 本人諮詢過本行業的歷史，但是沒有給他劇透哈哈 ：） 考慮到矽谷對我們生

燃盡圖做項目管理，你想了解的全部在這裏

目的 3.2 應對 工作空間 鼓勵 是否一致 圖片 發揮 之一 在運用敏捷的公司中，我們通常離在幾米開外的地方就可以看到團隊工作空間中有各種顏色的便箋，白板，各種圖表等。在敏捷中我們稱這些為信息發射源 Information Radiator。 它可以很好的用於項目的溝通、

Android使用RecycleView實現拖拽交換item位置

本文例項為大家分享了RecycleView實現拖拽交換item位置的具體程式碼，供大家參考，具體內容如下 老規矩,先來一張效果圖: 相比起ListView而言,RecycleView實現拖拽交換位置的效果要簡單很多,因為通過SDK中的ItemTouchHelper工具類可以輕鬆的實現這

自定義UITableView實現自定義左滑刪除按鈕及多按鈕，拖拽cell和表頭進行排序

本文介紹了能拖拽cell和表頭進行排序的自定義UITableView,並且能自定義左滑顯示的UIButton樣式。 先看左滑自定義按鈕效果圖  ：     override func tableView(_ tableView: UITableView, editA

Android 可拖拽的GridView效果實現, 長按可拖拽和item實時交換

在Android開發中，我們常常用到ListView和GridView，而有的時候系統的ListView，GridView並不能滿足我們的需求，所以我們需要自己定義一個ListView或者GridView,我的上一篇文章中就是自定義的一個左右滑動刪除item的例子，大家有興趣

iOS抽屜效果、二級選單（點選，拖拽滑動）

好像最近，看到好多Android上的抽屜效果，也忍不住想要自己寫一個。在Android裡面可以用SlidingDrawer，很方便的實現。IOS上面就只有自己寫了。其實原理很簡單就是 UIView 的移動，和一些手勢的操作。 // // 

【IOS】實現IOS版的抽屜效果（點選，拖拽滑動）

原文連結：http://blog.csdn.net/toss156/article/details/7400065 好像最近，看到好多Android上的抽屜效果，也忍不住想要自己寫一個。在Android裡面可以用SlidingDrawer，很方便的實現。IOS上面就只有自

Android 可拖拽的GridView效果實現, 長按可拖拽和item實時交換

在Android開發中，我們常常用到ListView和GridView，而有的時候系統的ListView，GridView並不能滿足我們的需求，所以我們需要自己定義一個ListView或者GridView,我的上一篇文章中就是自定義的一個左右滑動刪除item的例子

JavaScript實現拖拽預覽，AJAX小文件上傳

strong 名稱 獲取文件 是否 set 可能 lis idt scrip 本地上傳，提前預覽（圖片。視頻） 1.html中div標簽預覽顯示。button標簽觸發上傳事件。 <div id="drop_area" style=

圖片拖拽的繼承，引用 1 （需要引入2，3兩個js才能運行）

type left set height har title back 運行 fun <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

模擬點選，滑鼠移動，拖拽，按鍵，下拉框的處理

1.模擬點選 from selenium import webdriver from selenium.webdriver.common.action_chains import ActionChains from time import sleep driver = webdriver.Chrom

js事件中級（預設行為，拖拽）

預設行為：瀏覽器自帶的行為。 阻止預設/右鍵事件： <script> document.oncontextmenu=function(){ return false;//阻止預設事件 } </script> 例子：

VUE +element el-table運用sortable 拖拽table排序，實現行排序，列排序

Sortable.js是一款輕量級的拖放排序列表的js外掛（雖然體積小，但是功能很強大） 專案需求是要求能對element中 的table進行拖拽行排序 這裡用到了sorttable  Sortable.js是一款輕量級的拖放排序列表的js外掛（雖然體積小，但是功能很強大） 安裝步驟： npm in

在拖拽元素的時候，如果元素內部加了文字或圖片，拖拽效果會失靈？

在拖拽元素的時候，如果元素內部加了文字或圖片，拖拽效果會失靈？ 　　瀏覽器會給文字和圖片一個預設行為，當文字和圖片被選中的時候，會有一個拖拽效果，即使我們沒有人為他新增，所以當我們點選這個元素拖拽時有可能選中文字或圖片，觸發瀏覽器天生給的那個行為，從而導致我們寫的那個拖拽失靈；   　　 &

利用jQuery UI為CMS網站實現拖拽佈局效果，秒殺table佈局

1 實現效果     對於使用過CMS系統製作網站的人應該都清楚，製作網站過程有一個重要的步驟就是製作頁面佈局。目前，實現頁面佈局有兩種方式：table與div。這兩種方式各有其優劣之處。     Table：     優勢：使用簡單，使用表格進行佈局順理成章，概念和效果圖

H5音訊樣式修改，拖拽、點選進度操作、總時長載入

<audio/>標籤樣式修改 修改原因： 不同手機展示的樣式不同，特別是IOS 和安卓區別很大，需要統一樣式。 修改後樣式： 修改理解： 1>“點選播放”和"點選暫停" 呼叫原生audio.play() 和 audio.pause()來對進度條進

懸浮球（多機型懸浮窗許可權設定，狀態列適配，可自動或手動設定大小，點選跳轉WebView，拖拽處理）

懸浮球：多機型懸浮窗許可權設定，狀態列適配，可自動或手動設定大小，點選跳轉WebView，拖拽處理， 應用內和應用外都可以顯示（可設定取消）可做SDK 和依賴類，橫豎屏切換處理 專案地址： GitHub：https://github.com/gitUserBoy/flow_balls.

拖拽UISwitch按鈕，無法監聽到的問題

拖拽UISwitch按鈕，無法監聽到的問題       [cell.mySwitch addTarget:self action:@selector(changeState:) forControlEvents:UIControlEventTouchUp