Unity UGUI无限列表(Infinite List)
更新日期:2020年10月16日。
Github源码:[点我获取源码]
索引
- InfiniteList
- 使用
- 创建InfiniteListScrollRect
- InfiniteListScrollRect参数详解
- 重写数据类
- 重写元素类
- 编辑元素模板
- 添加数据
- 移除数据
- 清空数据
InfiniteList
InfiniteList为基于UGUI的ScrollRect无限滚动列表的一种实现,很多时候当我们的ScrollRect的视图中包含的数据无限多时,而同时可见的数据往往只有几条,大量不可见数据被Mask组件排除在肉眼可见范围之外,但他们依然存在,内存与DrawCall的消耗仍旧同时进行着,这是相当不明智的,所以,消灭这一部分隐藏数据的真身就是InfiniteList做的主要工作。
使用
创建InfiniteListScrollRect
在Hierarchy视图点击右键,选择菜单UI
-> ScrollView - InfiniteList
,在场景中创建一个无限滚动视野的默认对象:
InfiniteListScrollRect参数详解
1.Element Template
为无限列表元素的模板,你需要根据你的情况修改此模板。
2.Listing Direction
列表的排列方向,支持水平、垂直方向,但不支持同时水平+垂直布局。
3.Height
垂直布局时,单个元素高度,水平布局时,单个元素宽度。
4.Interval
列表布局时,元素之间的间隔距离。
5.其余参数为继承至ScrollRect的参数。
重写数据类
首先,你需要新建一个数据类型,继承至InfiniteListData
无限列表数据基类,比如下方的InfiniteListTestData:
/// <summary>
/// 无限列表测试数据
/// </summary>
public class InfiniteListTestData : InfiniteListData
{public string Name;
}
需注意,一个数据对象对应一个无限列表中显示的元素,数据 <=> 元素,为一对一的关系。
重写元素类
然后,你需要新建一个元素类型,继承至InfiniteListElement
无限列表元素基类,比如下方的InfiniteListTestElement:
/// <summary>
/// 无限列表测试元素
/// </summary>
public class InfiniteListTestElement : InfiniteListElement
{public Text Name;public Button RemoveButton;//元素属于的无限列表对象private InfiniteListScrollRect _scrollRect;//元素持有的数据private InfiniteListTestData _data;public override void UpdateData(InfiniteListScrollRect scrollRect, InfiniteListData data){base.UpdateData(scrollRect, data);_scrollRect = scrollRect;_data = data as InfiniteListTestData;Name.text = _data.Name;RemoveButton.onClick.AddListener(() => { _scrollRect.RemoveData(_data); });}public override void ClearData(){base.ClearData();_scrollRect = null;_data = null;RemoveButton.onClick.RemoveAllListeners();}
}
需注意,UpdateData
方法为此元素在无限列表中可见时被调用,参数1为无限列表对象,参数2为此元素对应的数据。
ClearData
方法为此元素在无限列表中隐藏时被调用。
编辑元素模板
然后,需要用我们自己的元素类,替换掉元素模板ElementTemplate
上的元素类:
我们继续编辑元素模板,在其中添加一个Text用于显示文本,添加一个按钮用于点击后移除此元素(也即是从列表中移除此元素对应的数据),元素的高度我们设定为20
,在垂直排列时,无限列表只认高度
、和元素y
坐标值,x
坐标值会始终被设置为0,水平排列同理。
同时,我们要将我们设定的高度20
设置到InfiniteListScrollRect的面板,元素间的间隔我们设置为5
:
添加数据
目前无限列表只支持动态添加数据:
//无限列表对象public InfiniteListScrollRect InfiniteList;private string[] _surnames = new string[] { "张", "李", "王", "赵", "刘", "胡", "霍", "江", "唐", "欧阳", "司徒", "慕容", "轩辕", "皇甫", "西门" };private string[] _names = new string[] { "三", "四", "五", "明", "强", "磊", "龙", "虎", "玉清", "博", "成", "航", "逸", "建国", "建军", "建党" };private void Start(){List<InfiniteListTestData> datas = new List<InfiniteListTestData>();for (int i = 0; i < 1000; i++){InfiniteListTestData data = new InfiniteListTestData();data.Name = (i + 1) + "." + RandomName();datas.Add(data);}//添加多条数据到无限列表,当然也支持单条添加InfiniteList.AddDatas(datas);}/// <summary>/// 随机组合一个姓名/// </summary>private string RandomName(){int surname = Random.Range(0, _surnames.Length);int name = Random.Range(0, _names.Length);return _surnames[surname] + _names[name];}
运行场景,可以看到1000条数据的视图中,无论怎么滚动,真实存在的元素对象只有可见区域中的几个,视图滚动时,他们轮番被对象池提取、回收:
水平排列模式类似:
移除数据
目前无限列表只支持动态移除数据,在元素类中有一句代码将移除数据的逻辑绑定到移除
按钮上,当有数据被移除时,列表会自动刷新位置:
RemoveButton.onClick.AddListener(() => { _scrollRect.RemoveData(_data); });
清空数据
使用如下方式清空所有数据:
InfiniteList.ClearData();
Unity UGUI无限列表(Infinite List)相关推荐
- Unity UGUI 滚动列表
效果: 当前用的 Unity 版本为 5.6.7f1,场景分辨率为 1440 * 2560,下面的案例中,都是以这个分辨率为标准,如果你设置的屏幕大小和我的不一样,那么在后面的操作中,参数可能会不一样 ...
- Unity UGUI —— 无限循环List(转载)
using UnityEngine; using System.Collections; using System.Collections.Generic; using UnityEngine.UI; ...
- Unity UGUI Button 中文详解-Chinar
Chinar blog :www.chinar.xin Unity UGUI 完整系列教程 (Chinar中文图解) Unity UGUI Button 组件 本文提供全流程,中文翻译. Chinar ...
- Unity UGUI Batches合批规则详解(含源码)
Unity UGUI Batches合批规则详解 在处理UGUI DrawCall问题的时候,我们经常遇到各式各样的问题. 问题1:在处理UGUI合批的时候,发现了一个面板父节点发生旋转,底下的UI合 ...
- 【游戏开发创新】520程序员的浪漫,给CSDN近两万的粉丝比心心(python爬虫 | Unity循环复用列表 | 头像加载与缓存)
文章目录 一.前言 二.最终效果 三.读取CSDN粉丝列表数据 1.分析粉丝列表页面结构 2.爬数据 四.Unity制作 1.文件读取 2.c#解析json 3.UGUI循环复用列表 4.头像的加载 ...
- Unity UGUI开发设计及案例讲解
Unity--UGUI开发设计及案例讲解 1. Unity4.6跟以前的版本的最大区别首先在于在层级视图中点鼠标右键时出现的弹出菜单上,它把以前许多的菜单项进行了归类,比如cube sphere ca ...
- Unity UGUI图文混排源码(二)
Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...
- Unity UGUI InputField 中文详解-Chinar
Chinar blog :www.chinar.xin Unity UGUI 完整系列教程 (Chinar中文图解) Unity UGUI InputField组件 本文提供全流程,中文翻译. Chi ...
- 无限列表【UIGridView】应用示例
UIGridView 源码 using System; using System.Collections; using System.Collections.Generic; using UnityE ...
最新文章
- Oracle11gR2 64bit+Oracle11gR2Client32bit+pl/sql 9
- adb命令开启手机的一些功能,请问怎么操作?
- vue 多页面iframe不刷新_Vue中iframe保持活动状态(不刷新)
- CNN卷积层图像和矩阵转换函数
- Android存储空间不足的解决办法
- python列表可以加可以乘
- C++基础1 数据类型 常量
- python元组与列表的区别、简答题_细解python面试题(一)元组和列表的区别
- 【spring-cloud】Eureka server和client之间的心跳通信
- 记百人计划--测试思路
- js事件(事件冒泡与事件捕获)
- 兄弟打印机内存已满清零方法_兄弟打印机打印时显示内存已满怎么处理
- 华为云MVP周峥:气象预报是个技术活,大数据、超算、AI,缺一不可
- unity3d FPS 枪的后座力
- 向武 清华大学 计算机,哥哥保送弟弟全市第二 双胞胎同时上清华(组图)
- 【转】c# 图片压缩 (非图片大小变化)----使得显示效果差点,但是图片占用空间需要变小
- [bzoj4094][Usaco2013 Dec]Optimal Milking 线段树
- 云服务器密码忘了_云服务器 root 密码忘记了怎么办
- Yolov3-v5正负样本匹配机制
- 服务器最高安全防御策略选择与差异