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

The era of "seeing is not necessarily believing" has arrived. Beware of online fraud using AI face-changing

With the rapid development of artificial intellig...

3 pitfalls of community operation

Community products have natural advantages in use...

Are these features of iOS 12 borrowed from the Android system?

At the WWDC 2018 Global Developers Conference not...

Is "Shake" the peacemaker between TV and the Internet?

The 2015 Lunar New Year was a little later than u...

Today I will teach you how to blow the biggest bubbles in the world

I believe most people have played the game of blo...

Comment | Wild boars are planned to be removed from the "Three Haves" list, and wildlife protection must also keep pace with the times

As the ecology recovers, wild boars may no longer...

These people who are admitted to the hospital are all because of the air conditioner! In the dog days of summer, this is how to use the air conditioner without harming your health

Since the beginning of summer, there have been ro...

To be a good operator, you need to know these 157 tools!

When you first enter operations , your leader ass...

How to operate a short video platform to create a "new fan economy"?

Make a video of dancing, make a video of teasing ...

No weather forecast? This is how the ancients predicted the weather...

Technology changes our lives. Today, we can learn...

Tesla Model 3, Xiaopeng P7, Ideal One, 300,000 yuan pure electric car, this is the right choice

It has become an irreversible trend for automobil...

Uncovering the secret of HoloLens' high energy and low consumption: 24-core HPU

Even though it has been released for a long time, ...

Why does Foxconn want to strangle Samsung?

According to Korean media reports, Sharp notified...

Analysis of 7 bidding methods for Baidu search OCPC

Baidu search ocpc bidding is the current mainstre...

【motioner】3D software brawl｜Dreamlike combos from concept to screen【HD quality with material】

【motioner】3D software brawl｜Dreamlike combos from...