【Unity 实用工具篇】 | UGUI 循环列表 SuperScrollView,快速上手使用

ops/2024/10/30 11:25:30/

请添加图片描述

      • 前言
  • 【Unity 实用工具篇】 | UGUI 循环列表 SuperScrollView,快速上手使用
    • 一、UGUI ScrollRect拓展插件:SuperScrollView
      • 1.1 介绍
      • 1.2 效果展示
      • 1.3 使用说明及下载
    • 二、SuperScrollView 快速上手使用
      • 2.1 LoopListView2
      • 2.2 LoopGridView
      • 2.3 LoopStaggeredGridView
    • 三、其他案例
      • 3.1 滚动时大小变化
      • 3.2 多个不同类型子对象
  • 总结

请添加图片描述


前言

  • 本文介绍一个UGUI关于ScrollRect的一个拓展插件:SuperScrollView
  • 做项目的过程中,ScrollRect组件 的使用频率还是挺高的,尤其是在做类似背包这种需要大量子对象的时候。
  • 正常情况下,使用ScrollRect做滑动功能时,如果子对象非常多,在生成时难免会卡顿。
  • 所以就需要一个循环列表,类似对象池的功能,只会加载显示页面中所需要的,而不是一次性全部加载完成。

【Unity 实用工具篇】 | UGUI 循环列表 SuperScrollView,快速上手使用

一、UGUI ScrollRect拓展插件:SuperScrollView

1.1 介绍

UGUI SuperScrollView基于UGUI ScrollRect提供了易于定制的ScrollView。它是一组C#脚本,可以帮助您创建所需的ScrollView。这是非常强大的和高度优化的性能。

在SuperScrollView中主要有三个组件,并实现了三种不一样的循环列表形式:

  • LoopListView2:适用于 横向/纵向 简单排列的列表视图,类似 Vertical Layout Group / Horizontal Layout Group的使用。
  • LoopGridView:适用于网格排列,大小相同的列表视图,类似 GridLayout Group 的使用。
  • LoopStaggeredGridView:适用于网格排列,但大小不相同的列表视图,可以实现列表中错列排序等特殊需求。

下面就来介绍一下这三种循环列表的使用方式,快速上手及使用。

1.2 效果展示

在这里插入图片描述
请添加图片描述

1.3 使用说明及下载

Unity Asset Store下载地址:https://assetstore.unity.com/packages/tools/gui/ugui-super-scrollview-86572
CSDN下载地址:SuperScrollView
白嫖地址:VX搜我名字,回复【素材资源】

使用插件的方式有多种:

  • 将下载好的SuperScrollView资源文件直接放到我们的项目Assets文件夹下即可。
  • 可以通过Unity中的 Window -> Package Manager 中导入,选择添加下载好的插件,或者使用URL直接添加都可以。

二、SuperScrollView 快速上手使用

三种功能的组件在使用时差别不大,只不过各个组件有自己独有的几个参数可以选择,包括添加子对象,初始生成子对象的数量,设置间距、偏移量和排列类型等。
在这里插入图片描述
功能比较简单,可配置的参数与Unity常规的布局组件类似,使用起来很容易上手。

在演示之前先做一个不使用循环列表时的普通示例,在ScrollView下加载1000个对象。

简单搭建一个场景,在ScrollView中添加一个item作为生成的对象。
在这里插入图片描述

Content上面需要挂载对应的布局组件,这里演示挂载一个垂直布局组件。
在这里插入图片描述

Item对象上面挂载一个测试脚本TestItem.cs

using UnityEngine;
using UnityEngine.UI;public class TestItem : MonoBehaviour
{public Image ImgIcon;public Text TxtName;public void SetData(int _index){TxtName.text = $"测试:<color=#F55F55>{_index}</color>";}
}

测试生成1000个对象脚本如下:

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class LoopViewDemo : MonoBehaviour
{public Button button;public Transform testContent;public GameObject testItem;private void Awake(){button.onClick.AddListener(() => {StartTest();});}private void StartTest(){for (int i = 0; i < 1000; i++){GameObject go = GameObject.Instantiate(testItem, testContent);var itemInfo = go.GetComponent<TestItem>();itemInfo.SetData(i);}}
}

在这里插入图片描述

