拖拽控件在移动端游戏的开发过程中特别常见,如好友列表、商城等等。NGUI3.0之前的版本与之后的版本在使用拖拽控件的脚本有很大差异。言归正传。本次我们要做一个可以上下拖动的面板。让我们先来看一下NGUI拖拽控件的结构。

  

  自上而下可以分为三层:

  拖拽层

  排列层

  拖拽子项

  拖拽层可以理解成在一个容器,放置一些可以拖拽的控件。排列层也是一个容器,对拖拽子项的进行格式化排列。拖拽子项可以是一系列的控件,如标签、图片或者一个组合的组件。拖拽的响应事件都是在拖拽子项中触发的。接下来看一下如何在Unity 3D中如何做一个拖拽效果。

  1、新建一个Sence。点击NGUI菜单的Create下选择2D UI。

  2、在UI Root下创建一个NGUI Panel。并命名为SliderPanel(拖拽层)。修改UIPanel中的Clipping的值为Soft Clip。然后出现其他属性,修改Size属性至合适大小(由于是上下拖动的面板,宽度需要略宽于拖拽子项的宽度,高度要长一些。)。 在属性面板中点击Add Componment,添加一个名称为Scroll View的脚本。添加完以后在属性面板中的名称变为UIScroll View,改变其Movement的值为Vertical(如果做的是左右拖动,则此处要改为Horizontal)。

  

 

  3、在SliderPanel下建立一个空的GameObject,命名为SliderGrid(排列层)。在属性面板中点击Add Componment,添加一个名称为Grid的脚本。修改Arrangement的属性为为Vertical(如果做的是左右拖动,则此处要改为Horizontal)。修改Cell Height。(这个高度需要与拖拽子项的高度类似,具体细节可以自己调整。)

  4、任意创建一些控件,当前我们就添加一个标签Label,命名为SliderChild(拖拽子项)。给SliderChild添加Box Collider碰撞器。将size调整到合适大小(这里关系到是否能够拖拽哦,有绿色边框可以注意一下)。给SliderChild添加一个名称为Drag Scroll View的脚本。

  5、多复制一些SliderChild,在SliderGrid下面。启动后点击标签,应该可以上下拖动了吧。

 

下次预告:进一步了解各个层的属性。添加拖动条。