NGUI官网示例9 – QuestLog(可展开元件)

NGUI官网示例9 – QuestLog
这个示例展示的是可伸缩的界面，点击没一个Quest，可以把里面的内容展开。如图所示：

描述:请输入描述

图片:1.png

首先先制作出基本的界面，这里就不再赘述（可以参考我上面的系列教程），在这里提一下，在制作背景时，可以使用Create a Widget创建出一个SimpleTexture，贴上合适的材质之后，不要缩放和移动它，为它添加一个Stretch组件（Component->NGUI->UI -> Stretch），该组件可以根据窗口的大小自动调整尺寸。注意该层级结构，最终效果如图所示

描述:请输入描述

图片:2.png

接下来就是这个示例的重头戏了。选择Quest Log，并为其创建一个新的Panel（NGUI->Create a panel），并命名为SubPanel，如图所示

描述:请输入描述

图片:3.png

选择SubPanel，创建一个空的游戏对象，作为它的子物体，并命名为Table。该对象将来用于排列它的所有子对象的位置，现在暂时不管。如图所示

描述:请输入描述

图片:4.png

选择Table对象，创建一个空的游戏对象，作为它的子物体，并命名为Quest1，reset一下。如图所示

描述:请输入描述

图片:5.png

选择Quest1，为其添加一个Lable和一个SlicedSprite，最终效果如图所示

描述:请输入描述

图片:6.png

选择Quest1，创建一个空的游戏对象，并命名为Tween，成为它的子对象，reset一下，并在Tween下创建一个Label，并输入文字描述，最终效果如图所示

描述:请输入描述

图片:7.png

首先先把Tween对象的Enable关掉，再使用同样的方式再制作出三个这样的Quest出来，我这里偷懒，直接使用Ctrl+D复制出2个来，并命名为Quest2和Quest3。不用去管它的位置，如图所示

描述:请输入描述

图片:8.png

选择Table对象，为其添加一个Table组件（Component->NGUI->Interaction->Table），并设置Colomn参数为1，Direction为Down，Padding的Y为4，Sorted、Hide Inactive和Keep Within Panel勾选上，点击播放之后，其子物体就会自动地排列了，神奇！（大家从英文上应该能看出这些参数的意思吧，这里不赘述了）。如图所示

描述:请输入描述

图片:9.png

接下来实现点击这些Quest时，会自动展开其下面的说明。选择Quest1下面的Tween对象，为其添加一个TweenScale组件（Component->NGUI->Tween->Scale），并设置其参数如图所示

描述:请输入描述

图片:10.png

选择Quest1下面的SlicedSprite，为其添加一个Trigger组件（NGUI->Attach a collider）用来接收输入事件，接着为其添加一个Button Tween组件（Component-> NGUI->Interaction->Button Tween）这个组件很熟悉吧，对其他的几个Quest进行类似的操作，点击播放，鼠标放在Quest上点击，ok，实现了！其参数如下

描述:请输入描述

图片:11.png

如果你三个Quest同时展开，会发现，此时内容都漏出来了，呵呵，霸气外漏！我们来解决这个问题。选择SubPanel，设置其Panel组件中的Clipping为SoftClip，并设置它的size中x为420，Y为290，softness为X为1，Y为8，然后点击再播放，哈，内容在这个设置的范围内了。如图所示

描述:请输入描述

图片:12.png

问题又来了，我想看下面的内容呢。那么我们可以给他添加一个ScrollBar滚动条。在Quest Log下创建一个垂直ScrollBar元件，我们现在想当内容超出panel时scollBar才显示出来，我们设置其Alpha为0，最后参数如图所示

描述:请输入描述

图片:13.png

现在来连接SubPanel和ScrollBar。选择SubPanel，为其添加一个DraggablePanel组件（Component-> NGUI->Interaction->DraggablePanel）。然后把ScrollBar对象赋值给VerticalScrollBar，如图所示

描述:请输入描述

图片:14.png

OK，其拖动功能就搞定了！

这个示例当中还有一个拖动窗口的效果，这里效果在以前的教程中已经讲过。