首页 > 软件编程 > Android > RecyclerView无限循环效果实现及示例解析

RecyclerView无限循环效果实现及示例解析

福牛 3月 29, 2023 44 0

前言

前两天在逛博客的时候发现了这样一张直播间的截图，其中这个商品列表的切换和循环播放效果感觉挺好:

熟悉android的同学应该很快能想到这是recyclerView实现的线性列表,其主要有两个效果：

1.顶部item切换后样式放大+转场动画。2.列表自动、无限循环播放。

第一个效果比较好实现，顶部item布局的变化可以通过对RecyclerView进行OnScroll监听，判断item位置，做scale缩放。或者在自定义layoutManager在做layoutChild相关操作时判断第一个可见的item并修改样式。

自动播放则可以通过使用手势判断+延时任务来做。

本文主要提供关于第二个无限循环播放效果的自定义LayoutManager的实现。

有现成的轮子吗？

先看看有没有合适的轮子，“不要重复造轮子”，除非轮子不满足需求。

1、修改adpter和数据映射实现

google了一下，有关recyclerView无限循环的博客很多，内容基本一模一样。大部分的博客都提到/使用了一种修改adpter以及数据映射的方式，主要有以下几步：

1. 修改adapter的getItemCount()方法，让其返回Integer.MAX_VALUE

2. 在取item的数据时，使用索引为position % list.size

3. 初始化的时候，让recyclerView滑到近似Integer.MAX_VALUE/2的位置，避免用户滑到边界。

在逛stackOverFlow时找到了这种方案的出处： Java – How to cycle through items in Android RecyclerView? – Stack Overflow

这个方法是建立了一个数据和位置的映射关系，因为itemCount无限大，所以用户可以一直滑下去，又因对位置与数据的取余操作，就可以在每经历一个数据的循环后重新开始。看上去RecyclerView就是无限循环的。

很多博客会说这种方法并不好，例如对索引进行了计算/用户可能会滑到边界导致需要再次动态调整到中间之类的。然后自己写了一份自定义layoutManager后觉得用自定义layoutManager的方法更好。

其实我倒不这么觉得。

