unity UGUI无限循环滚动居中

已于 2025-04-02 11:41:15 修改
阅读量1.2k 收藏 9
点赞数 4
文章标签： unity 游戏引擎 c#
于 2023-11-15 16:06:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43687127/article/details/134422042
版权

最近在做一个ui循环滚动的功能，网上找了半天脚本感觉都和我实际需求不太符合，自己花费一些时间完成了这个功能记录一下。下面开始正题
我是采用unity自带组件Scroll View来完成，首先设置Scroll View如下图
首先是竖形循环
这个是
在这里插入图片描述
把这两个必备物体放进去，中心点创建一个空物体即可
在这里插入图片描述
这个地方按照顺序添加item 就可以

在这里插入图片描述

如何是横向的循环列表只需要修改脚本的枚举类即可 其他设置一样，如下图

在这里插入图片描述

然后开始编写代码，我就直接贴了，不懂可以看一下注释。

using DG.Tweening;
using QFramework;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public enum HVType
{
    Vertical,
    Horizontal
}
public class LoopScroll : MonoBehaviour, IBeginDragHandler, IEndDragHandler, IDragHandler
{
    public HVType tempHVType;

    Vector2 StartPos;
    [Header("中心点")]
    public Transform Centre;
    [Header("UI父级")]
    public Transform Content;
    [Header("间隔距离")]
    public float SpacingDistance = 100;
    [Header("缩放倍数")]
    public float Scale = 1;
    [Header("居中吸附速度")]
    public float Speed = 10;
    [Header("当前居中物体名称")]
    public Text tempCentreName;
    [Header("左右切换按钮")]
    public Button Left, Right;
    [Header("居中后UI缩放系数")]
    public Vector3 CentreScale = Vector3.one * 1.5f;
    public List<Transform> itemList;
    Transform tempCentre;//当前居中物体
    bool isDrag = false, isAdsorption, isScale, isLRBtn;//拖拽更换当前索引，控制吸附居中,控制缩放，控制左右按钮
    float MaxDis, MinDis;//最大最小距离
    private Vector3 startPos, endPos, BtnPos;//左边限制位置，右边限制位置 

