2. 程式人生 > >Android使用RecycleView實現拖拽交換item位置

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

阿新 • • 發佈：2018-11-20

本文例項為大家分享了RecycleView實現拖拽交換item位置的具體程式碼，供大家參考，具體內容如下

老規矩,先來一張效果圖:

相比起ListView而言,RecycleView實現拖拽交換位置的效果要簡單很多,因為通過SDK中的ItemTouchHelper工具類可以輕鬆的實現這種效果,並且一套程式碼支援所有佈局方式;而ListView的話則需要通過生成View的快取映象設定到ImageView中,然後通過WindowManager來操作該ImageView,具體怎麼實現這裡就不展開講解了.迴歸到ItemTouchHelper話題上,這個工具類我們需要關心的方法只有一個,即:

?
1 public void attachToRecyclerView( @Nullable RecyclerView recyclerView) {}

通過名字也可以知道其作用就是和RecyclerView 建立關係.
而我們真正需要關心的地方就是ItemTouchHelper的內部類ItemTouchHelper.Callback,它是一個抽象類,需要我們去實現下面這幾個關鍵的抽象方法以及重寫幾個非抽象的方法:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 //決定拖拽/滑動的方向 public abstract int getMovementFlags(RecyclerView recyclerView,          ViewHolder viewHolder);   //和位置交換有關,可用於實現drag功能 public abstract boolean onMove(RecyclerView recyclerView,          ViewHolder viewHolder, ViewHolder target);   //和滑動有關,可用於實現swipe功能 public abstract void onSwiped(ViewHolder viewHolder, int direction);   //是否長按啟用拖拽功能,預設是true public boolean isLongPressDragEnabled() { return true ;}   //是否支援滑動,預設true public boolean isItemViewSwipeEnabled() { return true ;}   //和目標View的狀態改變有關,例如drag,swipe,ide public void onSelectedChanged(ViewHolder viewHolder, int actionState) {}   //和移除View的狀態有關,通常用於清除在onSelectedChanged,onChildDraw中對View設定的動畫 public void clearView(RecyclerView recyclerView, ViewHolder viewHolder) {}

當建立完ItemTouchHelper.Callback的實現類,我這裡稱之為SimpleItemTouchHelperCallback後,還需要將資料的變化以及View的狀態通知到RecycleView的Adapter中,為了達到解耦的目的,通常可以通過定義介面來實現,在SimpleItemTouchHelperCallback的構造方法中傳入該解耦介面的引用,並讓RecycleView的Adapter實現該解耦的介面,這樣就實現了這2個類的通訊問題了.

