Unity3d C# UGUI实现一个自动循环滚动的列表（ScrollRect）的功能（含工程源码）

置顶 已于 2022-07-12 14:50:46 修改
阅读量1w 收藏 89
点赞数 21
分类专栏： Unity3D
于 2021-10-17 17:28:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33789001/article/details/120813324
版权

目录

前言

如题的功能在项目中经常用到，滚动的信息内容，我们用scrollbar的value来控制滚动是可以实现的，不过当value为1时，我们从0继续循环会造成有闪烁的情况而且比较突兀，经过一段时间的研究终于实现了该功能。

效果

分别方向的移动

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

实现

自动滚动的思路就是不断的增加某一个方向的偏移值就可以实现，循环滚动时，将最早移出的节点移至滚动队列的最尾端即可，同时计算新的偏移值并同步，让列表看不出抖动，即可实现一直循环滚动，在此过程中将禁用ScrollRect组件，因为ScrollRect组件在节点顺序变化时会造成显示抖动，同时还需根据排序的组件（HorizontalOrVerticalLayoutGroup/GridLayoutGroup）进行间隔的计算。当鼠标悬停时启用ScrollRect组件并暂停滚动，鼠标离开时启用自动滚动并禁用ScrollRect。

搭建UI

如图的搭建一个列表

在这里插入图片描述

定义滚动方向

public enum ScrollDir
{
    BottomToTop = 1,
    TopToBottom = 2,
    LeftToRight = 3,
    RightToLeft = 4
}

定义如上四个方向方便选择设置和分开处理。

初始化数值

        scrollrect = gameObject.GetComponent<ScrollRect>();
        scrolltran = scrollrect.GetComponent<RectTransform>();
        LayoutGroup = scrollrect.content.GetComponent<HorizontalOrVerticalLayoutGroup>();
        GridGroup = scrollrect.content.GetComponent<GridLayoutGroup>();

        et = gameObject.GetComponent<EventTrigger>();
        if (et == null)
            et = gameObject.AddComponent<EventTrigger>();

        //设置滚动间隔
        if (LayoutGroup != null)
            Space = LayoutGroup.spacing;
        else if (GridGroup != null)
        {
            switch (AutoScrollDir)
            {
                case ScrollDir.BottomToTop://由底至顶滚动  向上
                case ScrollDir.TopToBottom://由顶至底滚动  向下
                    Space = GridGroup.spacing.y;
                    break;
                case ScrollDir.LeftToRight://由左至右滚动 →
                case ScrollDir.RightToLeft://由右至左滚动 ←
                    Space = GridGroup.spacing.x;
                    break;
                default:
                    Space = 0;
                    break;
            }

        }

        //设置子节点高度和宽度
        if (LayoutGroup != null && scrollrect.content.childCount > 0)
        {
            ItemWidth = scrollrect.content.GetChild(0).GetComponent<RectTransform>().sizeDelta.x;
            ItemHeight = scrollrect.content.GetChild(0).GetComponent<RectTransform>().sizeDelta.y;
        }
        else if (GridGroup != null)
        {
            ItemWidth = GridGroup.cellSize.x;
            ItemHeight = GridGroup.cellSize.y;
        }
        AddETEvent(et, EventTriggerType.PointerEnter, OnPointerIn);
        AddETEvent(et, EventTriggerType.PointerExit, OnPointerOut);

如上代码初始化时候，主要寻找相关组件，排序组件和滚动组件等，同时根据不同组件获取间隔数值，还有排序对象的高宽度，以及事件绑定。这里通过添加EventTrigger组件，并绑定PointerEnter 和 PointerExit来实现鼠标悬停和退出功能。

界面的配置如图：

在这里插入图片描述