事实上，这种方法已经可以很好地满足大部分无限循环的场景，并且由于它依然沿用了LinearLayoutManager。就代表列表依旧可以使用LLM（LinearLayoutManager）封装好的布局和缓存机制。

  • 首先索引计算这个谈不上是个问题。至于用户滑到边界的情况，也可以做特殊处理调整位置。(另外真的有人会滑约Integer.MAX_VALUE/2大约1073741823个position吗？
  • 性能上也无需担心。从数字的直觉上，设置这么多item然后初始化scrollToPosition(Integer.MAX_VALUE/2)看上去好像很可怕，性能上可能有问题，会卡顿巴拉巴拉。

实际从初始化到scrollPosition到真正onlayoutChildren系列操作，主要经过了以下几步。

先上一张流程图：

  • 设置mPendingScrollPosition，确定要滑动的位置，然后requestLayout()请求布局;
  1. /**
  2.      * <p>Scroll the RecyclerView to make the position visible.</p>
  3.      *
  4.      * <p>RecyclerView will scroll the minimum amount that is necessary to make the
  5.      * target position visible. If you are looking for a similar behavior to
  6.      * {@link android.widget.ListView#setSelection(int)} or
  7.      * {@link android.widget.ListView#setSelectionFromTop(int, int)}, use
  8.      * {@link #scrollToPositionWithOffset(int, int)}.</p>
  9.      *
  10.      * <p>Note that scroll position change will not be reflected until the next layout call.</p>
  11.      *
  12.      * @param position Scroll to this adapter position
  13.      * @see #scrollToPositionWithOffset(int, int)
  14.      */
  15. @Override
  16. public void scrollToPosition(int position) {
  17.      mPendingScrollPosition = position;//更新position
  18.      mPendingScrollPositionOffset = INVALID_OFFSET;
  19.      if (mPendingSavedState != null) {
  20.          mPendingSavedState.invalidateAnchor();
  21.      }
  22.      requestLayout();
  23. }
  • 请求布局后会触发recyclerView的dispatchLayout，最终会调用onLayoutChildren进行子View的layout,如官方注释里描述的那样，onLayoutChildren最主要的工作是：确定锚点、layoutState，调用fill填充布局。

onLayoutChildren部分源码：

  1. @Override
  2. public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
  3.      // layout algorithm:
  4.      // 1) by checking children and other variables, find an anchor coordinate and an anchor
  5.      // item position.
  6.      // 2) fill towards start, stacking from bottom
  7.      // 3) fill towards end, stacking from top
  8.      // 4) scroll to fulfill requirements like stack from bottom.
  9.      //…………..
  10.      // 省略，前面主要做了一些异常状态的检测、针对焦点的特殊处理、确定锚点对anchorInfo赋值、偏移量计算
  11.      int startOffset;
  12.      int endOffset;
  13.      final int firstLayoutDirection;
  14.      if (mAnchorInfo.mLayoutFromEnd) {
  15.          // fill towards start
  16.          updateLayoutStateToFillStart(mAnchorInfo); //根据mAnchorInfo更新layoutState
  17.          mLayoutState.mExtraFillSpace = extraForStart;
  18.          fill(recycler, mLayoutState, state, false);//填充
  19.          startOffset = mLayoutState.mOffset;
  20.          final int firstElement = mLayoutState.mCurrentPosition;
  21.          if (mLayoutState.mAvailable > 0) {
  22.              extraForEnd += mLayoutState.mAvailable;
  23.          }
  24.          // fill towards end
  25.          updateLayoutStateToFillEnd(mAnchorInfo);//更新layoutState为fill做准备
  26.          mLayoutState.mExtraFillSpace = extraForEnd;
  27.          mLayoutState.mCurrentPosition += mLayoutState.mItemDirection;
  28.          fill(recycler, mLayoutState, state, false);//填充
  29.          endOffset = mLayoutState.mOffset;
  30.          if (mLayoutState.mAvailable > 0) {
  31.              // end could not consume all. add more items towards start
  32.              extraForStart = mLayoutState.mAvailable;
  33.              updateLayoutStateToFillStart(firstElement, startOffset);//更新layoutState为fill做准备
  34.              mLayoutState.mExtraFillSpace = extraForStart;
  35.              fill(recycler, mLayoutState, state, false);
  36.              startOffset = mLayoutState.mOffset;
  37.          }
  38.      } else {
  39.          //layoutFromStart 同理，省略
  40.      }
  41.      //try to fix gap , 省略
  • onLayoutChildren中会调用updateAnchorInfoForLayout更新anchoInfo锚点信息，updateLayoutStateToFillStart/End再根据anchorInfo更新layoutState为fill填充做准备。
  • fill的源码: `
  1. int fill(RecyclerView.Recycler recycler, LayoutState layoutState,
  2.          RecyclerView.State state, boolean stopOnFocusable) {
  3.      // max offset we should set is mFastScroll + available
  4.      final int start = layoutState.mAvailable;
  5.      if (layoutState.mScrollingOffset != LayoutState.SCROLLING_OFFSET_NaN) {
  6.          // TODO ugly bug fix. should not happen
  7.          if (layoutState.mAvailable &lt; 0) {
  8.              layoutState.mScrollingOffset += layoutState.mAvailable;
  9.          }
  10.          recycleByLayoutState(recycler, layoutState);
  11.      }
  12.      int remainingSpace = layoutState.mAvailable + layoutState.mExtraFillSpace;
  13.      LayoutChunkResult layoutChunkResult = mLayoutChunkResult;
  14.      // （不限制layout个数/还有剩余空间） 并且 有剩余数据
  15.      while ((layoutState.mInfinite || remainingSpace &gt; 0) &amp;&amp; layoutState.hasMore(state)) {
  16.          layoutChunkResult.resetInternal();
  17.          if (RecyclerView.VERBOSE_TRACING) {
  18.              TraceCompat.beginSection(“LLM LayoutChunk”);
  19.          }
  20.          layoutChunk(recycler, state, layoutState, layoutChunkResult);
  21.          if (RecyclerView.VERBOSE_TRACING) {
  22.              TraceCompat.endSection();
  23.          }
  24.          if (layoutChunkResult.mFinished) {
  25.              break;
  26.          }
  27.          layoutState.mOffset += layoutChunkResult.mConsumed * layoutState.mLayoutDirection;
  28.          /**
  29.              * Consume the available space if:
  30.              * * layoutChunk did not request to be ignored
  31.              * * OR we are laying out scrap children
  32.              * * OR we are not doing pre-layout
  33.              */
  34.          if (!layoutChunkResult.mIgnoreConsumed || layoutState.mScrapList != null
  35.                  || !state.isPreLayout()) {
  36.              layoutState.mAvailable -= layoutChunkResult.mConsumed;
  37.              // we keep a separate remaining space because mAvailable is important for recycling
  38.              remainingSpace -= layoutChunkResult.mConsumed;
  39.          }
  40.          if (layoutState.mScrollingOffset != LayoutState.SCROLLING_OFFSET_NaN) {
  41.              layoutState.mScrollingOffset += layoutChunkResult.mConsumed;
  42.              if (layoutState.mAvailable &lt; 0) {
  43.                  layoutState.mScrollingOffset += layoutState.mAvailable;
  44.              }
  45.              recycleByLayoutState(recycler, layoutState);//回收子view
  46.          }
  47.          if (stopOnFocusable &amp;&amp; layoutChunkResult.mFocusable) {
  48.              break;
  49.          }
  50.      }
  51.      if (DEBUG) {
  52.          validateChildOrder();
  53.      }
  54.      return start – layoutState.mAvailable;

fill主要干了两件事：

  • 循环调用layoutChunk布局子view并计算可用空间
  • 回收那些不在屏幕上的view

所以可以清晰地看到LLM是按需layout、回收子view。

就算创建一个无限大的数据集，再进行滑动，它也是如此。可以写一个修改adapter和数据映射来实现无限循环的例子，验证一下我们的猜测：

  1. //adapter关键代码
  2. @NonNull
  3. @Override
  4. public DemoViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  5.      LayoutInflater inflater = LayoutInflater.from(parent.getContext());
  6.      Log.d(“DemoAdapter”,“onCreateViewHolder”);
  7.      return new DemoViewHolder(inflater.inflate(R.layout.item_demo, parent, false));
  8. }
  9. @Override
  10. public void onBindViewHolder(@NonNull DemoViewHolder holder, int position) {
  11.      Log.d(“DemoAdapter”,“onBindViewHolder： position”+position);
  12.      String text = mData.get(position % mData.size());
  13.      holder.bind(text);
  14. }
  15. @Override
  16. public int getItemCount() {
  17.      return Integer.MAX_VALUE;
  18. }

在代码我们里打印了onCreateViewHolder、onBindViewHolder的情况。我们只要观察这viewHolder的情况，就知道进入界面再滑到Integer.MAX_VALUE/2时会初始化多少item。 `

  1. RecyclerView recyclerView = findViewById(R.id.rv);
  2. recyclerView.setAdapter(new DemoAdapter());
  3. LinearLayoutManager layoutManager = new LinearLayoutManager(this);
  4. layoutManager.setOrientation(RecyclerView.VERTICAL);
  5. recyclerView.setLayoutManager(layoutManager);
  6. recyclerView.scrollToPosition(Integer.MAX_VALUE/2);

初始化后ui效果：

-3

日志打印：

-4

可以看到，页面上共有5个item可见，LLM也按需创建、layout了5个item。

2、自定义layoutManager

找了找网上自定义layoutManager去实现列表循环的博客和代码，拷贝和复制的很多，找不到源头是哪一篇，这里就不贴链接了。大家都是先说第一种修改adapter的方式不好，然后甩了一份自定义layoutManager的代码。

然而自定义layoutManager难点和坑都很多，很容易不小心就踩到，一些博客的代码也有类似问题。 基本的一些坑点在张旭童大佬的博客中有提及， 【Android】掌握自定义LayoutManager

比较常见的问题是：

  • 不计算可用空间和子view消费的空间，layout出所有的子view。相当于抛弃了子view的复用机制
  • 没有合理利用recyclerView的回收机制
  • 没有支持一些常用但比较重要的api的实现，如前面提到的scrollToPosition。

其实最理想的办法是继承LinearLayoutManager然后修改，但由于LinearLayoutManager内部封装的原因，不方便像GridLayoutManager那样去继承LinearLayoutManager然后进行扩展（主要是包外的子类会拿不到layoutState等）。

要实现一个线性布局的layoutManager,最重要的就是实现一个类似LLM的fill（前面有提到过源码，可以翻回去看看)和layoutChunk方法。

