NGUI学习笔记（六）：ScrollView、Grid和Table

下面咱们来看看游戏UI开发中比较核心的开发，我称为列表开发，好比背包和各类形式不一的列表等，下面咱们来看几个具体的样例：

 

基本上就是一些重复的制做好的多个UI控件进行排列，同时能够支持滚动，固然，高级一点的话也可能须要支持拖拽操做等。

下面咱们来学习一下这些功能该如何使用NGUI实现，最后再给出一个具体的示例。

基础控件

NGUI已经帮助咱们设计好了相关的组件，因此咱们要实现上面的效果不须要从头开始，只要学会使用NGUI提供的相关的脚本便可，很是简单。

ScrollView

即滚动视口组件，当咱们须要对一个或多个对象在一个指定的区域内进行滚动时，可使用该组件。

咱们能够在任意的UI下添加一个ScrollView，添加好的ScrollView咱们发现其绑定了2个脚本，分别以下：

UIPanel

UIPanel组件主要是能够实现剪辑移出视口的内容，下面咱们看看主要使用到的参数的意思：

Clipping：剪辑类型

1. None：不剪辑，移出可视区域的图像任然可见。
2. Texture Mask：能够选择一张贴图做为遮罩。
3. Soft Clip：柔和剪辑，默认选择该模式，咱们一会会集体说它。
4. Constrain but don`t Clip：约束不能拖拽出视口可是不进行剪辑。

若是选择了Soft Clip则会出现一些可选项，以下：

1. Offset：视口偏移量。
2. Center：和Offset效果一致。
3. Size：视口尺寸。
4. Softness：剪辑边缘柔和度。

UIScroll View

本脚本用来控制视口滚动功能，咱们具体看下核心的属性：

1. Content Origin：滚动起点，默认为左上角。
2. Movement：滚动方向：Horizontal水平方向、Vertical垂直方向、Unrestrained自由拖动、Custom自定义方向。
3. Drag Effect：拖动效果：None无效果、Momentum带惯性的拖动、MomentumAndSpring惯性和弹性的拖动（拖动越界后会自动弹回到正常的位置）。
4. Scorll Wheel Factor：滚轮因子，值越大滚动越快。
5. Momentun Amount：惯性因子，值越大滚动时惯性越大。
6. Restrict Within Panel：拖拽是否被限制在视口内，默认选中便可。
7. Cancel Drag If Fits：但恰好合适视口时则退出拖拽。
8. Smooth Drag Start：勾选时拖拽开始会有一种缓冲的感受，不勾选则开始拖动就是鼠标移动的速度。
9. IOS Drag Emulation：模拟IOS的拖拽效果，能够加强拖拽体验。
10. Scroll Bars：滚动条属性容许咱们本身设置滚动条，留空则表示不使用滚动条。

咱们单独在看看Scroll Bars的Show Condition属性：

1. Always：老是显示滚动条。
2. Only If Need：当须要显示时出现。
3. When Dragging：拖拽时出现。

Grid

下面咱们看看Grid组件，当咱们须要对多个UI进行排列时就须要用到这个组件了。

通常咱们不会直接添加一个Grid对象（由于Grid对象须要依靠父级对象来肯定大小，自身是不能设定尺寸的），咱们能够先建立一个Invisible Widget组件，再在该对象下建立Grid组件，最后把须要排序的组件拖入该Grid中便可。

当咱们须要在编辑界面就将子对象排列好时能够点击设置菜单，以下：

咱们来看看Grid提供的属性：

1. Arrangement：网格排列方向，Horizontal水平排列、Vertical垂直排列、Cell Snap按子项当前的位置对齐子项。
2. Cell Width：子项格子宽度。
3. Cell Height：子项格子高度。
4. Column Limit：子项最大数量。
5. Sorting：排序方式：None按照Index排序、Alphabetic按照名字进行排序、Horizontal和Vertical按照localPosition进行的排序、Custom本身实现的排序方式。
6. Pivot：网格起始点锚点。

其它项通常使用默认值便可。

Table

Grid是对子项进行水平或垂直的排序，而Table是对子项进行可换行的排序。

咱们来看看Table的属性：

1. Columns：列数，超过该数目会添加一行。
2. Direction：行添加方向，Down向下添加、Up向上添加。
3. Sorting：排序方式：None按照Index排序、Alphabetic按照名字进行排序、Horizontal和Vertical按照localPosition进行的排序、Custom本身实现的排序方式。
4. Pivot：网格起始点锚点。
5. Cell Alignment：格子对齐点。
6. Padding：间隔。

其它项通常使用默认值便可。

简单的列表（Demo1）

这里咱们就快速的过一遍，示例工程文件会在本系列的结尾给出。

下面咱们基于上面学习的组件实现一个简单的列表：

1. 咱们在UI中建立一个ScrollView并调整其大小，设置滚动方向为垂直；
2. 在ScrollView中添加一个Grid组件，设置其排序方向为垂直，同时设置其Pivot为Top；
3. 在Grid组件中添加一个Sprite组件命名为Item，在Sprite组件上添加一些列表和一个按钮；
4. 经过复制建立多个Item到Grid组件中；

实现滚动效果

给每一个Item组件都添加Box Collider和Drag Scroll View组件便可；

添加自定义滚动条

NGUI给咱们提供了一些已经制做好的预制件，好比水平和垂直滚动条，咱们能够直接使用；

1. 点击菜单栏“NGUI”->“Open”->“Prefab Toolbar”；
2. 在打开的窗口中选择“Simple Vertical Scroll Bar”，将其拖拽到场景中摆好位置；
3. 选中咱们以前建立的Scroll View对象，设置其Scroll Bar属性中的Vertical为咱们刚建立的滚动条便可进行关联；

运行一下，咱们简单的列表就完成了，虽然尚未任何的功能。