自动滚动

 //开始自动滑动
    void DoAutoScroll()
    {
        switch (AutoScrollDir)
        {
            //由底至顶滚动  向上
            case ScrollDir.BottomToTop:
                {
                    if (scrollrect.content.sizeDelta.y > scrolltran.sizeDelta.y + (ItemHeight + Space))
                    {
                        scrollrect.content.anchoredPosition3D += new Vector3(0, step, 0);
                        if (scrollrect.content.anchoredPosition3D.y >= (scrollrect.content.sizeDelta.y - scrolltran.sizeDelta.y) / 2)
                        {
                            if (GridGroup != null && GridGroup.constraintCount > 1)
                            {
                                for (int i = 0; i < GridGroup.constraintCount; i++)
                                    scrollrect.content.GetChild(0).transform.SetAsLastSibling();
                                scrollrect.content.anchoredPosition3D -= new Vector3(0, (ItemHeight + Space), 0);
                            }
                            else
                            {
                                scrollrect.content.GetChild(0).transform.SetAsLastSibling();
                                scrollrect.content.anchoredPosition3D -= new Vector3(0, (ItemHeight + Space), 0);
                            }
                        }
                    }
                }
                break;
            //由顶至底滚动  向下
            case ScrollDir.TopToBottom:
                {
                    if (scrollrect.content.sizeDelta.y > scrolltran.sizeDelta.y + (ItemHeight + Space))
                    {
                        scrollrect.content.anchoredPosition3D -= new Vector3(0, step, 0);
                        if (scrollrect.content.anchoredPosition3D.y <= (scrollrect.content.sizeDelta.y - scrolltran.sizeDelta.y) / 2)
                        {
                            if (GridGroup != null && GridGroup.constraintCount > 1)
                            {
                                for (int i = 0; i < GridGroup.constraintCount; i++)
                                    scrollrect.content.GetChild(scrollrect.content.childCount - 1).transform.SetAsFirstSibling();
                                scrollrect.content.anchoredPosition3D += new Vector3(0, (ItemHeight + Space), 0);
                            }
                            else
                            {
                                scrollrect.content.GetChild(scrollrect.content.childCount - 1).transform.SetAsFirstSibling();
                                scrollrect.content.anchoredPosition3D += new Vector3(0, (ItemHeight + Space), 0);
                            }
                        }
                    }
                }
                break;

            //由左至右滚动 →
            case ScrollDir.LeftToRight:
                {
                    if (scrollrect.content.sizeDelta.x > scrolltran.sizeDelta.x + (ItemWidth + Space))
                    {
                        scrollrect.content.anchoredPosition3D += new Vector3(step, 0, 0);
                        if (scrollrect.content.anchoredPosition3D.x >= -(scrollrect.content.sizeDelta.x - scrolltran.sizeDelta.x) / 2)
                        {
                            if (GridGroup != null && GridGroup.constraintCount > 1)
                            {
                                for (int i = 0; i < GridGroup.constraintCount; i++)
                                    scrollrect.content.GetChild(scrollrect.content.childCount - 1).transform.SetAsFirstSibling();
                                scrollrect.content.anchoredPosition3D -= new Vector3((ItemWidth + Space), 0, 0);
                            }
                            else
                            {
                                scrollrect.content.GetChild(scrollrect.content.childCount - 1).transform.SetAsFirstSibling();
                                scrollrect.content.anchoredPosition3D -= new Vector3((ItemWidth + Space), 0, 0);
                            }
                        }
                    }
                }
                break;
            //由右至左滚动 ←
            case ScrollDir.RightToLeft:
                {
                    if (scrollrect.content.sizeDelta.x > scrolltran.sizeDelta.x + (ItemWidth + Space))
                    {
                        scrollrect.content.anchoredPosition3D -= new Vector3(step, 0, 0);
                        if (scrollrect.content.anchoredPosition3D.x <= -(scrollrect.content.sizeDelta.x - scrolltran.sizeDelta.x) / 2)
                        {
                            if (GridGroup != null && GridGroup.constraintCount > 1)
                            {
                                for (int i = 0; i < GridGroup.constraintCount; i++)
                                    scrollrect.content.GetChild(0).transform.SetAsLastSibling();
                                scrollrect.content.anchoredPosition3D += new Vector3((ItemWidth + Space), 0, 0);
                            }
                            else
                            {
                                scrollrect.content.GetChild(0).transform.SetAsLastSibling();
                                scrollrect.content.anchoredPosition3D += new Vector3((ItemWidth + Space), 0, 0);
                            }
                        }
                    }
                }
                break;
            default:
                break;
        }
    }

这一段就是核心的代码，分别处理了四个方向滚动的过程，大致思路如前面提到的。主要还是Content具备自动滚动的条件：Content的高或者宽超过了视窗+1倍高宽和间隔的长度。开始自动滚动。
移动首个移出节点至队尾的条件：移动的位置已经超过一半。

