Android仿探探卡片式滑動效果實現(xiàn)

前言

公司主營業(yè)務：成都做網(wǎng)站、成都網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出城北免費做網(wǎng)站回饋大家。

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

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

首先面臨的問題就是關(guān)于實現(xiàn) View 上的考慮。毫無疑問。

RecyclerView 是最佳選擇!

重要的話講三遍!!!

究其原因，第一，RecyclerView 是自帶 Item View 回收和重用功能的，就不需要我們考慮這個問題了;第二，RecyclerView 的布局方式是通過設(shè)置 LayoutManager 來實現(xiàn)的，這樣就充分地把布局和 RecyclerView “解耦”開來了。而 LayoutManager 是可以通過自定義的方式來實現(xiàn)的。這恰恰是我們想要的!!!再說一點，這也正是不選用 ListView 的原因之一。

下面，我們就開始動手了。帶你見證奇跡的時刻。

CardLayoutManager

創(chuàng)建 CardLayoutManager 并繼承自 RecyclerView.LayoutManager 。需要我們自己實現(xiàn) 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) 方法就是用來實現(xiàn) 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。即在屏幕上顯示的卡片數(shù)為3 
 
 // 當數(shù)據(jù)源個數(shù)大于最大顯示數(shù)時 
 
 if (itemCount > CardConfig.DEFAULT_SHOW_ITEM) { 
 
 // 把數(shù)據(jù)源倒著循環(huán)，這樣，第0個數(shù)據(jù)就在屏幕最上面了 
 
 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) { 
 
  // 按照一定的規(guī)則縮放，并且偏移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 { 
 
  // 設(shè)置 mTouchListener 的意義就在于我們想讓處于頂層的卡片是可以隨意滑動的 
 
  // 而第二層、第三層等等的卡片是禁止滑動的 
 
  view.setOnTouchListener(mOnTouchListener); 
 
  } 
 
 } 
 
 } else { 
 
 // 當數(shù)據(jù)源個數(shù)小于或等于最大顯示數(shù)時，和上面的代碼差不多 
 
 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 布局，然后根據(jù) position 做相對應的偏差。

可以看出，大致的效果已經(jīng)有了。缺少的就是處理觸摸滑動事件了。

OnSwipeListener

在看滑動事件的代碼之前，我們先定義一個監(jiān)聽器。主要用于監(jiān)聽卡片滑動事件，代碼就如下所示，注釋也給出來了。應該都看得懂吧：

public interface OnSwipeListener<T> { 
 
 
 /** 
 
 * 卡片還在滑動時回調(diào) 
 
 * 
 
 * @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); 
 
 
 /** 
 
 * 卡片完全滑出時回調(diào) 
 
 * 
 
 * @param viewHolder 該滑出卡片的viewHolder 
 
 * @param t  該滑出卡片的數(shù)據(jù) 
 
 * @param direction 卡片滑出的方向，CardConfig.SWIPED_LEFT 為左邊滑出；CardConfig.SWIPED_RIGHT 為右邊滑出 
 
 */ 
 
 void onSwiped(RecyclerView.ViewHolder viewHolder, T t, int direction); 
 
 
 /** 
 
 * 所有的卡片全部滑出時回調(diào) 
 
 */ 
 
 void onSwipedClear(); 
 
 
}

CardItemTouchHelperCallback

現(xiàn)在，我們可以回過頭來看看卡片滑動了。對于 ItemTouchHelper 來處理 Item View 的觸摸滑動事件相必都不陌生吧!
我們暫且命名為 CardItemTouchHelperCallback 。對于 ItemTouchHelper.Callback 而言，需要在 getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) 方法中配置 swipeFlags 和 dragFlags 。

具體的方法如下，對于 swipeFlags 只關(guān)心左右兩個方向：

@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); 
 
}

還有一點需要注意，前面說過，為了防止第二層和第三層卡片也能滑動，因此我們需要設(shè)置 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) { 
 
 // 移除之前設(shè)置的 onTouchListener, 否則觸摸滑動會亂了 
 
 viewHolder.itemView.setOnTouchListener(null); 
 
 // 刪除相對應的數(shù)據(jù) 
 
 int layoutPosition = viewHolder.getLayoutPosition(); 
 
 T remove = dataList.remove(layoutPosition); 
 
 adapter.notifyDataSetChanged(); 
 
 // 卡片滑出后回調(diào) OnSwipeListener 監(jiān)聽器 
 
 if (mListener != null) { 
 
 mListener.onSwiped(viewHolder, remove, direction == ItemTouchHelper.LEFT ? CardConfig.SWIPED_LEFT : CardConfig.SWIPED_RIGHT); 
 
 } 
 
 // 當沒有數(shù)據(jù)時回調(diào) OnSwipeListener 監(jiān)聽器 
 
 if (adapter.getItemCount() == 0) { 
 
 if (mListener != null) { 
 
  mListener.onSwipedClear(); 
 
 } 
 
 } 
 
}

發(fā)現(xiàn)還是差了點什么，沒錯!是缺少了動畫。在滑動的過程中我們可以重寫 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; 
 
 } 
 
 // 默認最大的旋轉(zhuǎn)角度為 15 度 
 
 itemView.setRotation(ratio * CardConfig.DEFAULT_ROTATE_DEGREE); 
 
 int childCount = recyclerView.getChildCount(); 
 
 // 當數(shù)據(jù)源個數(shù)大于最大顯示數(shù)時 
 
 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 { 
 
  // 當數(shù)據(jù)源個數(shù)小于或等于最大顯示數(shù)時 
 
  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); 
 
  } 
 
 } 
 
 // 回調(diào)監(jiān)聽器 
 
 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); 
 
}

現(xiàn)在我們加上動畫后，來看看效果：

發(fā)現(xiàn)還是有問題，第一層的卡片滑出去之后第二層的就莫名其妙地偏了。這正是因為 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 !

正是我們夢寐以求的效果。我們終于實現(xiàn)了!!!

總結(jié)

在這整個代碼流程中我們主要是運用了自定義 LayoutManager 以及 ItemTouchHelper.Callback ?？傮w來說還是比較簡單的，相信你已經(jīng)會啦。好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對各位Android開發(fā)者們能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

當前名稱：Android仿探探卡片式滑動效果實現(xiàn)
轉(zhuǎn)載源于：http://jinyejixie.com/article16/ggsegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、自適應網(wǎng)站、關(guān)鍵詞優(yōu)化、定制開發(fā)、網(wǎng)站策劃、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

Android仿探探卡片式滑動效果實現(xiàn)