來看看我定義的解耦介面:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 /**   * 定義RecycleView的Adapter和SimpleItemTouchHelperCallback直接互動的介面方法   * Created by mChenys on 2017/2/16.   */ public interface ItemTouchHelperAdapter {      //資料交換    void onItemMove(RecyclerView.ViewHolder source, RecyclerView.ViewHolder target);      //資料刪除    void onItemDissmiss(RecyclerView.ViewHolder source);      //drag或者swipe選中    void onItemSelect(RecyclerView.ViewHolder source);      //狀態清除    void onItemClear(RecyclerView.ViewHolder source); }

完整的SimpleItemTouchHelperCallback程式碼如下:

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 4 /**   * 處理RecycleView的選中,拖拽移動,拖拽刪除的實現類   * Created by mChenys on 2017/2/16.   */ public class SimpleItemTouchHelperCallback extends ItemTouchHelper.Callback {      private ItemTouchHelperAdapter mAdapter;      public SimpleItemTouchHelperCallback(ItemTouchHelperAdapter adapter) {      mAdapter = adapter;    }      @Override    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {      //int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN; //允許上下的拖動      //int dragFlags =ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT; //允許左右的拖動      //int swipeFlags = ItemTouchHelper.LEFT; //只允許從右向左側滑      //int swipeFlags = ItemTouchHelper.DOWN; //只允許從上向下側滑      //一般使用makeMovementFlags(int,int)或makeFlag(int, int)來構造我們的返回值      //makeMovementFlags(dragFlags, swipeFlags)        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT; //允許上下左右的拖動      return makeMovementFlags(dragFlags, 0 );    }      @Override    public boolean isLongPressDragEnabled() {      return true ; //長按啟用拖拽    }      @Override    public boolean isItemViewSwipeEnabled() {      return false ; //不啟用拖拽刪除    }      @Override    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder source, RecyclerView.ViewHolder target) {      //通過介面傳遞拖拽交換資料的起始位置和目標位置的ViewHolder      mAdapter.onItemMove(source, target);      return true ;    }        @Override    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {      //移動刪除回撥,如果不用可以不用理      // mAdapter.onItemDissmiss(viewHolder);    }      @Override    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {      super .onSelectedChanged(viewHolder, actionState);      if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {        //當滑動或者拖拽view的時候通過介面返回該ViewHolder        mAdapter.onItemSelect(viewHolder);      }    }      @Override    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {      super .clearView(recyclerView, viewHolder);      if (!recyclerView.isComputingLayout()) {        //當需要清除之前在onSelectedChanged或者onChildDraw,onChildDrawOver設定的狀態或者動畫時通過介面返回該ViewHolder        mAdapter.onItemClear(viewHolder);      }    } }

RecycleView.Adapter實現類程式碼

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 /**   * Created by mChenys on 2017/2/15.   */ public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> implements ItemTouchHelperAdapter {    ...      @Override    public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {     ...    }      @Override    public void onBindViewHolder( final MyAdapter.MyViewHolder holder, int position) {      ...    }      @Override    public int getItemCount() {      //注意:這裡最少有一個,因為有多了一個新增按鈕      return null == mData ? 1 : mData.size() + 1 ;    }      @Override    public void onItemMove(RecyclerView.ViewHolder source,     RecyclerView.ViewHolder target) {      int fromPosition = source.getAdapterPosition();      int toPosition = target.getAdapterPosition();      if (fromPosition < mData.size() && toPosition < mData.size()) {        //交換資料位置        Collections.swap(mData, fromPosition, toPosition);        //重新整理位置交換        notifyItemMoved(fromPosition, toPosition);      }      //移動過程中移除view的放大效果      onItemClear(source);    }      @Override    public void onItemDissmiss(RecyclerView.ViewHolder source) {        int position = source.getAdapterPosition();      mData.remove(position); //移除資料      notifyItemRemoved(position); //重新整理資料移除    }      @Override    public void onItemSelect(RecyclerView.ViewHolder viewHolder) {        //當拖拽選中時放大選中的view      viewHolder.itemView.setScaleX( 1 .2f);      viewHolder.itemView.setScaleY( 1 .2f);    }      @Override    public void onItemClear(RecyclerView.ViewHolder viewHolder) {        //拖拽結束後恢復view的狀態      viewHolder.itemView.setScaleX( 1 .0f);      viewHolder.itemView.setScaleY( 1 .0f);    }      public class MyViewHolder extends RecyclerView.ViewHolder {     ...        public MyViewHolder(View itemView) {        super (itemView);       ...      }    }   }

MainActivity的使用方式

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 /**   * Created by mChenys on 2017/2/16.   */ public class MainActivity extends AppCompatActivity {    ...    @Override    protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      ...      mRecyclerView = (RecyclerView) findViewById(R.id.recycleView);      //建立adapter      MyAdapter myAdapter = new MyAdapter( this , mData);      //設定預設的佈局方式      mRecyclerView.setLayoutManager( new LinearLayoutManager( this , LinearLayoutManager.VERTICAL, false ));      //設定adapter      mRecyclerView.setAdapter(myAdapter);      //建立SimpleItemTouchHelperCallback      ItemTouchHelper.Callback callback = new SimpleItemTouchHelperCallback(myAdapter);      //用Callback構造ItemtouchHelper      ItemTouchHelper touchHelper = new ItemTouchHelper(callback);      //呼叫ItemTouchHelper的attachToRecyclerView方法建立聯絡      touchHelper.attachToRecyclerView(mRecyclerView);    }          @Override    public boolean onCreateOptionsMenu(Menu menu) {      ...      return super .onCreateOptionsMenu(menu);    }      @Override    public boolean onOptionsItemSelected(MenuItem item) {      ...      return super .onOptionsItemSelected(item);    }   } 錯誤解決方法
configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support') {
            if (!requested.name.startsWith("multidex")) {
                details.useVersion '25.3.0'
            }
        }
   &nbs

相關推薦

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

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

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

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

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

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

Java實現拖拽上傳

itl filename 表單元 ava 100% ondrag nco write obj 原文：http://www.open-open.com/code/view/1437358795584 在項目開發中由於實際需求，需要開發拖拽上傳的功能，ok！ 先看效果圖

js 利用jquery.gridly.js實現拖拽並且排序

user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

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

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

使用angular幫你實現拖拽

highlight 3.1 query 關閉 javascrip brush 返回 sem 改變 拖拽有多種寫法，在這裏就看一看angular版的拖拽。 <!DOCTYPE html> <html ng-app="myApp"> <head

Bootstrap -- 模態框實現拖拽移動

file set sin boot css modal 鏈接 href 需要 ### 　　這裏實現這個效果 　　需要引入 jquery-ui.min.js類庫 　　jquery-ui.min.css樣式 　　使用它提供的draggable()方法實現 ### 菜

js實現拖拽

無效 鼠標 sed 添加 知識 方法 tar curl setw 拖拽效果在網站中是很常見的一種效果，其實現原理很簡單，不過其中也隱藏了不少關鍵知識點，比如說焦點丟失問題等。接下來看看具體代碼是怎麽實現的。 css樣式（註意：元素要定位，不然沒有效果） 1 .box {

JS實現拖拽小案例

res pan urb posit htm eight || move use <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

用javascript實現拖拽帶來的種種問題(1)

round head 出發 mark mov 點擊事件 pan func 屬性 第一篇，先水一下，用javascript實現簡單的拖拽。主要還是想通過demo的形式總結一下各種event對象屬性。 首先先看一下，這個demo最終實現的效果： 主要涉及的屬性有： Mouse

結合AngularJS實現拖拽

per sta html 行為 FN ruby pre js實現 gin 最近項目中要實現，左側樹向右側樹中元素的拖拽功能，開始在網上看了好多ng-drag等等操作，都沒有實現預想的效果，偶然發現一篇博客，然後根據博客改編，實現了自己想要的效果。下面簡單的分析一下實現過程。

原生js實現 拖拽事件

ons window mov .get end ret htm 坐標 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

sortable實現拖拽功能

使用sortable這個強力外掛就很容易實現拖拽功能，它是目前比較牛逼的拖拽外掛，無需jquery，就可以全面支援pc和移動，參考以下github文件就有很詳細的說明，也給了很多 demo，外掛就用我給你的那個就可以，不用額外新增其他庫 GitHub：https://github.com/RubaXa/

js實現拖拽相容pc端和手機端

pc端拖動時候用到的三個事件：mousedown、mousemove、mouseup 在移動端與之相對應的分別是：touchstart、touchmove、touchend事件。 還有一點要注意的是在PC端獲取當前滑鼠的座標是：event.clientX和event.clientY， 在移動

基於Vue實現拖拽效果

效果圖 分清clientY pageY screenY layerY offsetY的區別 在我們想要做出拖拽這個效果的時候，我們需要分清這幾個屬性的區別，這幾個屬性都是計算滑鼠點選的偏移值，我們需要對其進行了解才可以繼續實現我們的拖拽效果 clientY 指的是距離可視頁面左上角

react實現拖拽

col blue set doc mousedown 實現 truct 坐標 The import React from ‘react‘export default class extends React.Component { constructor(props) {

原生javaScript實現拖拽功能

<head> <meta charset="utf-8"> <title>拖拽效果</title> <style type="text/css"> .drag_main{

Android 自定義View實現拖拽效果

騰訊QQ有那種紅點拖動效果,今天就來實現一個簡單的自定義View拖動效果,再回到原處,並非完全仿QQ紅點拖動 先來看一下效果圖 簡單說一下實現步驟 1.建立一個類繼承View 2.繪製出一個

js實現拖拽文字到頁面，讀取文字內容到textarea

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bo