    float itemDis;
    private void Awake() { }
    void Start()
    {
        ApplyEqualSpacing();//根据默认第一个位置根据设置刷新一遍坐标

        isScale = true;
        isAdsorption = true;
        tempCentre = itemList[0];
        if (tempCentreName) { tempCentreName.text = tempCentre.name; }
     
        if (tempHVType == HVType.Horizontal)
        {
            startPos = itemList[0].position;
            startPos.x -= itemList[0].GetComponent<RectTransform>().rect.width;

            endPos = itemList[itemList.Count - 1].position;
            endPos.x += itemList[itemList.Count - 1].GetComponent<RectTransform>().rect.width;
        }
        else
        {
            startPos = itemList[0].position;
            startPos.y += itemList[0].GetComponent<RectTransform>().rect.height;
         
            endPos = itemList[itemList.Count - 1].position;
            endPos.y -= itemList[itemList.Count - 1].GetComponent<RectTransform>().rect.height;
        }
  

        //设置第一个坐标与最后一个坐标位置  
        //求出最远距离
        MinDis = Vector3.Distance(itemList[0].position, Centre.position);
        for (int i = 0; i < itemList.Count; i++)
        {
            var dis = Vector3.Distance(itemList[i].position, Centre.position);
            if (dis > MaxDis)
            {
                MaxDis = dis;

            }
            else if (dis < MinDis) { MinDis = dis; }

        }
        if (Left)
        {
            Left.onClick.AddListener(LBtn);
            Right.onClick.AddListener(RBtn);
        }

        isDrag = true;


    }
    float current = 0, current2;//当前最后一位的坐标
    void ApplyEqualSpacing()
    {
        // 计算总宽度
        float totalWidth = 0f;
        foreach (RectTransform element in itemList)
        {
            if (tempHVType == HVType.Horizontal)
                totalWidth += element.sizeDelta.x;
            else
            {
                totalWidth += element.sizeDelta.y;
            }
        }
        // 计算间隔的总宽度
        float totalSpacing = (itemList.Count - 1) * SpacingDistance;
        // 计算每个元素的平均宽度
        float averageWidth = (totalWidth + totalSpacing) / itemList.Count;
        // 设置每个元素的位置
        if (tempHVType == HVType.Horizontal)
        {
            current = itemList[0].GetComponent<RectTransform>().anchoredPosition.x;
            current2 = itemList[0].GetComponent<RectTransform>().anchoredPosition.x;
        }

        else
        {
            current = itemList[0].GetComponent<RectTransform>().anchoredPosition.y;
            current2 = itemList[0].GetComponent<RectTransform>().anchoredPosition.y;
        }
        for (int i = 0; i < itemList.Count; i++)
        {
            RectTransform element = itemList[i].GetComponent<RectTransform>();
            if (tempHVType == HVType.Horizontal)
            {
                float elementWidth = element.sizeDelta.x;
                // 设置元素的位置
                element.anchoredPosition = new Vector2(current + elementWidth / 2f, element.anchoredPosition.y);
                // 更新下一个元素的X坐标
                current += elementWidth + SpacingDistance;
            }
            else
            {
                float elementWidth = element.sizeDelta.y;
                // 设置元素的位置
                element.anchoredPosition = new Vector2(element.anchoredPosition.x, current + elementWidth / 2f);
                // 更新下一个元素的X坐标
                current -= elementWidth + SpacingDistance;
            }
        }
        
    }
    void Islimit() //设置坐标切换与列表内元素与面板层级切换 保证层级与列表内数据同步
    {
        if (isDrag)
        {
        
            for (int i = 0; i < itemList.Count; i++)
            {
                var currentItem = itemList[i];

                if (tempHVType == HVType.Horizontal)
                {
                    var elementWidth = currentItem.GetComponent<RectTransform>().sizeDelta.x;
                    if (currentItem.position.x < startPos.x)
                    {
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3(current + elementWidth / 2, 0, 0);
                        current += elementWidth + SpacingDistance;
                        current2 += SpacingDistance + elementWidth;
                    }
                    else
                   if (currentItem.position.x > endPos.x)
                    {
                        current2 -= SpacingDistance + elementWidth;
                        current -= elementWidth + SpacingDistance;
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3((current2 + elementWidth / 2), 0, 0);
                    }
                }
                else
                {
                    var elementWidth = currentItem.GetComponent<RectTransform>().sizeDelta.y;

                    if (currentItem.position.y > startPos.y)//向下托 当前坐标比初始坐标高
                    {

                
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3(currentItem.GetComponent<RectTransform>().anchoredPosition.x, (current + elementWidth / 2), 0);

                        current -= elementWidth + SpacingDistance;
                        current2 -= SpacingDistance + elementWidth;
                    }
                    else
                    if (currentItem.position.y < endPos.y)//向下托 当前坐标比终点坐标高
                    {
                        current2 += SpacingDistance + elementWidth;
                        current += elementWidth + SpacingDistance;
                        currentItem.GetComponent<RectTransform>().anchoredPosition = new Vector3(currentItem.GetComponent<RectTransform>().anchoredPosition.x, (current2 + elementWidth / 2), 0);
                    }
                }
            }
        }
    }
    void ScaleDistance()//根据百分比设置缩放动画
    {
        if (isScale)
        {
            if (tempCentre)
            {
                for (int i = 0; i < itemList.Count; i++)
                {
                    if (tempCentre == itemList[i])
                    {
                        var scale = Vector3.Lerp(itemList[i].localScale, CentreScale, Speed * Time.deltaTime);
                        tempCentre.localScale = scale;
                        if (Vector3.Distance(tempCentre.localScale, CentreScale) < 0.01f)
                        {
                            isLRBtn = false;
                            isScale = false;
                        }
                    }
                    else
                    {
                        var scale = Vector3.Lerp(itemList[i].localScale, Vector3.one, Speed * Time.deltaTime);
                        itemList[i].localScale = scale;
                    }
                }
            }
        }
    }
    void Adsorption() //停止滑动进行吸附
    {
        if (isAdsorption)
        {
            if (tempCentre)
            {
                var dis = Centre.position - tempCentre.position;
                if (tempHVType == HVType.Horizontal)
                {
                    var pos = Vector3.Lerp(Content.position, new Vector3(Content.position.x + dis.x,
                  Content.position.y, Content.position.z), Speed * Time.deltaTime);
                    Content.position = pos;
                    if (Vector3.Distance(new Vector3(Content.position.x + dis.x,
                        Content.position.y, Content.position.z), Content.position) < 0.01f)
                    {
                        isAdsorption = false;
                    }
                }
                else
                {
                    var pos = Vector3.Lerp(Content.position, new Vector3(Content.position.x,
                    Content.position.y + dis.y, Content.position.z), Speed * Time.deltaTime);

                    Content.position = pos;

                    if (Vector3.Distance(new Vector3(Content.position.x,
                        Content.position.y + dis.y, Content.position.z), Content.position) < 0.01f)
                    {
                        isAdsorption = false;
                    }
                }
            }
        }
    }
    public void LBtn()
    {
        if (!isLRBtn)
        {

            if (tempHVType == HVType.Horizontal)
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.width + SpacingDistance;
                BtnPos = new Vector3(Content.position.x + itemDis,
                Content.position.y, Content.position.z);
            }
            else
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.height + SpacingDistance;
                BtnPos = new Vector3(Content.position.x,
                Content.position.y + itemDis, Content.position.z);
            }
            Content.DOMove(BtnPos, 0.5f).OnComplete(() =>
            {
                isDrag = true;
                FindMinDis();
                isAdsorption = true;
                isScale = true;
            });
            isLRBtn = true;
        }
    }
    public void RBtn()
    {
        if (!isLRBtn)
        {

            if (tempHVType == HVType.Horizontal)
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.width + SpacingDistance;
                BtnPos = new Vector3(Content.position.x - itemDis,
                Content.position.y, Content.position.z);
            }
            else
            {
                itemDis = tempCentre.GetComponent<RectTransform>().rect.height + SpacingDistance;
                BtnPos = new Vector3(Content.position.x,
                Content.position.y - itemDis, Content.position.z);
            }
            Content.DOMove(BtnPos, 0.5f).OnComplete(() =>
            {
                isDrag = true;
                FindMinDis();
                isAdsorption = true;
                isScale = true;
            });
            isLRBtn = true;
        }
    }
    void FindMinDis() //找出距离中心点最近的  
    {
        for (int i = 0; i < itemList.Count; i++)
        {
            float dis = Vector3.Distance(itemList[i].position, Centre.position);
            if (dis < MinDis)
            {
                tempCentre = itemList[i];
                if (tempCentreName)
                {
                    tempCentreName.text = itemList[i].name;
                }

                MinDis = dis;
            }
        }
        MinDis = 1000;
    }
    void Update()
    {
        Islimit();
      
        Adsorption();

       ScaleDistance();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {

        StartPos = eventData.position;
        isAdsorption = false;
        isScale = false;

    }

    public void OnEndDrag(PointerEventData eventData)
    {


        transform.GetComponent<ScrollRect>().velocity = Vector3.one * 0.5f;
        FindMinDis();
        isAdsorption = true;
        isScale = true;
        isDrag = false;

    }
    public void OnDrag(PointerEventData eventData)
    {
        isDrag = true;
    }
}