此时运行游戏,点击开始按钮,可以看到1000个对象全部被生成。
在这里插入图片描述

游戏中的表现会出现明显的卡顿现象,对象越多越是如此。而且后面的对象并不会显示到玩家可以操作的视图中,只有不断往下滑动时才会显示,一次性生成白白消耗了性能。

下面看下SuperScrollView的使方法及效果。

2.1 LoopListView2

与前面普通示例一样正常创建一个ScrollView以及对应的item,接着在ScrollView上面挂载LoopListView2脚本,并在LoopListView2上面添加对应的item对象(需要循环生成的游戏对象)。
在这里插入图片描述

item对象需要挂载LoopListViewItem2脚本,如有对应逻辑脚本也可挂载。
在这里插入图片描述

这里有两个点需要注意
1.不需要在Content上面挂载对应的布局组件了,否则会出现错乱的效果。
2.ScrollView组件如果需要保留滑动条,则不能选择Auto Hide And Expand Viewport。
在这里插入图片描述

使用LoopListView2的代码如下:

using SuperScrollView;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class LoopViewDemo : MonoBehaviour
{public Button button;public LoopListView2 LoopListView;private void Awake(){button.onClick.AddListener(() => {StartTest();});//初始化循环列表LoopListView.InitListView(0, refreshListInfo);}private void StartTest(){//刷新循环列表LoopListView.SetListItemCount(1000, true);}private LoopListViewItem2 refreshListInfo(LoopListView2 loopListView, int index){if (index < 0 || index > 1000) return null;LoopListViewItem2 item = loopListView.NewListViewItem("item");LoopTestItem _itemInfo = item.GetComponent<LoopTestItem>();_itemInfo.SetData(index);return item;}
}

运行查看效果:
请添加图片描述

可以看到使用循环列表之后1000个对象并不会全部生成,而是最多生成视图中需要展示的对象数量,在滑动时使用对象池进行重复利用并赋值。

2.2 LoopGridView

LoopGridView与LoopListView2的使用方式基本相同,挂载LoopGridView脚本,添加对应的item并设置大小和间隔。
在这里插入图片描述

同样的需要在item上面添加LoopGridViewItem脚本。

测试效果如下,同时只会生成部分对象,不会全部生成。
在这里插入图片描述

使用LoopGridView的代码如下:

using SuperScrollView;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class LoopViewDemo : MonoBehaviour
{public Button button;public LoopGridView LoopGridView;private void Awake(){button.onClick.AddListener(() => {StartTest();});//初始化循环列表LoopGridView.InitGridView(0, refreshListInfo);}private void StartTest(){//刷新循环列表LoopGridView.SetListItemCount(1000, true);}private LoopGridViewItem refreshListInfo(LoopGridView loopListView, int arg2, int arg3, int arg4){if (arg2 < 0 || arg2 > 1000) return null;LoopGridViewItem item = loopListView.NewListViewItem("item");LoopTestItem _itemInfo = item.GetComponent<LoopTestItem>();_itemInfo.SetData(arg2);return item;}
}

2.3 LoopStaggeredGridView

LoopStaggeredGridView的使用方法与前两个也是基本相同,只不过在脚本中可以设置对象之间的间隔。

在LoopGridView中,每个对象之间的间隔都是相同的,而使用LoopStaggeredGridView时可以自由设置每行/列的间隔大小及行列数,下面看下使用方法。

与前面两种类似,还是一样的脚本挂载方式。
在这里插入图片描述

测试效果如下:
请添加图片描述

使用LoopStaggeredGridView的代码如下:

using SuperScrollView;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class LoopViewDemo : MonoBehaviour
{public Button button;public Button button2;public LoopStaggeredGridView loopStaggeredGridView;private void Awake(){button.onClick.AddListener(() => {StartTest();});button2.onClick.AddListener(() =>{UpdateTest();});GridViewLayoutParam layoutParam = new GridViewLayoutParam() { mColumnOrRowCount = 3, mItemWidthOrHeight = 1, mCustomColumnOrRowOffsetArray = new float[] { 0, 222, 666 } };loopStaggeredGridView.InitListView(0, layoutParam, refreshStaggeredListInfo);}private void StartTest(){//刷新循环列表loopStaggeredGridView.SetListItemCount(1000, true);}private void UpdateTest(){GridViewLayoutParam layoutParam = new GridViewLayoutParam(){ mColumnOrRowCount = 4, mItemWidthOrHeight = 1, mCustomColumnOrRowOffsetArray = new float[] { 0, 444, 666,1111 } };loopStaggeredGridView.ResetGridViewLayoutParam(1000, layoutParam);}private LoopStaggeredGridViewItem refreshStaggeredListInfo(LoopStaggeredGridView loopListView, int index){if (index < 0 || index > 1000) return null;LoopStaggeredGridViewItem item = loopListView.NewListViewItem("item");LoopTestItem _itemInfo = item.GetComponent<LoopTestItem>();_itemInfo.SetData(index);return item;}
}

与前两种不同的是,在刷新列表时需要多传入一个参数GridViewLayoutParam,用于控制行/列数及不同行/列之间的间隔大小。

一般情况下用到这种组件的机会不多,了解相关功能参考下即可。


三、其他案例

SuperScrollView 还提供了很多种不同的展示效果,具体可以在官方案例查看,这里演示几种作为参考。
在这里插入图片描述

在这里插入图片描述

3.1 滚动时大小变化

请添加图片描述

完整代码如下:

using SuperScrollView;
using UnityEngine;public class LoopListViewExample : MonoBehaviour
{[SerializeField] private LoopListView2 m_view = null;private void Start(){m_view.InitListView(100, OnUpdate);}private void LateUpdate(){m_view.UpdateAllShownItemSnapData();int count = m_view.ShownItemCount;for (int i = 0; i < count; ++i){var itemObj = m_view.GetShownItemByIndex(i);var itemUI = itemObj.GetComponent<LoopTestItem>();var amount = 1 - Mathf.Abs(itemObj.DistanceWithViewPortSnapCenter) / 720f;var scale = Mathf.Clamp(amount, 0.4f, 1);itemUI.SetScale(scale);}}private LoopListViewItem2 OnUpdate(LoopListView2 view, int index){if (index < 0 || index > 100) return null;var itemObj = view.NewListViewItem("item");var itemUI = itemObj.GetComponent<LoopTestItem>();itemUI.SetData(index);return itemObj;}
}
using UnityEngine;
using UnityEngine.UI;public class LoopTestItem : MonoBehaviour
{public Transform RootTrans;public Image ImgIcon;public Text TxtName;public void SetData(int _index){TxtName.text = $"测试:<color=#F55F55>{_index}</color>";}public void SetScale(float scale){RootTrans.GetComponent<CanvasGroup>().alpha = scale;RootTrans.transform.localScale = new Vector3(scale, scale, 1);}
}

需要在子对象挂载的脚本中添加一个SetScale方法用来控制大小及各种变化。

3.2 多个不同类型子对象

SuperScrollView 还支持多个不同类型的子对象根据具体需求同时生成,用来满足再循环列表中有不同游戏对象的需求,下面拿LoopListView2做演示效果

与正常使用LoopListView2类似,在ScrollView上面挂载LoopListView2脚本,并在LoopListView2上面添加对应的item对象,只不过可以根据需求添加多个子对象。

具体操作如下图所示:
在这里插入图片描述

然后在使用时,可以根据自己所需的条件去指定生成不同的子对象,比如下面示例根据奇偶生成不同类型的子对象。

代码示例如下:

using SuperScrollView;
using UnityEngine;public class LoopListViewExample : MonoBehaviour
{[SerializeField] private LoopListView2 m_view = null;private void Start(){m_view.InitListView(100, OnUpdate);}private LoopListViewItem2 OnUpdate(LoopListView2 view, int index){if (index < 0 || index > 100) return null;var itemType = view.NewListViewItem("itemType1");if (index % 2 == 0){itemType = view.NewListViewItem("itemType1");}else{itemType = view.NewListViewItem("itemType2");}var itemUI = itemType.GetComponent<LoopTestItem>();itemUI.SetData(index);return itemType;}
}

效果如下:
在这里插入图片描述


总结

  • 本文演示了UGUI 中循环列表 SuperScrollView的使用方法及几个使用示例。
  • 该组件已经在很多项目中验证过,使用起来没有什么问题,所以可以放心食用。

  • 🎬 博客主页:https://xiaoy.blog.csdn.net

  • 🎥 本文由 呆呆敲代码的小Y 原创 🙉

  • 🎄 学习专栏推荐:Unity系统学习专栏

  • 🌲 游戏制作专栏推荐:游戏制作

  • 🌲Unity实战100例专栏推荐:Unity 实战100例 教程

  • 🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!

  • 📆 未来很长,值得我们全力奔赴更美好的生活✨

  • ------------------❤️分割线❤️-------------------------

请添加图片描述请添加图片描述请添加图片描述

请添加图片描述

资料白嫖,技术互助

学习路线指引(点击解锁)知识定位人群定位
🧡 Unity系统学习专栏 🧡入门级本专栏从Unity入门开始学习,快速达到Unity的入门水平
💛 Unity实战类项目 💛进阶级计划制作Unity的 100个实战案例!助你进入Unity世界,争取做最全的Unity原创博客大全。
❤️ 游戏制作专栏 ❤️ 难度偏高分享学习一些Unity成品的游戏Demo和其他语言的小游戏
💚 游戏爱好者万人社区💚 互助/吹水数万人游戏爱好者社区,聊天互助,白嫖奖品
💙 Unity100个实用技能💙 Unity查漏补缺针对一些Unity中经常用到的一些小知识和技能进行学习介绍,核心目的就是让我们能够快速学习Unity的知识以达到查漏补缺

请添加图片描述


http://www.ppmy.cn/ops/129563.html

相关文章

【SSM详细教程】-12-一篇文章了解SpringMVC

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12789841.html?spm1001.20…

(蓝桥杯C/C++)——常用库函数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、 二分查找 1.二分查找的前提 2.binary_ search函数 3.lower_bound和upper_bound 二、排序 1.sort概念 2.sort的用法 3.自定义比较函数 三、全排列 1.next p…

四、Hadoop 命令高级用法深度剖析

Hadoop 命令高级用法深度剖析 在大数据处理领域&#xff0c;Hadoop 作为一个被广泛应用的框架&#xff0c;其所提供的一系列命令在数据操作与管理方面起着至关重要的作用。本文将对 Hadoop 命令的高级用法进行深入探讨&#xff0c;并结合具体实例进行详尽讲解&#xff0c;以助…

Codeforces Round 946 (Div. 3) G. Money Buys Less Happiness Now(反悔贪心)

题目链接 Codeforces Round 946 (Div. 3) G. Money Buys Less Happiness Now 思路 我们维护当前拥有的钱 s u m sum sum和一个大根堆&#xff0c;大根堆记录用了哪些 c i c_{i} ci​。 我们先尝试获得当前月的幸福&#xff0c; s u m s u m − c i sum sum - c_{i} sumsu…

【机器学习】Softmax 函数

Softmax 是机器学习中常用的函数&#xff0c;广泛用于多分类问题的输出层。它可以将一组实数转换为一个概率分布&#xff0c;使得结果满足“非负”和“总和为1”的要求。在分类问题中&#xff0c;Softmax 让模型预测的每个类别概率都易于解释。本文将详细讲解 Softmax 的原理、…

详解:单例模式中的饿汉式和懒汉式

单例模式是一种常用的设计模式&#xff0c;其目的是确保一个类只有一个实例&#xff08;对象&#xff09;&#xff0c;并提供一个全局访问点。单例模式有两种常见的实现方式&#xff1a;饿汉式和懒汉式。 一、饿汉式 饿汉式在类加载时就完成了实例化。因为类加载是线程安全的&…

设计模式06-结构型模式1(适配器/桥接/组合模式/Java)

#1024程序员节&#xff5c;征文# 4.1 适配器模式 结构型模式&#xff08;Structural Pattern&#xff09;的主要目的就是将不同的类和对象组合在一起&#xff0c;形成更大或者更复杂的结构体。结构性模式的分类&#xff1a; ​ 类结构型模式关心类的组合&#xff0c;由多个类…

C语言中的位操作

第一章 变量某位赋值与连续赋值 寄存器 | 值 //例如&#xff1a;a 1000 0011b a | (1<<2) //a 1000 0111 b 单独赋值 a | (3<<2*2) // 1011 0011b 连续赋值 第二章 变量某位清零与连续清零 寄存器 & ~&#xff08;&#xff09; 值 //例子&#xff1a;a …