Unity3D UGUI利用Scroll View实现滚动列表

最新推荐文章于 2022-06-13 12:31:04 发布
最新推荐文章于 2022-06-13 12:31:04 发布
阅读量925 收藏 11
点赞数 1
分类专栏： unity 文章标签： unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43598617/article/details/116452053
版权

文章目录

最终效果

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

第一步 新建Scroll View

1.新建Panel，在Panel下新建Scroll View
在这里插入图片描述
2.修改滚动列表尺寸
在这里插入图片描述

3.由于我需要的效果是横向滚动，所以把垂直滚动条取消
在这里插入图片描述

第二步 对Content进行操作

1.在Content下添加所有要显示的项（一般是用脚本加载），这里方便测试，手动添加（Image）
在这里插入图片描述
这时候显示效果如图

2.在content下添加组件Grid Layout Group（网格布局效果）和Content Size Fitter（内容大小适配）
PS:之前看了很多教程, 就是缺少了内容大小适配组件, 导致无法滚动
在这里插入图片描述

3.调整每一项(Image)的大小以及项之间间隔
在这里插入图片描述
4.调整为一行多列的模式
在这里插入图片描述
5.调整水平内容大小适配
在这里插入图片描述

第三步 运行

给各个Image换个颜色试试效果,最后运行
在这里插入图片描述

朽木zi
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Unity ScrollView实现动态列表生成
08-19
主要为大家详细介绍了Unity ScrollView实现动态列表生成，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
unity3d循环滑动_Unity实现3D循环滚动效果
weixin_31531599的博客
12-28 812
本文实例为大家分享了Unity实现3D循环滚动效果展示的具体代码，供大家参考，具体内容如下然后通过SetDepthAndPosition这个方法，实现图片的空间空间展开Z轴和Y轴，系数是一样的经过上面设置，空间就摆开了using UnityEngine;using System.Collections;using System.Collections.Generic;public class Se...
[UnityUI]循环滑动列表
宏哥的博客
07-21 8505
效果图： 使用的是UGUI和DOTween 其中比较关键的是循环滑动和层次排序： 1.循环滑动：这里先假设显示五张图片，分别标记为0,1,2,3,4，那么当向左滑动时，序列就变为1,2,3,4,0，这里先保存4的位置，然后从4开始，4的位置和大小向3渐变，3的位置和大小向2渐变，2的位置和大小向1渐变，1的位置和大小向0渐变，0的位置直接变为原来保存的4的位置。也就是说，当向左滑动时
Unity3d C# UGUI实现自动循环滚动的列表（ScrollRect）的功能源码
10-17
Unity3d C# UGUI实现自动循环滚动的列表（ScrollRect）的功能源码 建议看说明：https://blog.csdn.net/qq_33789001/article/details/120813324
Unity:UGUI之Scroll View剖析Demo,游戏等级UI设计,Layout,Toggle,Scroll
05-01
UGUI 之ScrollView剖析,及自定义设计,游戏等级的UI设计,可滑动切换;
Unity3D UGUI实现缩放循环拖动卡牌展示效果
08-26
主要为大家详细介绍了Unity3D UGUI实现缩放循环拖动展示卡牌效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unity3D UGUI Super ScrollView v2.4.4.unitypackage
08-31
unity3d基于ScrollRect的无限循环列表插件，功能强大齐全，压缩包内有v2.4.3和v2.4.4版本
Unity3D UGUI实现翻书特效
08-25
主要为大家详细介绍了Unity3D UGUI实现翻书特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Unity无限滚动列表(自动分页和网络请求) ScrollView
06-04
1.项目中应用组件，分享出来 2.支持横向和竖向无限滑动，基于ScrollView扩展 3.滑动时，自动计算分页，通过回调自动获取调用获取分页数据 4.使用简单，组件代码注释详细 5.例子简单明了
unity3d 无限循环滑动列表
04-26
该资源是无限循环滑动列表 , 可拖拽 , 可滑动 , 可定位item , 可向上定位item滑动 , 可向下定位item滑动 , 可附近定位item滑动 , 可增加列表长度倍数滑动item , 支持鼠标中建滑动 UNITY_STANDALONE_OSX || UNITY_STANDALONE_WIN || UNITY_EDITOR
scrollView自动循环滚动
10-10
scrollVIew上实现图片的自动循环滚动。用到时间计时器，并且可手动滑。例如三张图片1，2，3，那么再拿图片3放在图片1前面，再拿图片1放在图片3后面
最新版UGUI_XChat_表格工具.unitypackage
09-27
最新版UGUI_XChat_表格工具.unitypackage。最新版简单好用
Unity中ScrollView/ScrollRect的优化，实现自动布局和可复用Item的滑动列表
weixin_44068264的博客
06-13 2250
2.根据需要添加的item数量和高确定Content的高。 3.根据ScrollRect的高即遮罩区域大小和item的高确定当前可视区域内可容纳的行数 4.获取Content与ScrollRect的相对坐标的偏移量，确定当前滑动列表滑动了几行。比如当偏移了一个Item的高我们就当作Content滑动了一行。 5.我们给Item定义一个属性值Index。记录它在Content中的位置。 比如Index=0相当于这个Item的位于Content的最左上角。比如当初始状态时起始Index值为0，结束值为初始...
Unity3D（七）利用UGUI的Scroll View实现滚动列表（转）
weixin_38167826的博客
09-29 1788
原文链接：https://jingyan.baidu.com/article/0a52e3f4f0c7b6bf62ed7221.html 工具：Unity3d 2017.2.0f3 (64bit) 第一步：新建unity3d工程 第二步：在图中位置右键，新建一个Scroll View组件。 第三步：设置scrollView的宽和高 第四步：选中Content项...
【Unity3D】【NGUI】循环Scroll View
四爷的专栏
01-25 9368
NGUI讨论群：333417608 NGUI版本3.0.9 f4 方法： 1、脚本放在Scroll View下面的UIGrid的那个物体上 2、UIScrollView的Restrict Within Panel勾选掉 3、Scroll View上面的UIPanel的Cull勾选上 4、你的每一个Item都放上一个UIWidget，调整到合适的大小（
unity循环滚动列表_【unity游戏开发】LoopScrollRect组件
weixin_39640909的博客
12-11 791
引言对于背包界面，排行榜列表，聊天消息，等有大量的UI列表的界面，常规做法是为每一条数据生成一个格子，在数据量越大的情况下，会生成越来越多的Gameobject，引起卡顿。这个组件就是为了优化这个问题诞生的，就以联盟宝箱为例子，联盟宝箱最多可以容纳300个宝箱，如果一下子生成300个，整个界面就会卡到爆炸，这个组件的做法是就生成视图可见的个数，然后拖动的时候循环复用，比如向下拖动，上面的item看...
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对象下的最后一个子对象即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值