NGUI scroll view制做

一、建立scroll view：自己是个PANEL

二、scroll view下建立Grid：

 　　UIGrid各项设置：

　　　　Arrangement：表格的显示方向

　　　　Sorting：对表格内的内容进行排序，Alphabetic（以字母顺序排序），Horizontal（水平方向进行排序），Vettical（垂直方向进行排序），Custom（自定义的排序）

　　　　Cell Widht：单个显示的宽度

　　　　Cell Height：单个显示的高度

三、实现鼠标点击能够移动scroll view中内容：

　　为Panel添加脚本：UISceollView.cs并设置UIPanel组件里的选项：

　　

　　Clipping设为Soft Clip，设置size为scroll view内容的显示区域；

　　UIPanel各项设置：

　　　　Clipping：面板剪切，分为None(无剪切效果），Soft Clip（软剪切，有边缘模糊效果），Alpha Clip（硬剪切，边缘锋利）

　　　　Constrain But Don't Clip（显示全部内容，可是是剪切区域存在）

　　　　Advanced Options：高级选项

　　　　Render Q：面板里全部图片的渲染质量，Automatic（自动适应），Normal（正常），Explicit（用户指定）

　　　　Normals：法线贴图

　　　　Cull：若是用鼠标手动组件则剔除组件

　　　　Visible：面板是否在可视范围内

　　　　Offset：经过位置偏离锚点

　　　　Static：若是是没移动的组件，也进行代码检测，通常是用于ScrollView

　　　　Panel Tool：是否显示面板工具

　　　　Show Draw Calls：显示渲染的详细信息

　　运行能够看到内容已经能够按序显示，可是移动鼠标点击时scroll view里面的内容没法根据鼠标的动做来移动，须要为UIGrid下的sprite添加组件；

四、为UIGrid下的内容添加根据鼠标动做来移动须要的组件：

　　须要添加脚本：UIDragScrollView.cs

　　须要添加组件：Box Collider；

 　　Box Collider大小通常和UIGrid中的Cell Width和Cell Height保持一致；

　　试运行，就能够看到当鼠标至于Pnael区域里面时，滚动鼠标滑轮，sprite内容会切换显示；

五、为sprite根据鼠标滚轮滑动时显示居中效果：

　　为UIGrid添加脚本组件：UICenterOnChild.cs

　　添加脚本组件后可能显示的效果以下所示：

　　

　　修改Panel和UIGrid的相应设置：

　　　　Panel——UIScrollView——Content Origin：Center

　　　　UIGrid——UIGrid（Script）——Pivot：Left ，修改后效果以下：

　　　　　　

　　这样，当鼠标滚轮滑动时，偏移的sprite会自动调整使离中间位置最近的一个sprite调整到中间位置；

 六、当鼠标点击某一项时使之居中：

　　为UIGrid中的每一项添加脚本：UICenterOnClick.cs便可

　　

注意事项：

　　一、当为scroll view中添加居中显示时，左侧或者右侧可能会有空白，以下图所示：

　　　　

　　　　

　　即选中左侧第一个时，左侧会空出来，选择右侧第一个时，右侧会留空白