Play with the Tantan-like card-style sliding effect

Play with the Tantan-like card-style sliding effect

Talking about the historical origin of this blog, it is estimated that it has a "history". The historical origin of this blog, it is estimated that it has a "history".

The earliest story can be traced back to when I tried the Tantan APP. When I first entered the software interface, I was attracted by the design of selecting "like/dislike" by sliding cards. At that time, I really wanted to achieve this Tantan-like effect by myself, but I had no idea. However, there is no doubt that the principle of this effect must be similar to ListView/RecyclerView, involving the recycling and reuse of Item View, otherwise it would have been OOM due to a large number of Item Views.

Later, I saw many great bloggers also launched the same Tantan-like effect blogs. After reading them from beginning to end, I found that they were easy to understand and basically had no problems. So, the idea of ​​achieving the Tantan-like effect came to my mind again. So, what are you still hesitating about? Let's do it while the heat is hot! I happily decided.

The first problem we face is the consideration of implementing View.

RecyclerView is the best choice!

RecyclerView is the best choice!

RecyclerView is the best choice!

Important things should be said three times!!!

The reason is, first, RecyclerView has its own Item View recycling and reuse function, so we don't need to consider this problem; second, the layout of RecyclerView is achieved by setting LayoutManager, which fully "decouples" the layout from RecyclerView. LayoutManager can be implemented in a customized way. This is exactly what we want!!! Another point, this is also one of the reasons why ListView is not selected.

Now, let's get started and show you the moment of miracle.

CardLayoutManager

Create CardLayoutManager and inherit from RecyclerView.LayoutManager. We need to implement the generateDefaultLayoutParams() method ourselves:

  1.  @Override 
  2.  
  3.  public RecyclerView.LayoutParams generateDefaultLayoutParams() { 
  4.  
  5.  return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); 
  6.  
  7.  }

In general, you can write it like above.

