Unity ScrollView实现无限循环效果

2024-04-02 19:04:59 439人浏览薄情痞子

摘要

本文实例为大家分享了Unity ScrollView实现无限循环效果的具体代码，供大家参考，具体内容如下在Unity引擎中ScrollView组件是一个使用率比较高的组件，该组件能

本文实例为大家分享了Unity ScrollView实现无限循环效果的具体代码，供大家参考，具体内容如下

在Unity引擎中ScrollView组件是一个使用率比较高的组件，该组件能上下或者左右拖动的UI列表，背包、展示多个按钮等情况的时候会用到,在做排行榜类似界面时，item非常多，可能有几百个，一次创建这么多GameObject是非常卡的。为此，使用只创建可视区一共显示的个数，加上后置准备个数。

由于ScrollView有两种滚动方式，水平滚动或者垂直滚动，所以我创建了ScrollBase基类，和HorizontalScroll子类及VerticalScroll子类，在父类中设定了公共的抽象方法OnDrawView—绘制显示区的方法；CreateItem----创建Item的方法；Update----滚动状态下实时更新Item的位置。

ScrollBase基类


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public enum MoveType
{
    UP,
    DOWN,
    LEFT,
    RIGHT,
    STOP
}

public abstract class ScrollBase
{

    public ItemArray<ItemData> items;
    public ScrollViewLoop scrollLoop;
    public float viewHeight;
    public float viewWidth;
    public float contentHeight;
    public float contentWidth;
    public RectTransfORM rectTransform;
    public ScrollRect scrollRect;
    public MoveType type;

    public float item_width;//每个Item的宽度
    public float item_height;//每个Item的高度
    public int viewNum;//显示区显示的个数
    public int addNum;//后置准备个数
    public int itemNum;//总共需要多少Item的滚动
    public float spaceY;//垂直Item间隔
    public float spaceX;//水平Item间隔

    public ScrollBase(ScrollViewLoop _scrollLoop, bool isCreateItem = true)
    {
        scrollLoop = _scrollLoop;
        rectTransform = scrollLoop.GetComponent<RectTransform>();
        scrollRect = scrollLoop.GetComponent<ScrollRect>();
        if (!scrollRect)
        {
            scrollRect = scrollLoop.gameObject.AddComponent<ScrollRect>();
        }
        item_width = scrollLoop.item_width;
        item_height = scrollLoop.item_height;
        viewNum = scrollLoop.viewNum;
        addNum = scrollLoop.addNum;
        itemNum = scrollLoop.itemNum;
        spaceY = scrollLoop.spaceY;
        spaceX = scrollLoop.spaceX;

        OnDrawView();
        if (isCreateItem)
        {
            CreateItem();
        }

    }

    public abstract void OnDrawView();

    public abstract void CreateItem();

    public abstract void Update();

}

ScrollViewLoop控制类

这个属性类需要挂载在ScrollRect物体身上，然后在面板上进行属性配置


using System.Collections;
using System.Collections.Generic;
using UnityEngine;


public class ItemData
{
    public RectTransform itemRect;
    public int index;
}

public class ScrollViewLoop : MonoBehaviour
{
    public GameObject itemPrefab;
    [Header("每个Item的宽度")]
    public float item_width;
    [Header("每个Item的高度")]
    public float item_height;
    [Header("显示区显示几个Item")]
    public int viewNum = 6;
    [Header("显示区外多复制几个Item")]
    public int addNum = 2;
    [Header("总共需要多少Item")]
    public int itemNum = 100;
    [Header("Item之间的垂直距离")]
    public float spaceY = 2;
    public float spaceX = 2;
    public delegate void ItemChange(ItemData itemData);
    public event ItemChange OnChange;//Item位置改变时调用的事件
    [Header("是否是横向滑动")]
    public bool isHorizontal = false;
    ScrollBase scrollBase;

    void Start()
    {

        if (isHorizontal)
        {
            scrollBase = new HorizontalScroll(this);
        }
        else
        {
            scrollBase = new VerticalScroll(this);
        }

    }

    public void UseOnChange(ItemData itemData)
    {
        OnChange?.Invoke(itemData);
    }
   

    //ScrollRect滚动
    void Update()
    {
        if (scrollBase != null)
        {
            scrollBase.Update();
        }
    }

}

ItemArray