其中的还有些GridLayoutGroup组件的处理，因为移动节点可能需要同时移动一排 或者一列，具体看脚本。有些特定的设置后面会进行说明。

工程源码

https://download.csdn.net/download/qq_33789001/33215369
如果打不开就是还没审核，最近审核很慢。

注意

这里特别注意的滚动页面的设置，我为了简便快速实现，这里就分成了横竖两个方向的设置做了固定适配。

横向

即从左到右或者从右到左的情况。Content如下设置：
在这里插入图片描述

竖向

即从上到下或者从下到上，Content：
在这里插入图片描述

如果不这样设置可能会有异常。

GridLayoutGroup的StartCorner设置也得是类似的设置，并且多行或者多列时需要固定值：

在这里插入图片描述

这个在移动节点时需要用到，不设置可能异常。也可尝试手动修改代码适配。

十幺卜入
关注
  • 21
    点赞
  • 踩
  • 89
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
c# ui 滚动 分页_UI备忘单：分页，无限滚动和“加载更多”按钮
weixin_26732881的博客
08-04 1170
c# ui 滚动 分页 重点 (Top highlight)When you have a lot of content, you have to rely on one of these three patterns to load it. So, which is best? What will your users like? What do most platforms use? Thes...
UGUI ScrollRect滚动优化：无限循环利用Item
08-17
参考NGUI ScrollView的例子写的一个UGUI下的循环利用滚动框。 好几年前的了，因为Unity版本可能有些报错 稍作修改就行。
Unity3d C#实现UGUI ScrollRect的轮播图效果
最新发布
07-02
建议先看说明：https://blog.csdn.net/qq_33789001/article/details/140130682 轮播功能是一种常见的页面组件，用于在页面中显示多张图片/素材并自动或手动进行切换，以提高页面的美观度和用户体验。主要的功能是：自动/手动切换;平滑的切换效果;导航指示器等。可惜Unity的UGUI系统里没有现成的实现该功能，所以这里直接基于ScrollRect来实现该组件功能。在上述功能上新增了无限轮播、鼠标悬停暂停轮播、鼠标拖拽轮播、竖向轮播等功能。实现的思路是基于UGUI的ScrollRect组件用于滑动效果，而其中的HorizontalLayoutGroup或者VerticalLayoutGroup对Content的内容进行排序，平滑的切换效果是使用移动的动画效果（插件DOTweenPro），其余的核心就是轮播的时候对Content的位置进行计算和移动。以下是部分实现的过程。工程基于Unity3d 2020.3.28f1c1版本实现。这里鼠标滑动的操作依托于ScrollRect组件，而鼠标进入取消轮播，鼠标移出恢复轮播。。
UGUI Scrollrect滚动优化：无限循环利用
06-23
我的其他资源都是免费的，对于初学游戏者的帮助比较大的，其中有单片机，ARM，数据结构，window编程，MFC编程，cocos2dx，unity3d自己编写的小游戏。
Unity UGUI实现无限滚动列表
Zyt
05-27 418
在游戏开发中，列表视图是一个常见的UI组件。实现一个高效的列表视图尤其重要，尤其是在需要展示大量数据时。本文将介绍如何在Unity中实现一个高效的无限滚动列表，包括两个关键脚本：InfiniteScroll 和 ListItem 两个脚本 话不多说直接上代码。Unity版本2022.3.X。
Unity无限循环滚动列表Demo
03-25
UGUI无限循环滚动列表
unity 无限循环列表
04-09
在网上看到的一位高手写的，用于项目中还不错，推荐使用
Unity3d C# UGUI实现自动循环滚动的列表（ScrollRect）的功能源码
10-17
Unity3d C# UGUI实现自动循环滚动的列表（ScrollRect）的功能源码 建议看说明：https://blog.csdn.net/qq_33789001/article/details/120813324
unity列表，水平，垂直，循环滚动列表
杨绵的博客
02-24 4018
一、创建垂直滑动列表 在canvas下创建Scroll View，取消勾选 Scroll View 的 Horizontal 属性，并删除Scroll View子物体 Scrollbar Horizontal(只创建垂直滑动列表) 给Content添加 Veritical Layout Group和Content Size Fitter组件 将列表中需要显示的物体添加到Content中 批量生成滑动列表的内容 二、创建水平滑动列表 三、创建自动循环滚动列表 ...
Unity无限滚动列表
weixin_52028933的博客
09-07 1383
怎么制作一个无限滚动列表，首先说到滚动列表我会先想到使用ScrollView来实现，但在进行限制“弹性的”模式下每次更换列表最上或者最下面数据的位置时整个列表会出现闪屏的效果。效果图一.首先完成UI方面的搭建创建一个Image组件，并且添加遮罩Mask设定要显示的区域（后面记得把显示遮罩图形取消勾选），将要实现滚动效果的组件放置在这个问题的子物体中（当然也可以等一下直接实例化生成）
前端实现无限循环滚动三种方式（react hooks示例）：js || css || 插件
希望我快乐
05-07 9182
滚动数据根据需要改为图片或html元素，或者从接口读取数据组装元素 横向滚动，修改容器宽高，将 scrollTop 改为 scrollLeft 渲染数据变化时，或者在模态框作渲染等依据一些外在条件变化需要重新渲染时，必须清除所有定时器 封装组件使用，需考虑：依赖项，滚动方向，速率，每条数据渲染形式 import { useState, useEffect, useRef } from 'react' // 定时器 let intervalTimer, timeoutTimer const Index.
Unity 滑动列表ScrollRect制作
weixin_30471065的博客
07-04 668
好久没有写博客了，最近两年在做游戏后端开发，从事游戏的同学都有体会：不是在加班就是在加班的路上。也很少逛博客了，大部分时间活跃在Github上。最近公司后端比较闲散正好前端缺人，是时候转前端了。哈哈哈... 转前端主要有几个原因： 一、前端的游戏引擎发张的太快了，越来越炫。 二、打上家公司老大的脸(说前端UI非常难搭)，以前后端大部分功能比前端提前1...
Unity3d C# 基于UGUI实现类似WX聊天气泡功能工程源码
03-07
本项目源码主要展示了如何利用C#编程语言和UGUI来实现一个类似微信（WX）聊天中的气泡功能，这在许多社交类或消息传递类游戏中非常常见。 首先，我们需要了解UGUI的基本组件。UGUI主要包括Canvas、Panel、Text、...
Unity3d C# UGUI制作内置键盘带输入功能工程源码
07-27
本工程源码就是关于如何使用C#和UGUI来实现这样一个内置软键盘的实例。 首先，我们来看Unity3d中的UGUI系统。UGUI是在Unity 4.6版本引入的新特性，它提供了一套完整的UI构建工具，包括各种UI控件（如Text、Button、...
Unity3d C#实现UGUI的界面可拖拽移动和选中置顶工程源码
08-03
总之，这个"Unity3d C#实现UGUI的界面可拖拽移动和选中置顶工程源码"提供了一个实用的模板，帮助开发者快速实现具有交互性的UI元素，增强用户在游戏或应用中的沉浸感。通过学习和理解这段代码，你可以进一步提升自己...
[UI列表]LoopScrollRect无限滑动不卡顿
weixin_34088583的博客
12-03 490
应用场景 对于背包界面，排行榜列表，聊天消息，等有大量的UI列表的界面，常规做法是为每一条数据生成一个格子，在数据量越大的情况下，会生成越来越多的Gameobject，引起卡顿。 这篇文章讲述的就是解决UI列表卡顿的方法，在列表中只生成指定数量的Gameobject，滑动时进行数据更新，保证性能。 LoopScrollRect(无限滑动不卡顿) 插件地址：https://github.com/q...
ListView实现无限自动滚动效果
lixuce1234的博客
04-17 3451
public class MainActivity extends Activity implements OnClickListener{ private Button btn_up,btn_down,btn_stop; private ListView listview; private Adapter adapter; @Override public
ios之实现自动无限循环滚动视图(1)
u013712343的博客
05-26 2060
ios之实现自动无限循环滚动视图（1） 前言 效果展示 功能 分析 全部代码 前言 ios实现无限循环滚动主要有两种办法，都利用了UIScrollView，第一种是创建一个很大的UIScrollView（(n+2)*屏幕宽度），把要展示的图片都添加到这个视图上，通过对偏移值的更改达到循环的效果；第二种是创建一个三倍屏幕大小的UIScrollView，只使用三张图片，通过不断更新图片来达到循环的效果。 这两天把这两种方法都写了一次，今天只讲第一种。 效果展示 功能 实现用户左右滑动时可以无限循环滚
Unity Scroll View自动滚动
XueZhiXia_的博客
10-02 870
（默认值）时，当用户在滚动内容后释放鼠标或手指时，内容会继续根据之前的速度滚动一段时间，并逐渐减速直到停止。因为鼠标不操作的情况下，会设置滚动视图的速度一直为0，这样就没办法进行自动滚动。正常情况下，鼠标点击或者拖动会使其开始滚动，也就是等于调节了ScrollView上ScrollRect组件的速度值。Inertia一定要勾选上，并且DecelerationRate必须是一个大于0的值，在这里默认值就行。如果想禁止鼠标拖拽，可以简单的关闭画布上的图形射线投射组件，这样鼠标不会对ui进行检测。
unity3d 的ugui如何实现一个item列表？
05-24
实现一个item列表可以通过 Unity3D 中的UGUI组件来完成，以下是一个简单的实现步骤： 1. 创建一个ScrollView对象，它会成为你的item列表的容器。 2. 在ScrollView对象下创建一个Content对象，用于放置所有的item。 3. 创建一个item的Prefab，包含你需要显示的元素。 4. 在运行时，动态生成多个item对象，将它们放置在Content对象下，以此来构建item列表。 5. 根据需要，可以对item列表进行滚动、添加或删除item等操作。 具体实现可以参考以下步骤： 1. 创建ScrollView和Content对象 在场景中创建一个空对象，命名为ScrollView。将Canvas组件的Render Mode设置为Screen Space - Overlay，然后将ScrollView对象的RectTransform组件的Anchors和Pivot都设置为(0, 0)。这样，ScrollView对象的左下角就会位于屏幕左下角。在ScrollView对象下创建一个空对象，命名为Content。将Content对象的RectTransform组件的Anchors和Pivot也都设置为(0, 0)，以便于它能够与ScrollView对象的位置重合。 2. 创建item的Prefab 在项目资源中创建一个新的Prefab，将你需要显示的元素放入其中。例如，可以在Prefab中添加一个Text对象，用于显示item的标题。确保这个Prefab的RectTransform组件的Anchors和Pivot都设置为(0, 0)，以便于在生成item时它们能够正确地布局。 3. 动态生成item对象 在脚本中，使用Instantiate()方法动态生成多个item对象，并将它们作为Content对象的子对象。例如： ```csharp public GameObject itemPrefab; public int itemCount = 20; void Start() { for (int i = 0; i < itemCount; i++) { GameObject item = Instantiate(itemPrefab, content.transform); // 设置item的位置和大小 item.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, -i * item.GetComponent<RectTransform>().rect.height); } } ``` 这段代码会生成20个item对象，将它们放置在Content对象下，并设置它们的位置和大小。这里假设item的高度是固定的。 4. 对item列表进行滚动 为了让item列表能够滚动，需要将ScrollView对象下的Scrollbar组件与Content对象的RectTransform组件相绑定。在ScrollView对象下添加一个Scrollbar组件，将它的Direction设置为Vertical，并将它的Size设置为0.2（或根据需要调整）。然后将Scrollbar组件的Value属性绑定到Content对象的RectTransform组件的anchoredPosition.y属性上。这样，当拖动Scrollbar时，Content对象就会相应地向上或向下滚动。 5. 添加或删除item 如果需要动态地添加或删除item，可以在脚本中使用Instantiate()和Destroy()方法来完成。例如： ```csharp public void AddItem() { GameObject item = Instantiate(itemPrefab, content.transform); // 设置新的item的位置和大小 item.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, -itemCount * item.GetComponent<RectTransform>().rect.height); itemCount++; } public void RemoveItem() { if (itemCount > 0) { Destroy(content.transform.GetChild(itemCount - 1).gameObject); itemCount--; } } ``` 这样，就可以在运行时动态地添加或删除item了。当添加一个新的item时，只需生成一个新的GameObject，并将它放置在Content对象下；当删除一个item时，只需销毁Content对象下的最后一个子对象即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十幺卜入

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值