最后说下使用了Dotween插件，完成上面的设置就可以畅快玩耍了~~

临客GG
关注
Unity 实现UGUI的ScrollView无限滚动
sNameNo的博客
07-13 884
Unity实现UGUI 滑动条的无限滚动
UGUI ScrollRect滚动优化：无限循环利用Item
08-17
参考NGUI ScrollView的例子写的一个UGUI下的循环利用滚动框。 好几年前的了，因为Unity版本可能有些报错 稍作修改就行。
UGUI实现ScrollView无限滚动效果
01-01
抽空做了一个UGUI的无限滚动的效果。只做了一半（向下无限滚动）。网上也看了很多教程，感觉还是按照自己的思路来写可能比较好。搭建如下： content节点不添加任何组件。布局组件默认是会重新排版子节点的，所以如果子节点的位置变化，会重新排版，不能达到效果。Size Fitter组件也不加，自己写代码调整Size大小（不调整大小，无法滑动）。 最主要的实现过程就是用Queue来搬运Cell。在向下滚动的过程中（鼠标上滑），顶部滑出View Port的Cell被搬运到底部续上。这点类似于Queue的先见先出原则，再把Dequeue出来的元素添加到末尾，就很类似于ScrollView的无限滚动的原
Unity UGUI滚动视图无限滚动
05-17
Unity UGUI滚动视图无限滚动，内容很实用，稍加修改就可以适用于自己的需求。
Unity-无限滚动列表实现&&Timer时间管理实现
最新发布
lastXuanGod的博客
04-23 976
然后在我们的update里，我们会把准备加入数组的计时器加入数组并清空另一个数组，然后对数组中每一个计时器执行Update函数（前文已定义），最后我们批量删除满足IsDone的计时器。第三个函数计算两次更新之间的时间间隔。渲染函数中，我们先移除头部尾部元素，之后如果链表的长度为0则一口气填充所有可视区域，否则我们就填充滑动离开列表的空缺，对于已经离开列表的元素我们进行清除。GetIndex函数的作用是根据具体的坐标得到具体的序号，RoundToInt的用法就是一个基于四舍五入的将浮点数转换成整数的方法。
unity 无限循环按钮 Scroll View
08-17
unity 基于Scroll View组件，可以无限上下滑动，无限模式包含了横 竖两种滑动方式，都可随意滑动
Unity UGUI实现无限滚动列表
Zyt
05-27 1812
在游戏开发中，列表视图是一个常见的UI组件。实现一个高效的列表视图尤其重要，尤其是在需要展示大量数据时。本文将介绍如何在Unity中实现一个高效的无限滚动列表，包括两个关键脚本：InfiniteScroll 和 ListItem 两个脚本 话不多说直接上代码。Unity版本2022.3.X。
通过Scroll View实现简易背包的滑动效果
tzm95_007的博客
12-03 722
背包系统：首先,我们先导入NGUI组件,创建一个跟目录(UIRoot)点击工具栏上的NGUI →Create→Scroll View; 这时,在Hierarchy面板中会看到生成了一个Scroll View;然后选中Scroll View物体，点击NGUI→Create→Gird在Gird中添加你需要实现滚动的物体，（最好添加两个或以上才可以看出效果）然后给添加好的物体添加Box Collider...
win桌面圣诞小插件分享
向宇
12-27 642
圣诞到了，最近有小伙伴问我有没有一些桌面圣诞小插件可以分享一下，所以我就特地去寻找了一些，感觉效果还不错，所以分享出来。
unity 实现数据驱动的无限滚动视图
cghvvhv的博客
03-27 2388
既然可展示的数据只有ScrollView 的Viewport那么大,那么就可以只生成并显示 Viewport覆盖的所有的列表项就可以.列表数据注入的时候根据数据规模调整 content的 size,使其尺寸可以容纳所有的列表项,并计算可视范围可以容纳多少个列表项,生成可视的所有列表项多一行的列表项.显示层的东西都是从原列表项中读取出来的,并且没有对原数据列表隔壁那个改.所以增删改等操作只需要改动原列表数据,然后调用刷新,视图就会自动刷新.创建用于承载显示数据的数据类,定义需要展示的所有数据,以及点击回调。
Unity无限滚动列表(自动分页和网络请求) ScrollView
06-04
1.项目中应用组件，分享出来 2.支持横向和竖向无限滑动，基于ScrollView扩展 3.滑动时，自动计算分页，通过回调自动获取调用获取分页数据 4.使用简单，组件代码注释详细 5.例子简单明了
Unity-ScrollView无限循环
司军礼的博客
06-18 3156
Unity-ScrollView无限循环 在Unity引擎中ScrollView组件是一个使用率比较高的组件，该组件能上下或者左右拖动的UI列表，背包、展示多个按钮等情况的时候会用到,在做排行榜类似界面时，item非常多，可能有几百个，一次创建这么多GameObject是非常卡的。为此，使用只创建可视区一共显示的个数，加上后置准备个数。 由于ScrollView有两种滚动方式，水平滚动或者垂直滚动，所以我创建了ScrollBase基类，和HorizontalScroll子类及VerticalScroll
UGUI 无限滑动
05-27
在之前的NGUI无限滑动的基础上实现了UGUI版本，也有优化了频繁刷新的问题
UGUI Scrollrect滚动优化：无限循环利用
06-23
我的其他资源都是免费的，对于初学游戏者的帮助比较大的，其中有单片机，ARM，数据结构，window编程，MFC编程，cocos2dx，unity3d自己编写的小游戏。
【ugui】条目配合Scroll View实现无限滚动
04-21
该代码本人用于数据可视化展示，代码里默认的是自动滚动的效果，可以调成鼠标滑动实现上划和下划。不会使用的话私信。
UGUI循环滚动+滑动居中
07-18
支持横向纵向循环滚动和滑动居中，支持任意锚点布局（没有锚点限制），3种居中效果（不回弹，回弹，双向回弹）Grid（布局）不依赖任何脚本可以单独使用，不锁定子物体随意排序。WrapCententy（循环+居中）
unity Scroll View无限循环滚动 重复利用Item 动态加载资源
04-07
可以轻松实现ScrollVIew列表的无线循环、列表循环、列表物体带动画、自动停靠等功能 修改参数和动画就可以实现自己想要的效果。 一个可以实现复杂灵活动画效果的通用UI滑动列表组件，可以帮助开发者快速实现表现力...
unity Scroll 滑动 缩放
08-14
首先，Scroll Rect组件是Unity UGUI中的一个核心组件，用于创建可滚动的视图区域。它允许用户通过触摸或鼠标操作在有限的屏幕空间内查看超出边界的内容。通常，Scroll Rect会与Canvas Group和Content（通常是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值