我们实现无限循环的核心思想是,当滚动框向左移动时,就判断左边的第一个Item距离显示框左边框的距离，是否大于Item水平间隔*0.5+Item的宽度，如果大于则把第一个Item放到最后的位置，当滚动框向右移动时就判断右边的Item距离右边框的距离情况，这样我们就可以在显示区域一直看到有Item的规则显示，所以我定制了一个泛型容器类，这个类存放所有的Item信息，当我们取第一个Item时自动把第一个Item放到最后，当我们取最后一个Item时自动把最后的一个Item放到最前面。


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// Item集合类
/// </summary>
/// <typeparam name="T"></typeparam>
public class ItemArray<T> where T : ItemData
{
    List<T> list;
    public int count
    {
        get
        {
            return list.Count;
        }
    }

    public ItemArray()
    {
        list = new List<T>();
    }

    public ItemArray(T[] ts)
    {
        if (ts == null)
        {
            return;
        }
        for (int i = 0; i < ts.Length; i++)
        {
            list.Add(ts[i]);
        }
    }

    /// <summary>
    /// 添加一个元素
    /// </summary>
    /// <param name="t"></param>
    public void AddItem(T t)
    {
        list.Add(t);
    }

    public T GetFirst()
    {
        if (list.Count == 0)
        {
            return default(T);
        }
        T t = list[0];
        list.RemoveAt(0);
        t.index = list[list.Count - 1].index + 1;
        list.Add(t);
        return t;
    }

    public T GetLast()
    {
        if (list.Count == 0)
        {
            return default(T);
        }
        T t = list[list.Count - 1];
        list.RemoveAt(list.Count - 1);
        t.index = list[0].index - 1;
        list.Insert(0, t);
        return t;
    }

    public T[] GetArray()
    {
        T[] ts = new T[list.Count];
        for (int i = 0; i < list.Count; i++)
        {
            ts[i] = list[i];
        }
        return ts;
    }

    public T this[int index]
    {
        get
        {
            return list[index];
        }
    }

}

HorizontalScroll子类及VerticalScroll子类

ScrollView无限循环的核心功能代码都在这两个子类中

HorizontalScroll子类


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HorizontalScroll : ScrollBase
{
    public HorizontalScroll(ScrollViewLoop _scrollLoop, bool isCreateItem = true) : base(_scrollLoop, isCreateItem)
    {
        scrollRect.horizontal = true;
        scrollRect.vertical = false;
    }

    public override void CreateItem()
    {
        items = new ItemArray<ItemData>();
        for (int i = 0; i < viewNum + addNum; i++)
        {
            GameObject item = GameObject.Instantiate(scrollLoop.itemPrefab);
            RectTransform itemRect = item.GetComponent<RectTransform>();
            ItemData data = new ItemData();
            data.itemRect = itemRect;
            data.index = i;
            items.AddItem(data);
            scrollLoop.UseOnChange(data);
            itemRect.sizeDelta = new Vector2(item_width, item_height);
            itemRect.anchorMin = new Vector2(0, 1);
            itemRect.anchorMax = new Vector2(0, 1);
            itemRect.pivot = new Vector2(0, 1);
            itemRect.localScale = Vector2.one;
            item.transform.parent = scrollRect.content;
            item.transform.localPosition = new Vector3(i * (item_width + spaceX), 0, 0);
        }
    }

    void RewindItemPos()
    {
        int index = Mathf.FloorToInt(Mathf.Abs(scrollRect.content.localPosition.x) / (item_width + spaceX));
        for (int i = 0; i < items.count; i++)
        {
            RectTransform itemRect = items[i].itemRect;
            items[i].index = index;
            scrollLoop.UseOnChange(items[i]);
            itemRect.transform.localPosition = new Vector3(items[i].index * (item_width + spaceX), 0, 0);
            index++;
        }
    }


    public override void OnDrawView()
    {
        SetRectTransform(rectTransform);
        rectTransform.sizeDelta = new Vector2(item_width * viewNum + (viewNum - 1) * spaceX, item_height);
        SetRectTransform(scrollRect.viewport);
        viewHeight = scrollLoop.item_height;
        viewWidth = viewNum * item_width + (viewNum - 1) * spaceX;
        scrollRect.viewport.sizeDelta = new Vector2(viewWidth, viewHeight);
        scrollRect.viewport.localPosition = Vector3.zero;
        SetRectTransform(scrollRect.content);
        contentHeight = item_height;
        contentWidth = itemNum * item_width + (itemNum - 1) * spaceX;
        scrollRect.content.sizeDelta = new Vector2(contentWidth, contentHeight);
        scrollRect.content.localPosition = Vector3.zero;
    }

    public void SetRectTransform(RectTransform rect)
    {
        rect.anchorMin = new Vector2(0, 0.5f);
        rect.anchorMax = new Vector2(0, 0.5f);
        rect.pivot = new Vector2(0, 1);
        rect.localScale = Vector2.one;
    }

    float lastX = 0;
    MoveType lastMoveType = MoveType.STOP;
    public override void Update()
    {
        float x = scrollRect.content.localPosition.x;
        if (x > lastX)
        {
            type = MoveType.RIGHT;
        }
        else if (x < lastX)
        {
            type = MoveType.LEFT;
        }
        else
        {
            type = MoveType.STOP;
            if (lastMoveType != type)
            {
                Debug.Log("重置位置");
                RewindItemPos();
            }
        }
        if (type == MoveType.LEFT)//向左滑动
        {
            if (items[items.count - 1].index == itemNum - 1)
            {
                return;
            }
            float firstItemX = items[0].itemRect.localPosition.x;
            if (-x - firstItemX - item_width >= spaceX * 0.5f)
            {
                float lastItemX = items[items.count - 1].itemRect.localPosition.x;
                ItemData firstItem = items.GetFirst();
                firstItem.itemRect.localPosition = new Vector3(lastItemX + spaceX + item_width, 0, 0);
                if (firstItem.index < itemNum)
                {
                    scrollLoop.UseOnChange(firstItem);
                }
            }
        }
        else if (type == MoveType.RIGHT)//向右滑动
        {
            if (items[0].index == 0)
            {
                return;
            }
            float lastItemX = items[items.count - 1].itemRect.localPosition.x;
            if (lastItemX + x - viewWidth >= spaceX * 0.5f)
            {
                float firstItemX = items[0].itemRect.localPosition.x;
                ItemData lastItem = items.GetLast();
                lastItem.itemRect.localPosition = new Vector3(firstItemX - spaceX - item_width, 0, 0);
                if (lastItem.index >= 0)
                {
                    scrollLoop.UseOnChange(lastItem);
                }
            }
        }
        lastMoveType = type;
        lastX = x;
    }
}

VerticalScroll子类


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class VerticalScroll : ScrollBase
{

    public VerticalScroll(ScrollViewLoop _scrollLoop, bool isCreateItem = true) : base(_scrollLoop, isCreateItem)
    {
        scrollRect.horizontal = false;
        scrollRect.vertical = true;
    }

    public override void CreateItem()
    {
        items = new ItemArray<ItemData>();
        for (int i = 0; i < viewNum + addNum; i++)
        {
            GameObject item = GameObject.Instantiate(scrollLoop.itemPrefab);
            RectTransform itemRect = item.GetComponent<RectTransform>();
            ItemData data = new ItemData();
            data.itemRect = itemRect;
            data.index = i;
            items.AddItem(data);
            scrollLoop.UseOnChange(data);
            itemRect.sizeDelta = new Vector2(item_width, item_height);
            itemRect.anchorMin = new Vector2(0, 1);
            itemRect.anchorMax = new Vector2(0, 1);
            itemRect.pivot = new Vector2(0, 1);
            itemRect.localScale = Vector2.one;
            item.transform.parent = scrollRect.content;
            item.transform.localPosition = new Vector3(0, (-i) * (item_height + spaceY), 0);
        }
    }

    void RewindItemPos()
    {
        int index = Mathf.FloorToInt(Mathf.Abs(scrollRect.content.localPosition.y) / (item_height + spaceY));
        for (int i = 0; i < items.count; i++)
        {
            RectTransform itemRect = items[i].itemRect;
            items[i].index = index;
            scrollLoop.UseOnChange(items[i]);
            itemRect.transform.localPosition = new Vector3(0, (-items[i].index) * (item_height + spaceY), 0);
            index++;
        }
    }

    public override void OnDrawView()
    {
        SetRectTransform(rectTransform);
        rectTransform.sizeDelta = new Vector2(item_width, viewNum * item_height + (viewNum - 1) * spaceY);
        SetRectTransform(scrollRect.viewport);
        viewHeight = viewNum * item_height + (viewNum - 1) * spaceY;
        scrollRect.viewport.sizeDelta = new Vector2(item_width, viewHeight);
        scrollRect.viewport.localPosition = Vector3.zero;
        SetRectTransform(scrollRect.content);
        contentHeight = itemNum * item_height + (itemNum - 1) * spaceY;
        scrollRect.content.sizeDelta = new Vector2(item_width, contentHeight);
        scrollRect.content.localPosition = Vector3.zero;
    }

    public void SetRectTransform(RectTransform rect)
    {
        rect.anchorMin = new Vector2(0.5f, 1);
        rect.anchorMax = new Vector2(0.5f, 1);
        rect.pivot = new Vector2(0, 1);
        rect.localScale = Vector2.one;
    }

    float lastY = 0;
    MoveType lastMoveType = MoveType.STOP;
    public override void Update()
    {
        float y = scrollRect.content.localPosition.y;
        if (y > lastY)
        {
            type = MoveType.UP;
        }
        else if (y < lastY)
        {
            type = MoveType.DOWN;
        }
        else
        {
            type = MoveType.STOP;
            if (lastMoveType != type)
            {
                RewindItemPos();
            }
        }
        if (type == MoveType.UP)//向上滑动
        {

            if (items[items.count - 1].index == itemNum - 1)
            {
                return;
            }
            float firstItemY = items[0].itemRect.localPosition.y;
            if (firstItemY - item_height + y >= spaceY * 0.5f)
            {
                float lastItemY = items[items.count - 1].itemRect.localPosition.y;
                ItemData firstItem = items.GetFirst();
                firstItem.itemRect.localPosition = new Vector3(0, lastItemY - spaceY - item_height, 0);
                if (firstItem.index < itemNum)
                {
                    scrollLoop.UseOnChange(firstItem);
                }
            }
        }
        else if (type == MoveType.DOWN)//向下滑动
        {
            if (items[0].index == 0)
            {
                return;
            }
            float lastItemY = items[items.count - 1].itemRect.localPosition.y;
            if (-lastItemY - y - viewHeight >= spaceY * 0.5f)
            {
                float firstItemY = items[0].itemRect.localPosition.y;
                ItemData lastItem = items.GetLast();
                lastItem.itemRect.localPosition = new Vector3(0, firstItemY + spaceY + item_height, 0);
                if (lastItem.index >= 0)
                {
                    scrollLoop.UseOnChange(lastItem);
                }
            }

        }
        lastMoveType = type;
        lastY = y;
    }
}

编辑器拓展

这一步我们进行编辑器的拓展，根据ScrollViewLoop控制类面板上的数据我们在未运行的状态下改变ScrollView的显示区域，这样更利于我们的可视化排版。


using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEngine.UI;

[CustomEditor(typeof(ScrollViewLoop))]
public class ScrollLopEditor : Editor
{
    ScrollViewLoop scrollLoop;
    private RectTransform scrollRectTransfrom;
    private ScrollRect scrollRect;
    private void OnEnable()
    {
        scrollLoop = target as ScrollViewLoop;
        scrollRectTransfrom = scrollLoop.GetComponent<RectTransform>();
        scrollRect = scrollLoop.GetComponent<ScrollRect>();

    }

    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        bool isBtn = GUILayout.Button("编辑ScrollView显示区大小");
        if (isBtn)
        {
            if (scrollLoop.isHorizontal)
            {
                ScrollBase scrollBase = new HorizontalScroll(scrollLoop, false);
            }
            else
            {
                ScrollBase scrollBase = new VerticalScroll(scrollLoop, false);
            }
        }
    }


}

测试

测试一下功能效果


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Test : MonoBehaviour
{
    public ScrollViewLoop sl;

    private void Start()
    {
        sl.OnChange += Sl_OnChange;
    }

    //Item位置改变时自动改变Item展示内容
    private void Sl_OnChange(ItemData itemData)
    {
        itemData.itemRect.GetChild(0).GetComponent<Text>().text = "ITEM"+itemData.index;
    }
}

面板显示如下：

运行效果如下(本来想放一段视频的，遗憾的是没能成功操作，尴尬)：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Unity ScrollView实现无限循环效果

本文链接: https://www.lsjlt.com/news/131213.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Unity ScrollView实现无限循环效果

本文实例为大家分享了Unity ScrollView实现无限循环效果的具体代码，供大家参考，具体内容如下在Unity引擎中ScrollView组件是一个使用率比较高的组件，该组件能...

99+

2022-11-12
Unity ScrollView如何实现无限循环效果

小编给大家分享一下Unity ScrollView如何实现无限循环效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下在Unity引擎中ScrollVi...

99+

2023-06-20
Unity ScrollView实现无限滑动效果

本文实例为大家分享了Unity ScrollView实现无限滑动效果的具体代码，供大家参考，具体内容如下一、效果演示二、前言当邮件中有1000封邮件，商店列表中有1000个物...

99+

2022-11-12
Unity ScrollView如何实现无限滑动效果

小编给大家分享一下Unity ScrollView如何实现无限滑动效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、效果演示二、前言当邮件中有1000封邮件，...

99+

2023-06-20
Android ViewPager实现无限循环效果

最近项目里有用到ViewPager来做广告运营位展示，看到现在很多APP的广告运营位都是无限循环的，所以就研究了一下这个功能的实现。先看看效果从一个方向上一直滑动，么有...

99+

2022-06-06

循环 viewpager Android
RecyclerView无限循环效果怎么实现

这篇文章主要介绍“RecyclerView无限循环效果怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“RecyclerView无限循环效果怎么实现”文章能帮助大家解决问题。1、修改adpter...

99+

2023-07-05
Android实现轮播图无限循环效果

本文实例为大家分享了Android轮播图无限循环的具体代码，供大家参考，具体内容如下实现无限循环在getCount()方法中，返回一个很大的值，Integer.MAX_VA...

99+

2022-06-06

轮播图循环轮播 Android
Unity ScrollView实现自动吸附效果

本文实例为大家分享了Unity ScrollView实现自动吸附效果的具体代码，供大家参考，具体内容如下一、效果演示二、实现思路通过使用UGUI的拖拽接口，在拖拽结束时比较当...

99+

2022-11-12
CSS3怎么实现无限循环的无缝滚动效果

这篇文章主要讲解了“CSS3怎么实现无限循环的无缝滚动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3怎么实现无限循环的无缝滚动效果”吧！1. 使用CSS3来实现若要用CSS3的属...

99+

2023-07-05
js怎么实现无限循环轮播图效果

小编给大家分享一下js怎么实现无限循环轮播图效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！知识要点1.实现无限循环的原理：以...

99+

2022-10-19
CSS3如何实现无限循环的滚动效果

这篇文章主要讲解了“CSS3如何实现无限循环的滚动效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现无限循环的滚动效果”吧！1. 使用CSS3来实现若要用CSS3的属性实现的...

99+

2023-07-04
Android ViewPager导航小圆点实现无限循环效果

之前用View Pager做了一个图片切换的推荐栏（就类似与淘宝、头条客户端顶端的推荐信息栏），利用View Pager很快就能实现，但是一次无意间使用淘宝APP的时候，突然发现它的效果和我做的还不一样，淘宝APP的推荐栏可以左右无限循环切...

99+

2023-05-30

viewpager 导航无限循环
怎么实现Android TV 3D卡片无限循环效果

这篇文章主要讲解了“怎么实现Android TV 3D卡片无限循环效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么实现Android TV 3D卡片无限循环效果”吧！##思路自定义Vi...

99+

2023-06-25
Android TV 3D卡片无限循环效果

TV 3D卡片无限循环效果，供大家参考，具体内容如下 ##前言 1、需求：实现3个卡片实现无限循环效果：1-2-3-1-2-3-1…，而且要实现3D效果：中间突出，两侧呈角度显示 2...

99+

2022-11-12
如何使用CSS3实现无限循环的无缝滚动效果

这篇文章将为大家详细讲解有关如何使用CSS3实现无限循环的无缝滚动效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1. 使用CSS3来实现若要用CSS3的属性实现的话，...

99+

2022-10-19
Android ViewPager怎么去实现无限循环滚动回绕效果

不懂Android ViewPager怎么去实现无限循环滚动回绕效果？其实想解决这个问题也不难，下面让小编带着大家一起学习怎么去解决，希望大家阅读完这篇文章后大所收获。android系统提供的ViewPager标准方式是左右可以自由滑动，但...

99+

2023-05-30

android viewpager 滚动效果
Android实现带指示点的自动轮播无限循环效果

想要实现无限轮播,一直向左滑动,当到最后一个view时,会滑动到第一个,无限… 可以自己写ViewPager然后加handler先实现自动滚动,当然这里我为了项目的进度直接使用...

99+

2022-06-06

自动循环轮播 Android
Android实现横向无限循环滚动的单行弹幕效果

本期将带领大家实现一个这样的效果，支持无限循环的单行弹幕效果。实现思路分析要实现上面的效果，我们先拆分下实现要素： 1、弹幕布局是从屏幕的右侧向左侧滚动，单个弹幕之间的间距是固...

99+

2022-11-12
Android ViewPager如何实现无限循环轮播广告位Banner效果

这篇文章将为大家详细讲解有关Android ViewPager如何实现无限循环轮播广告位Banner效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。现在一些app通常会在头部放一个广告位，底部放置一行小...

99+

2023-05-30

android viewpager banner
Unity中怎么利用ScrollView实现自动吸附效果

Unity中怎么利用ScrollView实现自动吸附效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。通过使用UGUI的拖拽接口，在拖拽结束时比较当前滑动框的Normalize...

99+

2023-06-20