The following method is our focus. The onLayoutChildren(final RecyclerView.Recycler recycler, RecyclerView.State state) method is used to implement the Item View layout:

  1.  @Override 
  2.  
  3.  public void onLayoutChildren(final RecyclerView.Recycler recycler, RecyclerView.State state) { 
  4.  
  5.     super.onLayoutChildren(recycler, state); 
  6.  
  7.  // Remove all views first   
  8.  
  9.  removeAllViews(); 
  10.  
  11.  // Before layout, detach all child Views and put them into the Scrap cache 
  12.  
  13.     detachAndScrapAttachedViews(recycler); 
  14.  
  15.  int itemCount = getItemCount(); 
  16.  
  17.  // Here, we configure CardConfig.DEFAULT_SHOW_ITEM = 3 by default. That is, the number of cards displayed on the screen is 3 
  18.  
  19.  // When the number of data sources is greater than the *** display number 
  20.  
  21.     if (itemCount > CardConfig.DEFAULT_SHOW_ITEM) { 
  22.  
  23.  // Loop the data source backwards so that the 0th data is at the top of the screen 
  24.  
  25.  for ( int position = CardConfig.DEFAULT_SHOW_ITEM; position >= 0; position --) {   
  26.  
  27.  final View   view = recycler.getViewForPosition(position); 
  28.  
  29.  // Add Item View to RecyclerView 
  30.  
  31.  addView( view ); 
  32.  
  33.  // Measure the Item View   
  34.  
  35.             measureChildWithMargins( view , 0, 0); 
  36.  
  37.  // getDecoratedMeasuredWidth( view ) can get the width of Item View 
  38.  
  39.  // So widthSpace is the remaining value except Item View 
  40.  
  41.  int widthSpace = getWidth() - getDecoratedMeasuredWidth( view ); 
  42.  
  43.  // Same reason 
  44.  
  45.  int heightSpace = getHeight() - getDecoratedMeasuredHeight( view ); 
  46.  
  47.  // Place the Item View into the RecyclerView layout 
  48.  
  49.  // The default layout here is placed in the center of the RecyclerView 
  50.  
  51.             layoutDecoratedWithMargins( view , widthSpace / 2, heightSpace / 2, 
  52.  
  53.                     widthSpace / 2 + getDecoratedMeasuredWidth( view ), 
  54.  
  55.                     heightSpace / 2 + getDecoratedMeasuredHeight( view )); 
  56.  
  57.  // Actually there are four cards on the screen, but we overlap the third and fourth cards so that it looks like there are only three cards 
  58.  
  59.  // The fourth card is mainly to maintain the continuity of the animation 
  60.  
  61.             if (position == CardConfig.DEFAULT_SHOW_ITEM) { 
  62.  
  63.  // Scale according to certain rules and offset the Y axis. 
  64.  
  65.  // CardConfig.DEFAULT_SCALE defaults to 0.1f, CardConfig.DEFAULT_TRANSLATE_Y defaults to 14 
  66.  
  67.  view .setScaleX(1 - (position - 1) * CardConfig.DEFAULT_SCALE); 
  68.  
  69.  view .setScaleY(1 - (position - 1) * CardConfig.DEFAULT_SCALE); 
  70.  
  71.  view .setTranslationY((position - 1) * view .getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
  72.  
  73.             } else if (position > 0) { 
  74.  
  75.  view .setScaleX(1 - position * CardConfig.DEFAULT_SCALE); 
  76.  
  77.  view .setScaleY(1 - position * CardConfig.DEFAULT_SCALE); 
  78.  
  79.  view .setTranslationY(position * view .getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
  80.  
  81.  } else { 
  82.  
  83.  // The purpose of setting mTouchListener is that we want the top card to be able to slide freely 
  84.  
  85.  // The cards on the second, third, etc. layers are not allowed to slide 
  86.  
  87.  view .setOnTouchListener(mOnTouchListener); 
  88.  
  89.  } 
  90.  
  91.  } 
  92.  
  93.  } else { 
  94.  
  95.  // When the number of data sources is less than or equal to the maximum number of displays, it is similar to the above code 
  96.  
  97.  for ( int position = itemCount - 1; position >= 0; position --) {   
  98.  
  99.  final View   view = recycler.getViewForPosition(position); 
  100.  
  101.  addView( view ); 
  102.  
  103.             measureChildWithMargins( view , 0, 0); 
  104.  
  105.  int widthSpace = getWidth() - getDecoratedMeasuredWidth( view ); 
  106.  
  107.  int heightSpace = getHeight() - getDecoratedMeasuredHeight( view ); 
  108.  
  109.  
  110.             layoutDecoratedWithMargins( view , widthSpace / 2, heightSpace / 2, 
  111.  
  112.                     widthSpace / 2 + getDecoratedMeasuredWidth( view ), 
  113.  
  114.                     heightSpace / 2 + getDecoratedMeasuredHeight( view )); 
  115.  
  116.  
  117.             if (position > 0) { 
  118.  
  119.  view .setScaleX(1 - position * CardConfig.DEFAULT_SCALE); 
  120.  
  121.  view .setScaleY(1 - position * CardConfig.DEFAULT_SCALE); 
  122.  
  123.  view .setTranslationY(position * view .getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
  124.  
  125.  } else { 
  126.  
  127.  view .setOnTouchListener(mOnTouchListener); 
  128.  
  129.  } 
  130.  
  131.  } 
  132.  
  133.  } 
  134.  
  135.  } 
  136.  
  137.  
  138.  private View .OnTouchListener mOnTouchListener = new View .OnTouchListener() { 
  139.  
  140.  
  141.  @Override 
  142.  
  143.  public boolean onTouch( View v, MotionEvent event) { 
  144.  
  145.         RecyclerView.ViewHolder childViewHolder = mRecyclerView.getChildViewHolder(v); 
  146.  
  147.  // Hand over the touch event to mItemTouchHelper to handle the card sliding event 
  148.  
  149.         if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) { 
  150.  
  151.             mItemTouchHelper.startSwipe(childViewHolder); 
  152.  
  153.  } 
  154.  
  155.  return   false ; 
  156.  
  157.  } 
  158.  
  159.  };

In general, CardLayoutManager is mainly used to lay out the Item View, and then make corresponding deviations according to the position. Let's take a look at the finished effect diagram:

As you can see, the general effect is already there. What is missing is handling the touch sliding event.

OnSwipeListener

Before looking at the code for the sliding event, let's first define a listener. It is mainly used to listen to the card sliding event. The code is as follows, and the comments are also given. I think you can understand it:

  1.  public interface OnSwipeListener<T> { 
  2.  
  3.  
  4.  /** 
  5.  
  6.  * Callback when the card is still sliding 
  7.  
  8.  * 
  9.  
  10.  * @param viewHolder The viewHolder of the sliding card 
  11.  
  12.  * @param ratio The ratio of sliding progress 
  13.  
  14.  * @param direction The direction of card sliding, CardConfig.SWIPING_LEFT means sliding to the left, CardConfig.SWIPING_RIGHT means sliding to the right, 
  15.  
  16.  * CardConfig.SWIPING_NONE means neither left nor right 
  17.  
  18.  */ 
  19.  
  20.     void onSwiping(RecyclerView.ViewHolder viewHolder, float ratio, int direction); 
  21.  
  22.  
  23.  /** 
  24.  
  25.  * Callback when the card is completely slid out 
  26.  
  27.  * 
  28.  
  29.  * @param viewHolder The viewHolder of the slide-out card 
  30.  
  31.  * @param t The data of the slide-out card 
  32.  
  33.  * @param direction The direction in which the card slides out. CardConfig.SWIPED_LEFT means sliding out from the left; CardConfig.SWIPED_RIGHT means sliding out from the right 
  34.  
  35.  */ 
  36.  
  37.     void onSwiped(RecyclerView.ViewHolder viewHolder, T t, int direction); 
  38.  
  39.  
  40.  /** 
  41.  
  42.  * Callback when all cards slide out 
  43.  
  44.  */ 
  45.  
  46.  void onSwipedClear(); 
  47.  
  48.  
  49.  }

CardItemTouchHelperCallback

Now, we can go back and look at card sliding. You must be familiar with ItemTouchHelper to handle the touch sliding events of Item View!

We will call it CardItemTouchHelperCallback for now. For ItemTouchHelper.Callback, you need to configure swipeFlags and dragFlags in the getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) method.

The specific method is as follows. For swipeFlags, we only care about the left and right directions:

  1.  @Override 
  2.  
  3.  public   int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
  4.  
  5.  int dragFlags = 0; 
  6.  
  7.  int swipeFlags = 0; 
  8.  
  9.     RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager(); 
  10.  
  11.     if (layoutManager instanceof CardLayoutManager) { 
  12.  
  13.         swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT ; 
  14.  
  15.  } 
  16.  
  17.  return makeMovementFlags(dragFlags, swipeFlags); 
  18.  
  19.  }

There is one more thing to note. As mentioned earlier, in order to prevent the second and third layers of cards from sliding, we need to set isItemViewSwipeEnabled() to return false.

  1.  @Override 
  2.  
  3.  public boolean isItemViewSwipeEnabled() { 
  4.  
  5.  return   false ; 
  6.  
  7.  }

Next, we need to rewrite the onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) and onSwiped(RecyclerView.ViewHolder viewHolder, int direction) methods. However, because we configured dragFlags to 0 above, we can simply return false in onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target).

  1.  @Override 
  2.  
  3.  public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { 
  4.  
  5.  return   false ; 
  6.  
  7.  }

In this way, we turn our attention to the onSwiped(RecyclerView.ViewHolder viewHolder, int direction) method:

  1.  @Override 
  2.  
  3.  public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { 
  4.  
  5.  // Remove the previously set onTouchListener, otherwise the touch sliding will be messed up 
  6.  
  7.     viewHolder.itemView.setOnTouchListener( null ); 
  8.  
  9.  // Delete the corresponding data 
  10.  
  11.  int layoutPosition = viewHolder.getLayoutPosition(); 
  12.  
  13.     T remove = dataList.remove(layoutPosition); 
  14.  
  15.     adapter.notifyDataSetChanged(); 
  16.  
  17.  // Callback OnSwipeListener listener after the card slides out 
  18.  
  19.  if (mListener != null ) { 
  20.  
  21.         mListener.onSwiped(viewHolder, remove, direction == ItemTouchHelper. LEFT ? CardConfig.SWIPED_LEFT : CardConfig.SWIPED_RIGHT); 
  22.  
  23.  } 
  24.  
  25.  // Callback OnSwipeListener listener when there is no data 
  26.  
  27.     if (adapter.getItemCount() == 0) { 
  28.  
  29.         if (mListener != null ) { 
  30.  
  31.             mListener.onSwipedClear(); 
  32.  
  33.  } 
  34.  
  35.  } 
  36.  
  37.  }

After writing, let's take a look at the sliding effect:

