Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve card sliding effect in android". In daily operation, I believe many people have doubts about how to achieve card sliding effect in android. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve card sliding effect in android". Next, please follow the editor to study!

CardLayoutManager

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

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

In general, you can write like this.

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

@ Override public void onLayoutChildren (final RecyclerView.Recycler recycler, RecyclerView.State state) {super.onLayoutChildren (recycler, state); / / remove all view removeAllViews () first; / / Detach all sub-View before layout and put detachAndScrapAttachedViews (recycler) in the Scrap cache; int itemCount = getItemCount (); / / here, we configure CardConfig.DEFAULT_SHOW_ITEM = 3 by default. That is, the number of cards displayed on the screen is 3 / / when the number of data sources is greater than the number of data sources displayed, if (itemCount > CardConfig.DEFAULT_SHOW_ITEM) {/ / circulates the data sources backwards, so that the 0th data is at the top of the screen for (int position = CardConfig.DEFAULT_SHOW_ITEM; position > = 0; position--) {final View view = recycler.getViewForPosition (position) / / add Item View to RecyclerView addView (view); / / measure Item View measureChildWithMargins (view, 0,0); / / getDecoratedMeasuredWidth (view) can get the width of Item View / / so widthSpace is the remaining value int widthSpace = getWidth ()-getDecoratedMeasuredWidth (view) except Item View / / similarly int heightSpace = getHeight ()-getDecoratedMeasuredHeight (view) / / put Item View into RecyclerView layout / / here the default layout is placed in the center of RecyclerView layoutDecoratedWithMargins (view, widthSpace / 2, heightSpace / 2, widthSpace / 2 + getDecoratedMeasuredWidth (view), heightSpace / 2 + getDecoratedMeasuredHeight (view)) There are actually four cards on the screen, but we overlap the third card with the fourth card, so it looks like there are only three / / the fourth card is mainly to maintain the consistency of the animation if (position = = CardConfig.DEFAULT_SHOW_ITEM) {/ / scale according to certain rules and offset the Y axis. / / CardConfig.DEFAULT_SCALE defaults to 0.1fConfig.DEFAULTRANSLATEREY defaults to 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 {/ / the significance of setting mTouchListener is that we want the cards on the top layer to slide at will / / and the cards on the second layer, the third layer, etc., to be view.setOnTouchListener (mOnTouchListener) that forbids sliding. } else {/ / when the number of data sources is less than or equal to the number of * * display, it is similar to the above code 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) / / hand the touch event to mItemTouchHelper to handle the card slide event if (MotionEventCompat.getActionMasked (event) = = MotionEvent.ACTION_DOWN) {mItemTouchHelper.startSwipe (childViewHolder);} return false;}}

Generally speaking, CardLayoutManager is mainly for the layout of Item View, and then make corresponding deviations according to position. Let's take a look at the finished results:

It can be seen that the general effect is already there. What is missing is the handling of touch sliding events.

OnSwipeListener

Before looking at the code for the slide event, let's define a listener. Mainly used to listen for card slide events, the code is shown below, and comments are given. You should be able to understand it all:

Public interface OnSwipeListener {/ * while the card is still sliding, call back * * @ param viewHolder the proportion of viewHolder * @ param ratio sliding progress of the sliding card * @ the direction in which the param direction card slides, CardConfig.SWIPING_LEFT slides to the left and CardConfig.SWIPING_RIGHT slides to the right. * CardConfig.SWIPING_NONE is neither left nor right * / void onSwiping (RecyclerView.ViewHolder viewHolder, float ratio, int direction) / * callback when the card slips out completely * * @ param viewHolder the viewHolder of the card * @ param t the data of the card * @ param direction the direction in which the card slides, and CardConfig.SWIPED_LEFT slides out on the left CardConfig.SWIPED_RIGHT slides out on the right * / void onSwiped (RecyclerView.ViewHolder viewHolder, T t, int direction); / * callback * / void onSwipedClear () when all cards are slipped out;}

CardItemTouchHelperCallback

Now, we can look back and see the card slide. It must be no stranger to ItemTouchHelper to deal with the touch sliding event of Item View!

Let's 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 methods are as follows. For swipeFlags, you only care about the left and right directions:

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

It's also important to note that, as mentioned earlier, in order to prevent layer 2 and layer 3 cards from slipping, we need to set isItemViewSwipeEnabled () to return false.

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

Next, you override the onMove (RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) and onSwiped (RecyclerView.ViewHolder viewHolder, int direction) methods. But since we configured 0 for dragFlags above, we can simply return false in onMove (RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target).

@ Override public boolean onMove (RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {return false;}

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

@ Override public void onSwiped (RecyclerView.ViewHolder viewHolder, int direction) {/ / remove the previously set onTouchListener, otherwise the touch slip will disrupt viewHolder.itemView.setOnTouchListener (null); / / delete the corresponding data int layoutPosition = viewHolder.getLayoutPosition (); T remove = dataList.remove (layoutPosition); adapter.notifyDataSetChanged () / / call back the OnSwipeListener listener if (mListener! = null) {mListener.onSwiped (viewHolder, remove, direction = = ItemTouchHelper.LEFT? CardConfig.SWIPED_LEFT: CardConfig.SWIPED_RIGHT);} / / callback to OnSwipeListener listener if (adapter.getItemCount () = = 0) {if (mListener! = null) {mListener.onSwipedClear ();} when there is no data

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

Found that there is still something missing, yes! It's the lack of animation. We can override the onChildDraw (Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) method to add animation during the slide:

@ 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) {/ / get the sliding threshold float ratio = dX / getThreshold (recyclerView, viewHolder) / / ratio * * is 1 or-1 if (ratio > 1) {ratio = 1;} else if (ratio

< -1) { ratio = -1; } // 默认***的旋转角度为 15 度 itemView.setRotation(ratio * CardConfig.DEFAULT_ROTATE_DEGREE); int childCount = recyclerView.getChildCount(); // 当数据源个数大于***显示数时 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 has the same meaning as before, but it means to do the opposite animation 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 {/ / for (int position = 0; position < childCount-1; position++) {int index = childCount-position-1 when the number of data sources is less than or equal to * * 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);}} / / callback listener 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);}

Now, after adding animation, let's take a look at the effect:

It was found that there was still a problem, and the card on the second layer was inexplicably deviated after the card slipped out. This is precisely because the Item View reuse mechanism is "messing around". So we should reset it in the clearView (RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) method:

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

Now that we're done, let's try the effect:

At this point, the study on "how to achieve card sliding effect in android" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.