Unity3d-UI系统之ScrollView选择板

导语

这次作业主要是练习UI制作，我使用了NGUI来实现了一个ScrollView选择板效果。实例效果如下：http://www.tasharen.com/ngui/example7.html （使用IE11及*）
主要实现的效果如下:

• 选择板可以拖动
• 鼠标hover到item上面，出现item变大的动画效果

视频演示

先上最终效果，后面是步骤分析：
https://www.bilibili.com/video/av24425629/

实现过程

选择板的实现分为两个部分：一是选择框及里面的选项内容；一是选择框后面的背景栏。

选择面板的实现

这个作业的难度在于控制选择面板的显示，这里我利用了一个画布和UIDragCamera来实现。首先创建一个空对象，并且添加一个UIRoot脚本，用于控制UI视口大小。然后在其内部放置一个摄像机，添加UIViewPort和UIDraggableCamera脚本，并设置viewport大小。UIViewport组件是实现该摄像机视图在主UICamera上显示，UIDraggableCamera的功能是确定主要拖动的父物体。如下图：

接下来就可以来实现一个水平的item列表。首先放置一个UIAnchor对象，用来固定game objects在屏幕或者其他widgets的某一边或者某一个角。这里我把它设在主摄像机*，如下图：

接下来在UIAnchor对象中放置一个UITable，以排列所有的item。这里Pivor和Cell Alignment属性用于设置对齐方式，每个子节点以Pivor的位置进行排列。

对于每一个item，为其添加一个UIDragCamera脚本用来与内部摄像机绑定，然后再添加一个UIButtonScale脚本，实现hover这个item的时候，模仿button有一个放大的效果。如下图设置，hover后XYZ均变为原来的1.1倍。每个item的内部结构如右图：

实现思路是，利用三个Label来显示相应的文字信息，然后创建两个NGUI的Sprite对象，一个当作背景，一个放置item的图像。设置好相应的属性后复制粘贴再多添加几个item，更改一下位置即可。此时可以得到以下结果：

背景栏

背景栏的布局方式与选择板类似，主体是面板UIPanel来收集和管理它下面所有widget的组件，并设置视口大小等。内部添加一个摄像机，作为整个程序的主摄像机，相关设置如下：

同样创建一个UIAchor，使其放置到主摄像机*。背景栏的结构如右图:

其他部分实现与前面的Label+Sprite背景道理一样，就不重复描述了。这里我所使用的一些文字摘抄于示例网站~

总结

这次作业麻烦的是NGUI的下载~NGUI官网访问真的十分感人，网上下载旧版本会报很多错误~找了好久最后找了3.11的版本，与unity 2017版本兼容。主要还是练习使用NGUI的各种组件，参考了网上博客和一些示例代码。

源码地址：https://github.com/CarolSum/Unity3d-Learning/tree/master/hw8