We found that something is missing. Yes, animation is missing. During the sliding process, we can override the onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) method to add animation:

  1.  @Override 
  2.  
  3.  public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, 
  4.  
  5.  float dX, float dY, int actionState, boolean isCurrentlyActive) { 
  6.  
  7.     super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive); 
  8.  
  9.  View itemView = viewHolder.itemView; 
  10.  
  11.     if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) { 
  12.  
  13.  // Get the sliding threshold 
  14.  
  15.  float ratio = dX / getThreshold(recyclerView, viewHolder); 
  16.  
  17.  // ratio is 1 or -1 
  18.  
  19.  if (ratio > 1) { 
  20.  
  21.  ratio = 1; 
  22.  
  23.         } else if (ratio < -1) { 
  24.  
  25.  ratio = -1; 
  26.  
  27.  } 
  28.  
  29.  // The default rotation angle is 15 degrees 
  30.  
  31.         itemView.setRotation(ratio * CardConfig.DEFAULT_ROTATE_DEGREE); 
  32.  
  33.  int childCount = recyclerView.getChildCount(); 
  34.  
  35.  // When the number of data sources is greater than the *** display number 
  36.  
  37.         if (childCount > CardConfig.DEFAULT_SHOW_ITEM) { 
  38.  
  39.  for ( int position = 1; position < childCount - 1; position++) { 
  40.  
  41.  int   index = childCount - position - 1; 
  42.  
  43.  View   view = recyclerView.getChildAt(position); 
  44.  
  45.  // Same as onLayoutChildren, but with the opposite animation 
  46.  
  47.  view .setScaleX(1 - index * CardConfig.DEFAULT_SCALE + Math. abs (ratio) * CardConfig.DEFAULT_SCALE); 
  48.  
  49.  view .setScaleY(1 - index * CardConfig.DEFAULT_SCALE + Math. abs (ratio) * CardConfig.DEFAULT_SCALE); 
  50.  
  51.  view .setTranslationY(( index - Math. abs (ratio)) * itemView.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
  52.  
  53.  } 
  54.  
  55.  } else { 
  56.  
  57.  // When the number of data sources is less than or equal to the *** display number 
  58.  
  59.  for ( int position = 0; position < childCount - 1; position++) { 
  60.  
  61.  int   index = childCount - position - 1; 
  62.  
  63.  View   view = recyclerView.getChildAt(position); 
  64.  
  65.  view .setScaleX(1 - index * CardConfig.DEFAULT_SCALE + Math. abs (ratio) * CardConfig.DEFAULT_SCALE); 
  66.  
  67.  view .setScaleY(1 - index * CardConfig.DEFAULT_SCALE + Math. abs (ratio) * CardConfig.DEFAULT_SCALE); 
  68.  
  69.  view .setTranslationY(( index - Math. abs (ratio)) * itemView.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y); 
  70.  
  71.  } 
  72.  
  73.  } 
  74.  
  75.  //Callback listener 
  76.  
  77.         if (mListener != null ) { 
  78.  
  79.  if (ratio != 0) { 
  80.  
  81.                 mListener.onSwiping(viewHolder, ratio, ratio < 0 ? CardConfig.SWIPING_LEFT : CardConfig.SWIPING_RIGHT); 
  82.  
  83.  } else { 
  84.  
  85.                 mListener.onSwiping(viewHolder, ratio, CardConfig.SWIPING_NONE); 
  86.  
  87.  } 
  88.  
  89.  } 
  90.  
  91.  } 
  92.  
  93.  } 
  94.  
  95.  
  96.  private float getThreshold(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
  97.  
  98.  return recyclerView.getWidth() * getSwipeThreshold(viewHolder); 
  99.  
  100.  }

Now let's add animation and see the effect:

I found that there is still a problem. After the cards in the first layer are slid out, the cards in the second layer are inexplicably tilted. This is because the Item View reuse mechanism is "playing tricks". So we should reset it in the clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) method:

  1.  @Override 
  2.  
  3.  public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { 
  4.  
  5.     super.clearView(recyclerView, viewHolder); 
  6.  
  7.     viewHolder.itemView.setRotation(0f); 
  8.  
  9.  }

It's done, let's try the effect:

Perfect!

This is exactly what we were dreaming of. We finally made it happen!!!

To sum up, in this whole code flow we mainly use custom LayoutManager and ItemTouchHelper.Callback. Overall it is quite simple, I believe you already know how to do it.

<<:  An Android client architecture design sharing

>>:  Xiaoyu Yilian announced the completion of 125 million B round of financing

Recommend

Private Domain Traffic Operation and Construction Strategy

If we compare private domain traffic to a fish po...

The future of consulting: augmenting human intelligence

“The greatest obstacle to wise action and the gre...

Fasting = stimulating cell autophagy, can it improve Alzheimer's disease?

Recently, Rong seems to like talking about food. ...

Hidden crisis, who is the most terrifying invasive species on earth?

Some time ago, the topic #Devil's flowers fou...

Zhihu product disassembly and analysis!

"I'm in the United States, just got off ...

Xiaohongshu’s strategy for creating hot products and case analysis!

This article mainly analyzes the brand’s marketin...

Chandrayaan-3 landed successfully. After 60 years of ups and downs, what is the level of India's space program?

India's Chandrayaan-3 successfully landed on ...

How do rookies promote and acquire customers?

Acquiring new users is the source of growth for a...

Will QR codes be scanned by humans? Yes! But we can’t wait for that day

Payment codes, business card codes, health codes,...

Zhihu App product operation experience analysis report!

From a niche elite community to a knowledge mento...

The first step to longevity: eat a little fatter!

How fat is healthy? ——A well-proportioned body is...

The fresher, the more dangerous! A type of "daylily" on the high green mountains, if eaten incorrectly, it can cause poisoning!

There is a song whose lyrics may be familiar to m...

Tik Tok: 5 major motivations for users to pay attention

How can you attract Douyin users and become an in...

With a low budget and high bid, how can you play Baidu bidding promotion?

Recently, I have sorted out several of the most f...

WeChat Product Manager: Spring Festival Gala Shake Project Experience Summary (Product Edition)

[[128420]] I was fortunate to participate in the ...