项目层次:

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的使用及注意点的更多相关文章

  1. 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 ...

  2. NGUI 基础知识

    UIRoot 管理 scalePixelPerfect : 像素匹配,图片不会被缩放,除非屏幕高度小于 Minimum Height 或者大于 maximum  Height,如果那样的话,就使用 F ...

  3. NGUI学习笔记(一):官方视频学习记录

    学习NGUI一直断断续续的,目前打算做一个总结的笔记. 我使用的是比较老的3.6.0版本. 1.使用NGUI,需要开启“Edit”->“Project Settings”->“Physic ...

  4. NGUI学习笔记(六):ScrollView、Grid和Table

    下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例:   基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然, ...

  5. (转)u3d设计模式

    Unity3d中UI开发的MVC模式 ,和游戏开发的其他模块类似,UI一般需要通过多次迭代开发,直到用户体验近似OK.另外至关重要的是, 我们想尽快加速迭代的过程.使用MVC模式来进行设计,已经被业界 ...

  6. NGUI-UIProgressBar,UIScrollBar,UISlider

    UIProgressBar是UIScrollBar和UISlider的基类 1.先来看下UIProgressBar(进度条)的使用 层次: progressBar的Inspector视图: 而fore ...

  7. NGUI之scroll view制作,以及踩的坑总结

    http://blog.csdn.net/monzart7an/article/details/23878505 链接: http://game.ceeger.com/forum/read.php?t ...

  8. NGUI例子Scroll View场景中item添加点击后自动滑到终点

    http://blog.csdn.net/luyuncsd123/article/details/22914497 最近在做一个项目的UI,需求是1.拖动items后当永远有一个item保存在中间位置 ...

  9. NGUI系列教程十(Scroll View实现触摸滚动相册效果)

    NGUI中提供了两种Scroll View 一种是通过手指或鼠标滑动视图时移动平面物体,另一种则是直接移动摄像机,他们各有各的好处.但是NGUI提供的Scroll View很难实现类似Android ...

随机推荐

  1. COGS2287 [HZOI 2015]疯狂的机器人

    [题目描述] 现在在二维平面内原点上有一只机器人 他每次操作可以选择向右走,向左走,向下走,向上走和不走(每次如果走只能走一格) 但是由于本蒟蒻施展的大魔法,机器人不能走到横坐标是负数或者纵坐标是负数 ...

  2. VMware 12安装Mac OS X 10.11

    去年写了一篇安装Mac OS X 10.10的文章,看到大家都想体验OS X,大多数都能成功,但也在其中发现了一些问题,所以更新一下,希望对大家有所帮助.   1048VMware 11安装Mac O ...

  3. python非字符串与字符产链连接

    第一种办法: "hello" +' '+str(110) 输出结果: 'hello 110' 第二种办法: import numpy x = 110 print 'hello(%d ...

  4. C++的队列和pair

    C++队列的成员函数: back()返回最后一个元素 empty()如果队列空则返回真 front()返回第一个元素 pop()删除第一个元素 push()在末尾加入一个元素 size()返回队列中元 ...

  5. STL 之 set的应用

    关于set Set是STL中的一个容器,特点是其中包含的元素值是唯一的,set根据其底层实现机制分为hash存储和红黑树存储两种方式,这两种结构最本质的区别就是有序和无序,红黑树的存储是有序的而has ...

  6. BZOJ1004: [HNOI2008]Cards(Burnside引理 背包dp)

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4255  Solved: 2582[Submit][Status][Discuss] Descript ...

  7. SVN中trunk,branches,tags用法详解(转载)

    转载出处:http://www.cnblogs.com/dafozhang/archive/2012/06/28/2567769.html Subversion是一个自由开源的版本控制系统.在Subv ...

  8. 关于Ubuntu 16.04 pip安装Docker-Compose

    $ sudo apt-get update 安装pip: $ sudo apt-get install python-pip 卸载旧版本docker-compose: $ sudo pip unins ...

  9. Spring Cloud 升级最新 Finchley 版本,踩坑指南!

    https://blog.csdn.net/youanyyou/article/details/81530240 Spring Cloud 升级最新 Finchley 版本,踩了所有的坑! 2018年 ...

  10. python 计算提成代码

    while True: with open('8564.txt') as f: r = f.readlines() start = input("请输入要查询的日期,例如20180101 : ...