NGUI Scroll View

NGUI版本: 3.5.6b

1  新建立一个Scene场景

2  拖入一个Contorl-Backgound到Scene中,微调,作为背景使用

3  鼠标在场景中右键点击Create-->Scroll View (调整的时候,注意不要调整的是UIPanel)

4  创建一个Sprite,或者快捷键Alt+Shift+S 并且将这个Sprite拖放到Scroll View 下(在Hierarchy中),Depth为0

拖动Sprite的时候,Sprite会被Scroll View的边缘剪辑一部分

5 添加交互事件的两个必要步骤

1 给Sprite添加Collider(碰撞体),鼠标右键-->Attach--> Box Collider    再右键点击Sprite的时候Attach中多了很多选项

2 给Sprite添加Drag Scroll View (拖动滚动视图)脚本,鼠标右键-->Attach-->UIDrag Scroll View 这个时候就可以用鼠标或是 Touch Event(触摸事件) 控制Scroll View,这个时候这个Sprite就会有滑动效果

6 复制(Ctrl+D)Scroll View下的多个Sprite,就能够实现拖动它们(不包含Sprite外边的,只包含Sprite内部),进行滚动

7 实现拖拽两个物体中间或外面,整体滑动效果

1  选中Scroll View,打开右键菜单选择Create Invisible widget,就会出现一个以Container的隐形控件,Depth 为1,

Container这里我设置的大小是和Scroll view 大小一样的

Invisible Widget(隐形控件) 只是一个四方形框架,中间不绘制任何东西

2 调整尺寸,和ScrollView重叠,然后将其拖出Sroll View,也就是在UIRoot下  这样就不会跟着Scroll View一起移动

3 最后添加Box Collider 和 Drag Scroll View(需要设置UI的Scroll View),UIDrag Scroll View 脚本中Scroll View 绑定上文创建的那个Scroll View

8 Container的Depth是1,Scroll View的Sprite的Depth 是0,Container(隐形控件)是否会拦截Spirte中的事件?

1  移除Container中的Drag Scroll View脚本,在点击播放按钮,仍然可以拖拽(说明只需要添加Box Collider碰撞体就可以实现点击空白部分实现拖拽滑动)

说明Container不会获取事件,而物体会获取事件   因为Scroll View 有它自己的Panel,Panel的Depth设置为1

而UIRoot中Panel对应的Depth是0,Scroll View中的Depth是1,所以事件会先发送到Scroll View 之后才会发送到Ui Root

9  如何拦截事件的发生?比如你有一个Loading Screen(加载画面),你需要把界面中所有的事件进行拦截

1 问题很简单,你需要创建一个新的Panel(选中UI Root,右键菜单中选择Create--Panel)

2  这个Panel,默认Depth值会比其他所有的Panel中,最大的值大1,现在的值2

3  现在把Container移动到这个Panel中,也就是让它成为Panel的子元素,这个Panel的值是2,它会优先获取事件

   4  现在我点击播放按钮,再尝试进行拖拽,发现不起作用了,拦截成功,可以借助Tip1 来查看拦截的是哪一个物件,以及判定是否成功

10 Panel相关

1  要让某些部件放在Scroll View的上面,则把部件放到一个Panel中,并确保Panel的Depth值大于Scroll View中的Depth

2 Panel的Depth值比其他控件的Depth都高

11

Tip1:

使用NGUI的时候,你可能不知道为什么无法获取事件?

遇到这种情况,你可以选中UI Root中Camera的Debug选框,这个时候就会在Game控制前显示当前事件点击所对应的物件在Hierarchy的位置

时间: 2024-10-13 19:07:49

NGUI Scroll View的相关文章

4.NGUI Scroll View,Grid(滑动窗口)

(1)     创建一个Scroll View(NGUI – Create – Scroll View) (2)     在Scroll 下新建一个Grid(主要用来排序,NGUI – Create - Grid) (3)     在Grid下添加一个Sprite,并且添加UIDrag Scroll View组件和Box Collider(NGUI – Attach - BoxCollider). (4)     复制若干个Sprite.点击Grid部件右边的小齿轮,点击Execute刷新排序.

Unity NGUI制作scroll view

unity版本:4.5 NGUI版本:3.6.5 参考链接:http://blog.csdn.net/monzart7an/article/details/23878505,作者:CSDN 冬菊子   http://blog.csdn.net/unity3d_xyz/article/details/22989401,作者:CSDN inspironx 1.创建背景: 这部分比较简单,先创建一个用来展示scroll view的panel,在panel下创建一个空对象,空对象下面创建一个表示背景的s

NGUI 3.5教程(九)Scroll view - 制作【商店】和【背包】

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/41043155 写在前面:     最近太忙,好久没有更新教程了,请大家原谅.本文将用NGUI,一步步实现[商店]和[背包]界面.由于它们的逻辑大同小异.所以这里仅以[背包]为例. 这篇文件和前八篇文章,基本涵盖了NGUI的大多数常用用法:并且,将来的趋势很可能是官方UI逐渐替代NGUI,所以,这篇教程是NGUI 3.x系列教程的最后一篇. 欢迎大家纠错.拍砖!原创很辛苦,如有转载,请

NGUI的Scroll View的制作

此为重点: 首先建立一个sprite作为背景,然后建立一个Scroll View, 然后在Scroll View里建立一个Grid 看一下Grid的属性,看到Arrangement是表示排列方式,Sorting也是排序方式,当随意拖动里面的cell 的时候会以你选的方式排序,看Pivot这个是指轴的位置,现在是在中心看图Scenc里面的坐标就知道了.然后看HIde Inactive这个属性目前我所了解的实现是拖动里面的cell后可以随便移动你所拖动的cell到任何位置,若果勾选了上面或者下面的那

ngui3.5.7 版本Scroll View实现方法

现在网上的教材都是老版本的,现在的版本并没有Drag Panel Contents脚本,所以我对着现在的DEMO琢磨出了实现方法 第一,创建NGUI ui,其他组件不必创建,我只要NGUI这个摄影机,将这个NGUI设置为2D层,下面子组件都属于2D层 创建Scroll View,之后在下面创建Grid把他里面的脚本去掉,添加UICenterOnChild这个脚本,之后在Grid下面创建你要用的组件,在这些组件上添加UIDrag Scroll View和UICenter On Click 还有Bo

Scroll View 深入

转载自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法,但这些方法只是UIView一些属性的表面而已.因此,要想弄懂UIScrollView是怎么工作之前,你需要了解 UIView,特别是视图渲染过程的两步. 光栅化和组合 渲染过程的第一部分是众所周知的光栅化,光栅化简单的说就是产生一组绘图指令并且生成一张图片.比如绘制一个圆角矩形.带图片.标题居中的

全面理解iOS开发中的Scroll View

转自:http://mobile.51cto.com/hot-430409.htm 可能你很难相信,UIScrollView和一个标准的UIView差异并不大,scroll view确实会多一些方法,但这些方法只是UIView一些属性的表面而已.因此,要想弄懂UIScrollView是怎么工作之前,你需要了解 UIView,特别是视图渲染过程的两步. 光栅化和组合 渲染过程的第一部分是众所周知的光栅化,光栅化简单的说就是产生一组绘图指令并且生成一张图片.比如绘制一个圆角矩形.带图片.标题居中的U

Android Material Design(二)Observable Scroll View

Observable Scroll View是GitHub上的开源库,共有49个不同的效果组合,我把各个演示的Activity与一个49个item的ListView绑定,点击跳转到对应Activity查看效果. ActionBarControlGridViewActivity // 1 ActionBarControlListViewActivity // 2 ActionBarControlRecyclerViewActivity // 3 ActionBarControlScrollView

Scroll view 备忘

Stroyboard中使用ScrollView 当我们使用Storyboard开发项目时,如果要往控制器上拖入一个ScrollView并且添加约束设置滚动区域,是有特殊的规定的: 拖入一个scrollview,规定它的位置大小: 如果想要scrollview滚动的话,需要一个view作为scrollview的子视图,称之为 containerView,并且containerView的约束决定着scroll view 是否可以滚动 注意:在实际开发中,我们可能会遇到不止上下滚动(设置水平居中和高度