Using RecyclerView + SnapHelper in Android to achieve a similar ViewPager effect

    Google added SnapHelper to the support package of Android 24.2.0. SnapHelper is an extension of RecyclerView. It can be used in conjunction with RecyclerView to easily make some cool effects. What exactly does SnapHelper do? SnapHelper is designed to support the alignment of RecyclerView, which is to align the specified point of the TargetView in the RecyclerView or any pixel in the container by calculation. , It may be a little difficult to understand, but it is easy to understand after reading the effect and principle analysis of the following text. Take a look at the documentation introduction:

 

Introduction to SnapHealper.png

 

SnapHelper inherits from RecyclerView.OnFlingListener, and implements its abstract methods onFling. Supporting SnapHelper RecyclerView.LayoutManagermust implement the RecyclerView.SmoothScroller.ScrollVectorProviderinterface, or you can implement the onFling(int,int)method manually. SnapHeper has the following important methods:

• attachToRecyclerView: Attach the SnapHelper to the specified RecyclerView.

• calculateDistanceToFinalSnap: Override this method to calculate the distance aligned to the TargetView or the specified point of the container. This is an abstract method, implemented by the subclass itself. It returns an int array out with a length of 2, and out[0] is the x-direction alignment to be moved. The distance, out[1] is the distance to be moved in the y-direction alignment.

• calculateScrollDistance: Estimate the sliding distance based on the speed given in each direction for Fling operations.

• findSnapView: Provide a specified target View to align, abstract method, needs to be implemented by subclasses

• findTargetSnapPosition: Provides an Adapter target position for alignment, an abstract method that needs to be implemented by subclasses.

• onFling: Handle Fling based on the given velocity on the x and y axes.

LinearSnapHelper & PagerSnapHelper

The above mentioned several important methods and functions of SnapHelper. SnapHelper is an abstract class. To use SnapHelper, several methods need to be implemented. Google has built-in two default implementation classes, LinearSnapHelperand PagerSnapHelper, LinearSnapHelper can center the current Item of RecyclerView (both horizontally and vertically supported), PagerSnapHelper may be able to guess by looking at the name, so that RecyclerView has the same effect as ViewPager, each time only It can slide a page (LinearSnapHelper supports fast sliding), and PagerSnapHelper is also centered on the Item. Next, let's take a look at how to use it and its effects.

(1) LinearSnapHelper
LinearSnapHelper makes the current Item display in the center. The common scene is the horizontal RecyclerView, which is similar to the ViewPager effect, but can slide quickly (sliding multiple pages). code show as below:

 LinearLayoutManager manager = new LinearLayoutManager(getContext());
 manager.setOrientation(LinearLayoutManager.VERTICAL);
 mRecyclerView.setLayoutManager(manager);
// 将SnapHelper attach 到RecyclrView
 LinearSnapHelper snapHelper = new LinearSnapHelper();
 snapHelper.attachToRecyclerView(mRecyclerView);

The code is very simple, new a SnapHelper object, and then Attach to RecyclerView.

    The above effect is that the direction of LayoutManager is VERTICAL, then let's take a look at the horizontal effect. It is very simple. The difference from the above is to change the direction of LayoutManager. The code is as follows:

 LinearLayoutManager manager = new LinearLayoutManager(getContext());
 manager.setOrientation(LinearLayoutManager.HORIZONTAL);
 mRecyclerView.setLayoutManager(manager);
// 将SnapHelper attach 到RecyclrView
 LinearSnapHelper snapHelper = new LinearSnapHelper();
 snapHelper.attachToRecyclerView(mRecyclerView);

    With just a few lines of code, you can use RecyclerView to achieve a ViewPager-like effect, and the effect is even better. You can swipe multiple pages quickly, the current page is displayed in the play, and the parts of the previous page and the next page are displayed. If you use ViewPager to do it is still a bit troublesome. In addition to the above effects, if you want to limit it to only one page at a time like ViewPager, then you can use PagerSnapHelper.

(2)
PagerSnapHelperThe display effect of PagerSnapHelper (added in the Android 25.1.0 support package) LineSnapHelperis the same, except that PagerSnapHelper can only slide one page at a time, and cannot slide quickly. code show as below:

PagerSnapHelper snapHelper = new PagerSnapHelper();
snapHelper.attachToRecyclerView(mRecyclerView);

    In addition, I found a library on Github that implements several Snap effects, such as start alignment, end alignment, top alignment, and so on. If you are interested, you can go and play with it, address: [Snap Effect Library]. ( https://github.com/rubensousa/RecyclerViewSnap ).

 

PS: Some students find that their item cannot be full screen, that is, the match parent has no effect. The problem is creating the child view in the Adapter's onCreateViewHolder的时候要把parent传进去; 

Correct spelling

LayoutInflater.from(context).inflate(R.layout.item_view,parent,false);

wrong spelling

LayoutInflater.from(context).inflate(R.layout.item_view,null);