這篇文章主要介紹“android怎么實(shí)現(xiàn)卡片式滑動(dòng)效果”，在日常操作中，相信很多人在android怎么實(shí)現(xiàn)卡片式滑動(dòng)效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”android怎么實(shí)現(xiàn)卡片式滑動(dòng)效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

長(zhǎng)治網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,長(zhǎng)治網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為長(zhǎng)治數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的長(zhǎng)治做網(wǎng)站的公司定做！

CardLayoutManager

創(chuàng)建 CardLayoutManager 并繼承自 RecyclerView.LayoutManager 。需要我們自己實(shí)現(xiàn)  generateDefaultLayoutParams() 方法：

@Override  public RecyclerView.LayoutParams generateDefaultLayoutParams() {      return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  }

一般情況下，像上面這樣寫(xiě)即可。

下面這個(gè)方法就是我們的重點(diǎn)了。 onLayoutChildren(final RecyclerView.Recycler recycler,  RecyclerView.State state) 方法就是用來(lái)實(shí)現(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();      // 在這里，我們默認(rèn)配置 CardConfig.DEFAULT_SHOW_ITEM = 3。即在屏幕上顯示的卡片數(shù)為3      // 當(dāng)數(shù)據(jù)源個(gè)數(shù)大于***顯示數(shù)時(shí)      if (itemCount > CardConfig.DEFAULT_SHOW_ITEM) {          // 把數(shù)據(jù)源倒著循環(huán)，這樣，第0個(gè)數(shù)據(jù)就在屏幕最上面了          for (int position = CardConfig.DEFAULT_SHOW_ITEM; position >= 0; position--) {              final View view = recycler.getViewForPosition(position);              // 將 Item View 加入到 RecyclerView 中              addView(view);              // 測(cè)量 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 中布局              // 在這里默認(rèn)布局是放在 RecyclerView 中心              layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2,                      widthSpace / 2 + getDecoratedMeasuredWidth(view),                      heightSpace / 2 + getDecoratedMeasuredHeight(view));              // 其實(shí)屏幕上有四張卡片，但是我們把第三張和第四張卡片重疊在一起，這樣看上去就只有三張              // 第四張卡片主要是為了保持動(dòng)畫(huà)的連貫性              if (position == CardConfig.DEFAULT_SHOW_ITEM) {                  // 按照一定的規(guī)則縮放，并且偏移Y軸。                  // CardConfig.DEFAULT_SCALE 默認(rèn)為0.1f，CardConfig.DEFAULT_TRANSLATE_Y 默認(rèn)為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 的意義就在于我們想讓處于頂層的卡片是可以隨意滑動(dòng)的                  // 而第二層、第三層等等的卡片是禁止滑動(dòng)的                  view.setOnTouchListener(mOnTouchListener);              }          }      } else {          // 當(dāng)數(shù)據(jù)源個(gè)數(shù)小于或等于***顯示數(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，讓其處理卡片滑動(dòng)事件          if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) {              mItemTouchHelper.startSwipe(childViewHolder);          }          return false;      }  };

總體來(lái)說(shuō)，CardLayoutManager 主要就是為 Item View 布局，然后根據(jù) position  做相對(duì)應(yīng)的偏差。我們一起來(lái)看下完成的效果圖：

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

OnSwipeListener

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

public interface OnSwipeListener {       /**       * 卡片還在滑動(dòng)時(shí)回調(diào)       *       * @param viewHolder 該滑動(dòng)卡片的viewHolder       * @param ratio      滑動(dòng)進(jìn)度的比例       * @param direction  卡片滑動(dòng)的方向，CardConfig.SWIPING_LEFT 為向左滑，CardConfig.SWIPING_RIGHT 為向右滑，       *                   CardConfig.SWIPING_NONE 為不偏左也不偏右       */      void onSwiping(RecyclerView.ViewHolder viewHolder, float ratio, int direction);       /**       * 卡片完全滑出時(shí)回調(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);       /**       * 所有的卡片全部滑出時(shí)回調(diào)       */      void onSwipedClear();   }

CardItemTouchHelperCallback

現(xiàn)在，我們可以回過(guò)頭來(lái)看看卡片滑動(dòng)了。對(duì)于 ItemTouchHelper 來(lái)處理 Item View 的觸摸滑動(dòng)事件相必都不陌生吧!

我們暫且命名為 CardItemTouchHelperCallback 。對(duì)于 ItemTouchHelper.Callback 而言，需要在  getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)  方法中配置 swipeFlags 和 dragFlags 。

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

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