(当然，可以照着LLM写一个丐版，本文就是这么做的。）

fill方法很重要，就如同官方注释里所说的，它是一个magic func。

从OnLayoutChildren到触发scroll滑动，都是调用fill来实现布局。

  1. /**
  2.      * The magic functions :). Fills the given layout, defined by the layoutState. This is fairly
  3.      * independent from the rest of the {@link LinearLayoutManager}
  4.      * and with little change, can be made publicly available as a helper class.
  5.      */
  6. int fill(RecyclerView.Recycler recycler, LayoutState layoutState,
  7.          RecyclerView.State state, boolean stopOnFocusable) {

前面提到过fill主要干了两件事：

  • 循环调用layoutChunk布局子view并计算可用空间
  • 回收那些不在屏幕上的view

而负责子view布局的layoutChunk则和把一个大象放进冰箱一样，主要分三步走：

  • add子view
  • measure
  • layout 并计算消费了多少空间

-5

就像下面这样：

  1. /**
  2.      * layout具体子view
  3.      */
  4. private void layoutChunk(RecyclerView.Recycler recycler, RecyclerView.State state,
  5.                      LayoutState layoutState, LayoutChunkResult result) {
  6.      View view = layoutState.next(recycler, state);
  7.      if (view == null) {
  8.          result.mFinished = true;
  9.          return;
  10.      }
  11.      RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) view.getLayoutParams();
  12.      // add
  13.      if (layoutState.mLayoutDirection != LayoutState.LAYOUT_START) {
  14.          addView(view);
  15.      } else {
  16.          addView(view, 0);
  17.      }
  18.      Rect insets = new Rect();
  19.      calculateItemDecorationsForChild(view, insets);
  20.      // 测量
  21.      measureChildwithMargins(view, 0, 0);
  22.      //布局
  23.      layoutChild(view, result, params, layoutState, state);
  24.      // Consume the available space if the view is not removed OR changed
  25.      if (params.isItemRemoved() || params.isItemChanged()) {
  26.          result.mIgnoreConsumed = true;
  27.      }
  28.      result.mFocusable = view.hasFocusable();
  29. }

那最关键的如何实现循环呢？？

其实和修改adapter的实现方法有异曲同工之妙，本质都是修改位置与数据的映射关系。

修改layoutStae的方法:

  1.      boolean hasMore(RecyclerView.State state) {
  2.          return Math.abs(mCurrentPosition) &lt;= state.getItemCount();
  3.      }
  4.      View next(RecyclerView.Recycler recycler, RecyclerView.State state) {
  5.          int itemCount = state.getItemCount();
  6.          mCurrentPosition = mCurrentPosition % itemCount;
  7.          if (mCurrentPosition &lt; 0) {
  8.              mCurrentPosition += itemCount;
  9.          }
  10.          final View view = recycler.getViewForPosition(mCurrentPosition);
  11.          mCurrentPosition += mItemDirection;
  12.          return view;
  13.      }
  14. }

最终效果：

-6

源码地址：aFlyFatPig/cycleLayoutManager (github.com)

注：也可以直接引用依赖使用，详见readme.md。

后记

本文介绍了recyclerview无限循环效果的两种不同实现方法与解析。

虽然自定义layoutManager坑点很多并且很少用的到，但了解下也会对recyclerView有更深的理解。

以上就是RecyclerView无限循环效果实现及示例解析的详细内容，更多关于RecyclerView无限循环的资料请关注我们其它相关文章！

标签

相关推荐

发表评论