RecyclerView achieves infinite data loop effect: JFPicker’s iteration idea

chat

  I haven’t written anything for a long time. On the one hand, there is less and less demand for native mobile development. In addition, working as a programmer in a small city is still a bit stressful, so I have been reading some Vue and CSS in the past month or so. Tutorials: In addition to Android, I also worked on uniapp before, so it was relatively easy to learn. During this period of time, I also started working on web front-ends. It was a bit awkward to switch from app development thinking to web development thinking, but it was still Quite interesting. On the other hand, and most importantly, I am lazy.
  The code base of JFPicker was created when I was in my previous company. The previous company was specialized in developing enterprise business processes, so the scroll wheel selector was used extensively, and the style was basically fixed by the artist, so the encapsulation was It's on the agenda. At the beginning, I also used some scroll wheel libraries on github, but many places did not meet the needs of customers. For example, the sliding was not smooth enough and stuck, the 3D effect was not obvious, etc., so I replaced it based on the AndroidPicker open source library. The core scroll wheel component uses a scroll wheel implemented with RecyclerView to obtain a smoother scrolling experience and 3D effect. It also additionally encapsulates ViewPager multiple requests and ordinary list selectors. Because I am just a rookie, I thought that no one would use this library except me and my colleagues, but occasionally some friends would leave me messages. I was quite happy that someone was using it, so I used my time to iterate. One version mainly adds the function of infinite data loop.

Implementation process

Adhering to the principle of not reinventing the wheel, open Baidu, search: RecyclerView to achieve infinite data loop, click on the first article: The perfect implementation plan of Android infinite loop RecyclerView
. In this article, two implementation methods are provided:

The first implementation method: modify the Adapter

  1. ) In the Adapter of RecyclerView, override the getItemCount() method to return Integer.MAX_VALUE.
  2. ) Rewrite the onBindViewHolder() method, perform the remainder operation on the position parameter, and get the real data index corresponding to the position.
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    
    
    int index = position % dataList.size();
    holder.bind(dataList.get(index));
}

Advantages: The implementation is relatively simple
Disadvantages: RecyclerView can only slide downward infinitely, but cannot slide upward infinitely. The reference article also provides a solution. When initializing RecyclerView, let it slide to the specified position, such as Integer.MAX_VALUE/2 , but there are still issues with borders and sliding lags

The second implementation method: Customize LayoutManager

As we all know, RecyclerView.LayoutManager is the most important component in RecyclerView and is responsible for the following tasks:

  1. ) Define the position and size of subviews: LayoutManager determines the position, size and layout of each subview in RecyclerView. By calling methods in LayoutManager, you can customize the arrangement of subviews according to your own needs, such as linear arrangement, grid arrangement, waterfall arrangement, etc.
  2. ) Manage the recycling and reuse of subviews: LayoutManager is responsible for the recycling and reuse of subviews, and can dynamically add or remove subviews as needed. This feature can significantly reduce memory usage and improve application performance.
  3. ) Handling touch and scroll events in RecyclerView: LayoutManager can also handle touch and scroll events in RecyclerView so that RecyclerView can respond to user operations.

These functions are exactly what we need, so customizing LayoutManager is the right way to go.

The implementation idea is as follows:
First, clarify our needs: Our purpose is to make an infinite loop scroll wheel control. The height of each scroll wheel item is fixed, and the list is the height of n scroll wheel items (that is, the height of the list items of RecyclerView is fixed, and the height of RecyclerView is the height of n list items)

  1. RecyclerView, like other custom ViewGroups, will go through the measurement layout step, and then add the list items as sub-Views to RecyclerView. If you slide, it will also be the position of the moved sub-view. We can get all the surviving sub-views through Recycler.getChildAt() list item, and then determine whether the list item is on the screen based on the getTop() and getBottom() methods of each list item.
  2. Initializing the layout in the onLayoutChildren method, we calculate how many list items the RecyclerView can fill through the height of the RecyclerView and the height of the list items, and then fill the list items.
    onLayoutChildren is a method of the RecyclerView.LayoutManager class, used to measure and lay out items in RecyclerView. It is usually called in the following situations:
    1.) When RecyclerView sets LayoutManager for the first time: When setting LayoutManager, RecyclerView calls onLayoutChildren to get the initial layout.
    2.) When RecyclerView's data set changes: When RecyclerView's data set changes (such as adding, deleting, or moving items), RecyclerView calls onLayoutChildren to relayout all items.
    3.) When the size of the RecyclerView changes: When the size of the RecyclerView changes (for example, the user changes the screen orientation or resizes the RecyclerView), the RecyclerView calls onLayoutChildren to relayout all items.
    In these cases, the onLayoutChildren method will be called to ensure that the items in the RecyclerView can be displayed and laid out correctly.
  3. When the user manually slides or calls the scrollXXX() method of RecyclerView, the scrollVerticallyBy method of LayoutManager will be called. We can get the distance to be slid through getTop() of the first list item and getBottom() of the last list item. Determine whether to slide to the end or slide to the bottom. If so, create a new subview and add it to the RecyclerView (if it slides up, add list items in flashback order of the data source, if it slides down, add list items in forward order of the data source), so Able to achieve infinite sliding. Of course, subviews that slide out of the screen must be recycled and removed.
  4. Regarding creating list items: We must create them through the RecyclerView.getViewForPosition(i) method, which finally calls the Adapter.onCreateViewHolder() method, so that we can create multiple list items with the same adapterPosition, and also through RecyclerView. getPosition(@NonNull View view) method gets the correct adapterPosition

A few questions about the original article:

  1. The original article only adds one list item at a time. When the user slides very fast (or when we slide through the scrollxxx method), this will happen: the sliding distance at one time is greater than the height of a list item, so it will appear Meaningless blank space, so we need to determine whether the sliding distance is greater than the height of a list item. If so, we need to add multiple list items in forward or backward order according to the sliding direction.
  2. The original article does not provide a method to slide the list item to the specified position. Because we are making a scroll wheel component, this is necessary. The solution is also very simple: first get all the visible list items on the screen, and then get the list item in the middle. Get the adapterPosition of the list item through the getPosition() method, compare it to the position you want to slide to, and slide up or down the distance of the list item by the difference.

We can easily achieve the effect we want by modifying the code in the original article according to the implementation ideas and problem-solving methods. Because it is relatively simple, the code will not be posted here. If you need it, you can check it out on github: VerticalLooperLayoutManager
Let’s take a look at the final effect of LayoutManager with infinite data loop :

RecyclerView with infinite data loop

Guess you like

Origin blog.csdn.net/weixin_43864176/article/details/129564627