還有一點(diǎn)需要注意，前面說(shuō)過(guò)，為了防止第二層和第三層卡片也能滑動(dòng)，因此我們需要設(shè)置 isItemViewSwipeEnabled() 返回 false  。

@Override  public boolean isItemViewSwipeEnabled() {      return false;  }

接下來(lái)，就是去重寫(xiě) onMove(RecyclerView recyclerView, RecyclerView.ViewHolder  viewHolder, RecyclerView.ViewHolder target) 和 onSwiped(RecyclerView.ViewHolder  viewHolder, int direction) 方法。但是因?yàn)樵谏厦嫖覀儗?duì)于 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, 否則觸摸滑動(dòng)會(huì)亂了      viewHolder.itemView.setOnTouchListener(null);      // 刪除相對(duì)應(yīng)的數(shù)據(jù)      int layoutPosition = viewHolder.getLayoutPosition();      T remove = dataList.remove(layoutPosition);      adapter.notifyDataSetChanged();      // 卡片滑出后回調(diào) OnSwipeListener 監(jiān)聽(tīng)器      if (mListener != null) {          mListener.onSwiped(viewHolder, remove, direction == ItemTouchHelper.LEFT ? CardConfig.SWIPED_LEFT : CardConfig.SWIPED_RIGHT);      }      // 當(dāng)沒(méi)有數(shù)據(jù)時(shí)回調(diào) OnSwipeListener 監(jiān)聽(tīng)器      if (adapter.getItemCount() == 0) {          if (mListener != null) {              mListener.onSwipedClear();          }      }  }

寫(xiě)好后，我們先來(lái)看看滑動(dòng)效果：

發(fā)現(xiàn)還是差了點(diǎn)什么，沒(méi)錯(cuò)!是缺少了動(dòng)畫(huà)。在滑動(dòng)的過(guò)程中我們可以重寫(xiě) onChildDraw(Canvas c, RecyclerView  recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int  actionState, boolean isCurrentlyActive) 方法來(lái)添加動(dòng)畫(huà)：

@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) {          // 得到滑動(dòng)的閥值          float ratio = dX / getThreshold(recyclerView, viewHolder);          // ratio ***為 1 或 -1          if (ratio > 1) {              ratio = 1;          } else if (ratio < -1) {              ratio = -1;          }          // 默認(rèn)***的旋轉(zhuǎn)角度為 15 度          itemView.setRotation(ratio * CardConfig.DEFAULT_ROTATE_DEGREE);          int childCount = recyclerView.getChildCount();          // 當(dāng)數(shù)據(jù)源個(gè)數(shù)大于***顯示數(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 是一個(gè)意思，不過(guò)是做相反的動(dòng)畫(huà)                  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 {              // 當(dāng)數(shù)據(jù)源個(gè)數(shù)小于或等于***顯示數(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)聽(tīng)器          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)在我們加上動(dòng)畫(huà)后，來(lái)看看效果：

發(fā)現(xiàn)還是有問(wèn)題，***層的卡片滑出去之后第二層的就莫名其妙地偏了。這正是因?yàn)?Item View 重用機(jī)制“搗鬼”。所以我們應(yīng)該在  clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)  方法中重置一下：

@Override  public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {      super.clearView(recyclerView, viewHolder);      viewHolder.itemView.setRotation(0f);  }

大功告成，我們?cè)囈幌滦Ч?/p>

到此，關(guān)于“android怎么實(shí)現(xiàn)卡片式滑動(dòng)效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！