Scroll View 笔记

一 界面创建

1.在UI Root路径下,新建Scroll View,然后调节大小,
2.在Scroll View下建Sprite,默认状态下 Sprite的位置超出Scroll View就会被裁减
3.为Sprite 添加box collider,和脚本Drag Scroll View .  详解rag Scroll View可以用鼠标或是Touch Event(触摸事件)控制 Scroll View.
4.复制 一行 相同的Sprite,并把它们排列整齐,就可以通过拖拽来使它们左右的滚动.
5在Scroll View里面添加一个空物体,空物体上添加脚本UIGride (网格),它会创建一个网格,并把它包含的子元素的位置进行排列
6选中Scroll View 下的所有Sprite元素,拖动到Gride上,然后在Gride物体上UIGrid脚本上右键->Execute(执行)选项,它会重新对子元素的位置进行排列
7这个间距可能大了,通过修改UIGrid脚本上的属性Cell weidth Height,在次点击Execute 就好多了

file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(1).png
把它们拖拽出来,物体马上自动对齐,
怎样看到轨迹呢,在UIGride脚本下勾选Smooth Tween (平滑补间动画) 选项,拖拽物体时,所有物体都有平滑的动画效果



要实现拖拽任意区域就可以进行滚动,比如拖拽两个物体中间或外面,


1选中Scroll View,在界面下右键选择 Creat _> Invisible Widget(隐形控件),

调整大小和Scroll View范围相同


脱动到UI Root目录下


隐形控件并不显示,也就是相当于创建了一个容器Container (在Scroll View下添加了一个带有UIWidget脚本的游戏物体)


2在Container 上添加 box Collider,和脚本Drag Scroll View


在Drag Scroll View脚本中设置Scroll View属性 为当前的Scroll View


    Container(容器) 也就是刚创建的"Invisible Widget" 它的"Depth" 是1,而外面"Scroll View"中的"Sprite"使用的"Depth"是0实际上,这个"Container"拦截了事件的发生,而"Scroll View"物体上有一个UIpanel脚本它的Depth为1

事件首先->"Scroll View" ,之后才会发送到 UI Root



怎样拦截事件的发生呢


比如有你有一个Loading Screen(加载画面),你需要在界面中所有事件进行拦截


在本例中


file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(2).png
首先选中UI Root下创建一个NGUI物体Panel,这个Panel默认的Depth 值会比其他所有的Panel中最大的值大1,现在的值为2
现在把Container移到这个Panel下,运行就拦截了事件

为什么无法获取事件呢

在UI Root ->Camera上UICamera脚本上的属性Debug选中
在Debug 模式开启时,你点击播放按钮NGUI会提示你当前鼠标指针指向的部件是什么


Panel 其实也有很多用处,比如你想确保A物体在B物体上层


    如果我想让某些部件在Scroll View 的上面,我是需要把它放进一个Panel中,并确保它的Depth 大于Scroll View 的Depth.你需要记住的就是Panel的Depth比其他控件的Depth 优先级高


如何把Scroll View中把物体拖拽出来


file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(3).png
1在sprite上添加Drag and Item(拖拽物品)脚本

sprite上有什么

file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(4).png
2在Scroll View外层创建panel

3在Panel 中添加Drag and  Drop Root(拖拽根) 脚本,Panel 的Depth 值比 Scroll View 要高,所以物体会在Scroll View上面,因此它可以从Scroll View 中拖拽出来,放开鼠标,Sprite就不见了,实际上它还在那个地方

     因为Scroll Vidw 中没有关于位置设定的的脚本,所以它会停留在我鼠标放开的位置

     在Scroll View里面添加一个空物体,空物体上添加脚本UIGride (网格),它会创建一个网格,并把它包含的子元素的位置进行排列
     选中Scroll View 下的所有Sprite元素,拖动到Gride上,然后在Gride物体上UIGrid脚本上右键->Execute(执行)选项,它会重新对子元素的位置进行排列


    这个间距可能大了,通过修改UIGrid脚本上的属性Cell weidth Height,在次点击Execute 就好多了


    在sprite上添加Drag and Item(拖拽物品)脚本,在拖拽它们,把它们拖拽出去然后放开,你会看到它自动回到Scroll View的尾部把它们拖拽出来,物体马上自动对齐,
    怎样看到轨迹呢,在UIGride脚本下勾选Smooth Tween (平滑补间动画) 选项,拖拽物体时,所有物体都有平滑的动画效果



    选中Scroll View 物体,在其脚本UIScroll View属性上右键 Reset Clillping  Position(重置剪辑位置),这样会把Scroll View 全部调整至初始化状态,基于Content Origin (内容原点) 中的设置


file:///C:/Users/ADMINI~1/AppData/Local/Temp/enhtmlclip/Image(6).png
    Content Origin 属性中 TopLeft(左上) 对于当前使用的Scroll View  它会自动忽略 TOp上的属性而自动向left(左)对齐Center(中),调整到中间位置


    在UIDrag Drop  Item 脚本中属性Restriction(限定) 选项


    Vertical(垂直的) 这个选项的功能是允许纵向拖拽物体,而横向拖拽则不允许, 这样就可以横向拖动Scroll View列表的物体,又可以向上下拖拽物体出列表


    如何把物体拖拽到某个地方并停留在那个位置上


    在UI Root 下创建一个Sprite,调整位置,并且是我想把物体拖拽到的位置


2对这个Sprite我们调整Depth属性,然后添加一个Box Collider
3在添加一个Drag and Drop Container (拖拽容器) 脚本


    如何拖放到那个位置时自动纠正整齐的放到容器里


    在Drag and Drop Container (拖拽容器) 脚本属性中 Reparent Target 选项,可以让你重新设置物体目标,当你拖入物体到Container 中,在UI Root 下创建一个Gride物体拖动到里面,在把Gride物体上的脚本属性smooth 平滑选上.

Arrangement：表格的显示方向

Sorting：对表格内的内容进行排序，Alphabetic（以字母顺序排序），Horizontal（水平方向进行排序），

Vettical（垂直方向进行排序），Custom（自定义的排序）

Max Per Line：表格每行显示多少个元素

Cell Widht：单个显示的宽度

Cell Height：单个显示的高度

Animate Smoothly：使用平滑动画过度效果

Keep Within Panel：保持在一个面板里显示

e.添加一些元素到UIGrid组下，并设置好位置，配合UIPanel的Soft Clip可

以让元素在一定的可范围内显示

更多精彩关注狗刨学习网：http://www.gopedu.com/