Unity使用UGUI制作无限滑动列表

原理参照上一篇使用NGUI的制作无限滑动列表的文章

Unity 使用NGUI制作无限滑动列表_unity 滑动列表很多物体-CSDN博客

准备工作:

新建一个空物体命名为LoopList,并调整其大小,

并增加Scroll Rect组件(用于滑动)、Rect2D组件(用于裁剪)

新建一个空物体,命名Content,增加布局组件和自适应组件,再将Content的轴点y轴的值设置为1,这样可以让子物体的第一项从列表的顶部的开始排列。

新建一个脚本,命名为LoopScrollList4UGUI,将其挂载到LoopList物体上。

实现:

首先还是来观察Content及其子物体的情况,

从上可以看到,Content的UI坐标的y轴在变化,子物体的局部坐标不变化,因此可以将Content的位置变化作为参考,在Content上移超出一定位置时,将第一个放到最后一个,下移超出一定位置时,将最后一个放到第一个。

怎样操作?

Content的UI坐标位置是从0开始增加的,也就是说上移在ContentUI坐标y轴值大于一个子物体的宽度,下移在小于0,即可进行头部和尾部的子物体的位置变化。

代码如下:


        float currentY = content.anchoredPosition.y;
        // 上移超出一个位置时的处理
        // 向上滚动
        if (currentY > itemHeight)
        {
            Transform firstItem = content.GetChild(0);
            firstItem.SetAsLastSibling();
            content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y - itemHeight);
        }
        // 下移低于一个位置时的处理
        else if (currentY < 0)
        {
            Transform lastItem = content.GetChild(content.childCount - 1);
            lastItem.SetAsFirstSibling();
            content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y + itemHeight);
        }

在什么时候计算?

滑动列表的时候,Scroll Rect的onValueChanged会执行,因此只要在监听这个函数的执行时,就可以计算上述的头尾子物体位置变化。

   // 监听滚动事件
   scrollRect.onValueChanged.AddListener(OnScroll);
   // 滚动事件处理函数
   void OnScroll(Vector2 scrollPosition)
   {
       float currentY = content.anchoredPosition.y;

       // 上移超出一个位置时的处理
       // 向上滚动
       if (currentY > itemHeight)
       {
           Transform firstItem = content.GetChild(0);
           firstItem.SetAsLastSibling();
           content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y - itemHeight);
       }
       // 下移低于一个位置时的处理
       else if (currentY < 0)
       {
           Transform lastItem = content.GetChild(content.childCount - 1);
           lastItem.SetAsFirstSibling();
           content.anchoredPosition = new Vector2(content.anchoredPosition.x, content.anchoredPosition.y + itemHeight);
       }
   }

结果: