NGUI-UIScroll View的使用及注意点
项目层次:
scrollviewbg是600x150的背景图,Inspector视图如下:
panel就是scrollview父容器了,size为600x150,Inspector视图如下:
item就是scrollview里面的每一项了,大小200x150,Inspector视图如下:
以上附加的脚本都是默认设置,此时运行程序,效果如下:
可以看出最后不需要显示的图片没有隐藏,解决办法就是设置panel下UIPanel的Clipping,把此项设置为soft clip即可!运行效果:
如果想实现这样的效果:当拖拽到最后一张图片的时候,此时不是就没了,而是播放第一张图片,相当于把这些图片串成一个圆圈一样,此时我们只要给Panel加个UIWrap Content脚本即可,Item Width为每一项的宽度,我这里的每一项宽度为200,所以我设置成200,Cull Content不要勾选,勾选的情况等下讲,此时效果如下:
但使用UIWrap Content脚本会出现一个问题就是,程序未运行时,每一项展现的次序分别为1,2,3,4,5,其中4,5是隐藏的,那么程序运行起来应该展现的是1,2,3
但是程序运行起来,展现的确实5,2,3,所以如果想展现的是1,2,3的话,那么就要把1放在5的位置,2放在1的位置,3放在2的位置即可!
下面说说Cull Content被勾选的情况:
我们先看看被勾选时运行的效果吧,对一个选项不明白的话,有时候运行程序就能看出区别了:
从效果图可用看出,图片并不会绕圈播放,而是显示空白,而且只有点击每一项才能进行拖动,因为只有每一项添加了UIDrag Scroll View拖拽脚本,如果想点击背景的空白处也能拖拽,控制每一项向左或向右移动,此时我们只要给scrollviewbg添加一个UIDrag Scroll View和Box Collider,并且UIDrag Scroll View脚本的Scroll View设置为panel即可!Drag Scroll View的Scroll View 属性可以指定特定的带有Scroll View的拖拽层,如果不指定在运行时会自动匹配父节点带有绑定Scroll View的拖拽层。
效果如下:
说下UIScroll View脚本每一个选项的含义:
Content Origin:表示子项的起始位置,
选择left:
选择right:
其他的自己看看就知道了
Movement:拖拽的方向,有垂直,水平,自定义,自由四个可选项
Drag effect:拖拽效果,有三个选项,None、Momentum与MomentumAndSpring,None不使用任何效果,Momentum表示使用动量效果,(动量与None在效果上看不出任何差异),MomentumAndSpring带有弹力效果,使用该效果在运行时会自动生成一个Spring Panel的脚本。
scroll wheel factor:滚轮因子,只有当光标放在了panel上,并且scroll wheel factor不为0,那么此时转动鼠标滚轮,panel下的子项会进行滑动,就相当于直接用鼠标点击拖拽的效果一样,只不过现在可以用滚轮替代,scroll wheel factor可以为正数,也可以为负数,只是滑动的方向相反罢了,正负控制的是方向,值的大小,控制的是滑动的力度
momentum amount:动量的数量,通俗的讲就是拖拽产生弹力的大小:(下面的效图果使用的力是相同的)
值为10的效果:
值为1000的效果:
使用默认值35即可!
restrict within panel:限制在panel中,如果不勾选的话,就不会产生弹力效果了!
Cancel Drag if fits:如果适合取消拖动,不懂,默认值即可
smooth drag start:平滑拖动开始,默认值即可
IOS Drag Emulation:iOS阻力模拟,默认值即可
scroll bars:分为垂直方向和平行方向的滚动条,赋值类型为UIProgress Bar类型!
Show Condition也有三个选项:Always表示总是显示滚动条,OnlyIfneeded如果必要就显示,不然隐藏,whendragging表示拖拽时产生滚动条
下面我先展示下Scroll View配合UIProgress Bar产生的效果图,对UIProgress Bar不懂的,我将出一篇关于这个的,敬请关注!
NGUI-UIScroll View的使用及注意点的更多相关文章
- iphone/ipad关于size, frame and bounds总结和UIScroll view学习笔记
1. iphone/ipad大小 Device Screen dimensions(in points) iphone and ipod 320 X 480 ipad 768 X 1024 2. UI ...
- NGUI 基础知识
UIRoot 管理 scalePixelPerfect : 像素匹配,图片不会被缩放,除非屏幕高度小于 Minimum Height 或者大于 maximum Height,如果那样的话,就使用 F ...
- NGUI学习笔记(一):官方视频学习记录
学习NGUI一直断断续续的,目前打算做一个总结的笔记. 我使用的是比较老的3.6.0版本. 1.使用NGUI,需要开启“Edit”->“Project Settings”->“Physic ...
- NGUI学习笔记(六):ScrollView、Grid和Table
下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例: 基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然, ...
- (转)u3d设计模式
Unity3d中UI开发的MVC模式 ,和游戏开发的其他模块类似,UI一般需要通过多次迭代开发,直到用户体验近似OK.另外至关重要的是, 我们想尽快加速迭代的过程.使用MVC模式来进行设计,已经被业界 ...
- NGUI-UIProgressBar,UIScrollBar,UISlider
UIProgressBar是UIScrollBar和UISlider的基类 1.先来看下UIProgressBar(进度条)的使用 层次: progressBar的Inspector视图: 而fore ...
- NGUI之scroll view制作,以及踩的坑总结
http://blog.csdn.net/monzart7an/article/details/23878505 链接: http://game.ceeger.com/forum/read.php?t ...
- NGUI例子Scroll View场景中item添加点击后自动滑到终点
http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...
- NGUI系列教程十(Scroll View实现触摸滚动相册效果)
NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...
随机推荐
- 2017.10.25 Java List /ArrayList 三种遍历方法
java list三种遍历方法性能比较 学习java语言list遍历的三种方法,顺便测试各种遍历方法的性能,测试方法为在ArrayList中插入记录,然后遍历ArrayList,测试代码如下: pac ...
- Unable to launch the Java Virtual Machine
看看国内的回答,http://zhidao.baidu.com/question/119993351.html 再看看国外的,http://www.mkyong.com/oracle/oracle-s ...
- Mybatis之批量更新操作
更新单条记录 UPDATE course SET name = 'course1' WHERE id = 'id1'; 更新多条记录的同一个字段为同一个值 UPDATE course SET name ...
- .clone事件当你克隆的时候,DOM节点是克隆出来了,但是克隆出来的节点不能运行时事件 ...
解决办法如下在clone()里面加个参数true,即可完成事件的植入.即:.clone(true).clone( [ withDataAndEvents ], [ deepWithDataAndEve ...
- vscode-tfs插件报错:TF30063
解决方案:删除tfs凭证,然后用vs重新登陆tfs服务器,此时会在电脑上创建要一个新的tfs凭证,然后再用vscode-tfs操作tfs就没有问题了.
- Git配置和常用命令
Git配置 git config --global user.name "hunng" git config --global user.email "huangthin ...
- jQuery性能优化和技巧
jQuery性能优化 ①使用最新版本的jQuery类库 ②使用合适的选择器 ③缓存对象 ④循环时的DOM操作 ⑤数组方式使用jQuery对象 ⑥事件代理 ⑦将你的代码转化成jQuery插件 ⑧使用jo ...
- node.js启动调试方式
node.js启动调试方式(nodeJs不能像js一样在控制台调试) 以express项目为例,启动路径是localhost:3000 一.通过node命令启动 node server/bin/www ...
- Colours–颜色库,包含100种预定义的颜色和方法
简介 Colours–颜色库,包含各种100种预定义的颜色和方法,可以简化颜色相关的开发工作. 项目主页: Colours 最新示例: 点击下载 快速入门 安装 通过Cocoapods安装 pod ' ...
- Linq to Entity 时间差作为筛选条件产生的问题
前言 在使用 Linq to Entity 的時候,會把之前 Linq to SQL 的想法就帶進去,寫好之後編譯也都不會出錯,但是實際上在跑的時候就會出現錯誤訊息了,這點真的要注意了.這次我遇到問題 ...