使用RecylerView完成拖動(dòng)排序高仿qq側(cè)滑刪除功能
最近使用到Recylerview完成拖動(dòng)排序,側(cè)滑刪除,在此記錄一下。
需要使用到:ItemTouchHelper.Callback這個(gè)類。
效果圖:
在有RecylerView的Activity中,除了設(shè)置Adapter還需要做的事情有:
MyItemTouchHelperCallback callback = new MyItemTouchHelperCallback(adapter); //此類繼承ItemTouchHelper.Callback,這是幫助處理RecylerView拖動(dòng)側(cè)滑操作的輔助類 ItemTouchHelper helper = new ItemTouchHelper(callback); //用上面實(shí)例化的callback實(shí)例化一個(gè)ItemTouchHelper對(duì)象。套路代碼,沒啥好說的,固定做法 helper.attachToRecyclerView(recyclerView); //讓help幫助處理recylerview的滑動(dòng),側(cè)滑操作
Activity中的操作就這么簡(jiǎn)單。
接下來(lái)定義一個(gè)接口,這個(gè)接口是為了解除耦合,因?yàn)槲铱吹接幸恍┪恼略赼ctivity中處理了onMove和onSwipe,抽象出來(lái)更好理解。
public interface OnMoveAndSwipeListener { public boolean onItemMove(int fromPosition, int toPosition); //注意返回boolean哦 public void onItemDismiss(int position); }
在RecylerView的Adapter中實(shí)現(xiàn)此接口,
復(fù)寫上面的兩個(gè)方法,
@Override public boolean onItemMove(int fromPosition, int toPosition) { if (fromPosition < toPosition) { //往下移動(dòng)時(shí),做數(shù)據(jù)交換 for (int i = fromPosition; i < toPosition; i++) { Collections.swap(list,i,i+1); } }else{ //往上移動(dòng),做數(shù)據(jù)交換 for (int i = fromPosition; i >toPosition ; i--) { Collections.swap(list,i,i-1); } } notifyItemMoved(fromPosition,toPosition); return true; } @Override public void onItemDismiss(int position) { //此例沒有對(duì)側(cè)滑做操作,如果需要就在此模仿onItemMove方法,刪除對(duì)應(yīng)位置的數(shù)據(jù),并且刷新界面就可以了 }
這樣Adapter的工作也就完成了,一樣也很簡(jiǎn)單,都有固定的套路,注意大家看到的demo都是有個(gè)默認(rèn)的動(dòng)畫,這個(gè)動(dòng)畫效果是你在設(shè)置RecylerView時(shí),recylerview.setItemAnimator(參數(shù));設(shè)置進(jìn)去的,如果你沒有調(diào)用此方法,則就是默認(rèn)動(dòng)畫效果。
除了設(shè)置Adapter還需要做的事情有:
寫一個(gè)類繼承ItemTouchHelper.Callback,這就是最后一步了,也是本文最開始在Activity中實(shí)例化的類,
代碼也不多:
public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback { MyAdapter adapter; public MyItemTouchHelperCallback(MyAdapter adapter) { this.adapter = adapter; } @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { //復(fù)寫此方法用來(lái)設(shè)置我需要處理哪些操作 //我要處理上下拖動(dòng),就設(shè)置up down,如果是gridview類型的recylerview,up,down,left,right都可以處理 final int moveMode = ItemTouchHelper.UP | ItemTouchHelper.DOWN; //本例沒有處理側(cè)滑,如果需要處理側(cè)滑,就把注釋取消掉 //final int swipeMode = ItemTouchHelper.START | ItemTouchHelper.END; Log.e("getMovementFlags","getMovementFlags"); return makeMovementFlags(moveMode, 0);//不處理什么,就傳0 } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { //當(dāng)你拖動(dòng)時(shí)就會(huì)觸發(fā)此回調(diào),然后調(diào)用在adapter中復(fù)寫的onItemMove方法,去交換數(shù)據(jù) return adapter.onItemMove(viewHolder.getAdapterPosition(),target.getAdapterPosition()); } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //如果你要處理側(cè)滑就取消注釋,邏輯和上面的onMove一樣 // adapter.onItemDismiss(viewHolder.getAdapterPosition()); } @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { //此方法在你選中一個(gè)item拖動(dòng)時(shí)觸發(fā),所以你可以在這里給選中的item設(shè)置一個(gè)背景色,用于高亮提示你選中了這個(gè)背景色 super.onSelectedChanged(viewHolder, actionState); if (actionState!= ItemTouchHelper.ACTION_STATE_IDLE){ viewHolder.itemView.setBackgroundColor(Color.LTGRAY); } } @Override public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { //因?yàn)槟阍O(shè)置了背景色,所以在你不選中的時(shí)候,要取消掉這個(gè)背景色。 super.clearView(recyclerView, viewHolder); viewHolder.itemView.setBackgroundColor(0); } }
到此為止,一個(gè)簡(jiǎn)單的拖動(dòng)和側(cè)滑就完成了,其實(shí)拖動(dòng)和側(cè)滑的邏輯都是一樣的,按著上面的步驟來(lái),效果就出來(lái)了。
上面只是一個(gè)簡(jiǎn)單的效果。把上面的效果實(shí)現(xiàn)了,接下來(lái)看更進(jìn)階一點(diǎn)的效果:
RecycleViewSwipeDismiss
要做到上述的效果,先說一下上面的邏輯:
首先他的每個(gè)Item的布局是兩層:
<?xml version="1.0" encoding="utf-8"?> <!--背景view,用于提示用戶操作結(jié)果--> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_background" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/iv_done" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="16dp" android:layout_marginStart="16dp" android:src="@mipmap/bt_ic_done_white_24" /> <ImageView android:id="@+id/iv_schedule" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:src="@mipmap/bt_ic_schedule_white_24" /> <!--滑動(dòng)操作的view--> <LinearLayout android:id="@+id/ll_item" android:layout_width="match_parent" android:layout_height="64dp" android:background="@android:color/white" android:gravity="center_vertical" android:orientation="vertical" android:paddingLeft="16dp" android:paddingRight="16dp"> <TextView android:id="@+id/tv_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" tools:text="Item" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_below="@id/ll_item" android:background="#B2B2b2" /> </RelativeLayout>
原理:全屏的linearlayout負(fù)責(zé)側(cè)滑效果,而根布局是有顏色有圖片的那一層,因?yàn)閘inearlayout被滑走了,所以根布局以及上面的圖片就出來(lái)了。
需要在MyItemTouchHelperCallback中重新復(fù)寫的幾個(gè)方法,以及多復(fù)寫的幾個(gè)方法:
<span style="white-space:pre"> </span> @Override public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { // 釋放View時(shí)回調(diào),清除背景顏色,隱藏圖標(biāo) // 默認(rèn)是操作ViewHolder的itemView,這里調(diào)用ItemTouchUIUtil的clearView方法傳入指定的view getDefaultUIUtil().clearView(((SampleAdapter.ItemViewHolder) viewHolder).vItem); ((SampleAdapter.ItemViewHolder) viewHolder).vBackground.setBackgroundColor(Color.TRANSPARENT); ((SampleAdapter.ItemViewHolder) viewHolder).ivSchedule.setVisibility(View.GONE); ((SampleAdapter.ItemViewHolder) viewHolder).ivDone.setVisibility(View.GONE); } @Override public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) { // 當(dāng)viewHolder的滑動(dòng)或拖拽狀態(tài)改變時(shí)回調(diào) if (viewHolder != null) { // 默認(rèn)是操作ViewHolder的itemView,這里調(diào)用ItemTouchUIUtil的clearView方法傳入指定的view getDefaultUIUtil().onSelected(((SampleAdapter.ItemViewHolder) viewHolder).vItem); } } @Override public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { // ItemTouchHelper的onDraw方法會(huì)調(diào)用該方法,可以使用Canvas對(duì)象進(jìn)行繪制,繪制的圖案會(huì)在RecyclerView的下方 // 默認(rèn)是操作ViewHolder的itemView,這里調(diào)用ItemTouchUIUtil的clearView方法傳入指定的view getDefaultUIUtil().onDraw(c, recyclerView, ((SampleAdapter.ItemViewHolder) viewHolder).vItem, dX, dY, actionState, isCurrentlyActive); if (dX > 0) { // 向左滑動(dòng)是的提示 ((SampleAdapter.ItemViewHolder) viewHolder).vBackground.setBackgroundResource(R.color.colorDone); ((SampleAdapter.ItemViewHolder) viewHolder).ivDone.setVisibility(View.VISIBLE); ((SampleAdapter.ItemViewHolder) viewHolder).ivSchedule.setVisibility(View.GONE); } if (dX < 0) { // 向右滑動(dòng)時(shí)的提示 ((SampleAdapter.ItemViewHolder) viewHolder).vBackground.setBackgroundResource(R.color.colorSchedule); ((SampleAdapter.ItemViewHolder) viewHolder).ivSchedule.setVisibility(View.VISIBLE); ((SampleAdapter.ItemViewHolder) viewHolder).ivDone.setVisibility(View.GONE); } } @Override public void onChildDrawOver(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) { // ItemTouchHelper的onDrawOver方法會(huì)調(diào)用該方法,可以使用Canvas對(duì)象進(jìn)行繪制,繪制的圖案會(huì)在RecyclerView的上方 // 默認(rèn)是操作ViewHolder的itemView,這里調(diào)用ItemTouchUIUtil的clearView方法傳入指定的view getDefaultUIUtil().onDrawOver(c, recyclerView, ((SampleAdapter.ItemViewHolder) viewHolder).vItem, dX, dY, actionState, isCurrentlyActive); } });
用getDefaultUIUtil()的方法指定滑動(dòng)操作的是linearlayout,所以每次被滑走的只有l(wèi)inearlayout。其他的操作都是一樣的。
相關(guān)文章
Android 三級(jí)NestedScroll嵌套滾動(dòng)實(shí)踐
這篇文章主要介紹了Android 三級(jí)NestedScroll嵌套滾動(dòng)實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02詳解Android 進(jìn)程間通信的幾種實(shí)現(xiàn)方式
在Android SDK中提供了4種用于跨進(jìn)程通訊的方式。這篇文章主要介紹了詳解Android 進(jìn)程間通信的幾種實(shí)現(xiàn)方式,有興趣的可以了解一下。2017-01-01Android 模擬新聞APP顯示界面滑動(dòng)優(yōu)化實(shí)例代碼
所謂滑動(dòng)優(yōu)化就是滑動(dòng)時(shí)不加載圖片,停止才加載,第一次進(jìn)入時(shí)手動(dòng)加載。下面通過本文給大家介紹android 模擬新聞app顯示界面滑動(dòng)優(yōu)化實(shí)例代碼,需要的朋友可以參考下2017-03-03Android ShareSDK快速實(shí)現(xiàn)分享功能
這篇文章主要介紹了Android ShareSDK快速實(shí)現(xiàn)分享功能的相關(guān)資料,需要的朋友可以參考下2016-02-02Android利用AsyncTask異步類實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容放大縮小
這篇文章主要為大家介紹了利用AsyncTask異步類實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容放大縮小的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-07Android room數(shù)據(jù)庫(kù)使用詳解
這篇文章主要介紹了Android room數(shù)據(jù)庫(kù)使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-11-11Android中在GridView網(wǎng)格視圖上實(shí)現(xiàn)item拖拽交換的方法
這篇文章主要介紹了Android中在GridView上實(shí)現(xiàn)item拖拽交換效果的方法,比起ListView的列表?xiàng)l目交換稍顯復(fù)雜,文中先介紹了關(guān)于創(chuàng)建GridView的一些基礎(chǔ)知識(shí),需要的朋友可以參考下2016-04-04