Android implements infinite loop scrolling

Time:2022-8-13

There are two ideas for the traditional ViewPager to do circular scrolling.

One is to set count to Integer.MAX, and then modulo the actual number according to index
One is to add end at the beginning and start at the end. Simply put, there are two more, and when you slide to these two, setCurrentItem directly to the real position.

When observing the circular scrolling of pdd's list, I thought of several implementations.

1. Through Recyclerview, it is similar to the idea of ​​​​circular scrolling with ViewPager, and it is more necessary to intercept all touch events. But in this way, the animation of entering and exiting cannot be set like the effect of pdd.
2. By transforming the form of VerticalViewpager, it should be possible, but it feels more troublesome.
3. Implemented in a custom way. (I originally thought it was very simple, but it was implemented. There is not much code, but some small details need to be paid attention to.)

I chose to customize here is just a demo, to provide an idea.

The core is that when the item above slides out of the screen, it is removed and then added to the end of the custom ViewGroup.


public class LoopView extends ViewGroup {
  private static final String TAG = "LoopView";
  private float dis;
  private ObjectAnimator animator;
  private int currentIndex = 0;
  private Handler handler = new Handler(Looper.getMainLooper());
 
  public LoopView(Context context) {
    super(context);
    init();
  }
 
  public LoopView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }
 
  public LoopView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
 
  void init() {
    View view1 = new View(getContext());
    view1.setTag("gray");
    view1.setBackgroundColor(Color.GRAY);
    LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, 200);
    addView(view1, layoutParams);
 
    View view2 = new View(getContext());
    view2.setTag("red");
    view2.setBackgroundColor(Color.RED);
    LayoutParams layoutParams1 = new LayoutParams(LayoutParams.MATCH_PARENT, 200);
    addView(view2, layoutParams1);
 
    View view3 = new View(getContext());
    view3.setTag("green");
    view3.setBackgroundColor(Color.GREEN);
    LayoutParams layoutParams2 = new LayoutParams(LayoutParams.MATCH_PARENT, 200);
    addView(view3, layoutParams2);
 
    animator = ObjectAnimator.ofFloat(this, "dis", 0, 1);
    animator.setDuration(2000);
    animator.addListener(new AnimatorListenerAdapter() {
      @Override
      public void onAnimationEnd(Animator animation) {
        currentIndex++;
        View first = getChildAt(0);
        removeView(first);
        addView(first);
        handler.postDelayed(new Runnable() {
          @Override
          public void run() {
            animator.clone().start();
          }
        }, 3000);
      }
    });
 
  }
 
  public void start() {
    animator.start();
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    measureChildren(widthMeasureSpec, heightMeasureSpec);
    super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(200, MeasureSpec.EXACTLY));
  }
 
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int childCount = getChildCount();
    int top = currentIndex * getMeasuredHeight();
    for (int i = 0; i < childCount; i++) {
      View childAt = getChildAt(i);
      childAt.layout(l, top, r, top + childAt.getMeasuredHeight());
      top += childAt.getMeasuredHeight();
    }
  }
 
  public float getDis() {
    return dis;
  }
 
  public void setDis(float dis) {
    this.dis = dis;
    float disY = dis * getHeight();
    scrollTo(0, (int) (currentIndex * getHeight() + disY));
  }
}

It should be noted that the value of top is used in onLayout.

The above is the whole content of this article, I hope it will be helpful to everyone's study, and I hope you will support developpaer a lot.