转自-麦兜

Unity3D插件NGUI之Scorll View(滑动图标)的制作(简洁版)

用Unity3D开发的人员都知道NGUI在UI制作方面是一个强大的的插件,当然里面也有Scorll View的制作例子。在这里我来和大家交流交流我在开发中运用NGUI的一些心得!

首先,我们知道NGUI自己有一套树形的层级关系图,很多时候我们只能在这些树形的层级结构下创建一些NGUI实例。其实在这个层级关系图中最重要的就是NGUI给我们提供的那些脚本和方法,只要了解了这些脚本和方法,你可以任意的改变这些层级结构。

今天我在这儿来改变NGUI的树形结构来对NGUI中Scorll View的实现来讲一个简洁版的。在改变层级结构之前,我们要清楚的知道,那些组件和方法是制作Scorll View过程中必须的。当然UIDraggablePanel,UIPanel,UIGrid,UIDragPanelContents这四个组件是制作Scorll View的关键组件。

首先我们新建一个场景,里面包含了我们的一个主摄像机,当然这个摄像机我们不删除,所以就不再新建一个NGUI的树形层级结构了,我们把场景中的摄像机的投射方式改为orthographic(摄像机以90度直直的投射到屏幕,其实这就是一个2D摄像机),然后我们为这个摄像机加上一个NGUI中核心组件UICamera(必须加上)

然后我们新建一个空对象,放在摄像机下面把他作为摄像机的子物体

然后我们通过NGUI的create a widget在这个空对象下面创建一个sliced sprite类型的图标(其他类型图标也行),然后多复制几个。

下面我们最重要的事就是加组件,我们把这个3个UIDraggablePanel,UIPanel,UIGrid组件加到GameObject上,当然在我们创建sliced sprite的时候,自动的为我们加上了UIPanel这个组件

然后我们再为每个sliced sprite都加上组件UIDragPanelContents和Box Collider。

到这儿的时候我们整个步骤就完成了一大半了,然后我们对一些组件的参数进行调整。

首先我们对UIGrid组件的cell width参数进行调整,这个组件主要是对我们的sliced sprite进行排列。

接下来我们对UIPanel组件中的Clipping属性选择到Soft Clip ,然后调整下面的几个参数,这个主要是决定了,你的sliced sprite出现的范围。

然后我们对UIDraggable Panel组件中的Scale中的参数进行调整,这个决定了sliced sprite向哪个方向滑动。

然后把每一个sliced sprite中的Box Collider组件中的参数Is Trigger打上勾勾。这个Collider主要是用来对滑动响应的区域。在加上组件UIDrag Panel Contents后,整个响应滑动的区域就是在每一sliced sprite上面,当然你自己也可以做一个更大的响应区域。其他的参数自己可试试。

整个制作过程就完成了,现在的层级十分的简单明了。运行效果图如下。

 

Super ScrollView for UGUI提供基于UGUI ScrollRect的可轻松定制的ScrollView。它是一组C#脚本,可帮助您创建所需的ScrollView。这是非常强大的和高度优化的性能。 文件 Android演示应用程序 演示: - 聊天消息列表演示 - 水平画廊演示 - 垂直画廊演示 - GridView演示 - PageVew演示 - TreeVew演示 - 与稠粘头演示的TreeView - 旋转日期选择器 - 更改项目高度演示 - 下拉刷新演示 - 拉起来加载更多的演示 - 点击加载更多演示 - 选择并删除演示 - GridView删除项目演示 - 顶部到底部的演示 - 自下而上的演示 - 从左到右的演示 - 右侧演示 - 响应GridView演示 - TreeViewWithChildrenIndent演示 特征: - ListView和GridView和TreeView - 无限的项目 - 项目在不同的大小(高度/宽度) - 具有不同预制的物品 - 在初始时间大小未知的项目 - 垂直滚动视图(从上到下,从下到上) - 水平滚动视图(从左到右,从右到左) - 项目填充 - 滚动到指定的项目 - 滚动到具有偏移量的项目 - 项目计数在运行时更改 - 项目大小(高度/宽度)在运行时更改 - 物品捕捉到视口中的任何位置 - 项目循环,如微调 - 添加/删除项目 - 全部删除/删除所有项目 - 刷新并重新加载项目 - 使用池缓存项目,不要在运行时销毁项目 - 有效回收物品 - 平台无关 - UGUI支持 - 支持Unity平台(IOS / Android / Mac / PC / Console / Winphone / WebGL ...)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值