NGUI官网示例7-- ScrollView讲解(三)

这里官方例子中的最下角，有两个元件，一个是用于控制item中心显示的check box，还有一个是实现窗口旋转的功能。还有右上角的Logo图标，鼠标点击它是会自动弹出来，鼠标移开后又会自动弹回原位。现在我们来分别实现它。

   在 Camera 下创建一个 panel 。并在这个 Panel 下创建一个空游戏对象，并命名为 Anchor-Bottom ， reset 一下，为其添加一个 Anchor （ Ngui->Attach a Anchor ），把 UIAnchor 组件中的 Side 参数设置成 Bottom 。在这个 Anchor-Bottom

下创建一个 Checkbox ，参数如下：

  选择 checkbox 下的 background ，设置其 Color Tint 为木黄色；选择 checkmark, 设置其 Color Tint 颜色为绿色， Label 的文本为 Center on Item ，最终效果如图所示：

选择 Panel-Window ，为其添加一个高亮背景。在 Panel-window 下创建一个 SlicedSprite 元件，参数为 Template 为 Sliced Sprite ， Sprite 为 Row Outline 。创建完成之后设置其大小为 x158 ， y258 ， ColorTint  为 R32 ， G22 ， B12 ；调整它的位置，最终效果如图所示：

设置Checkbox。首先选择checkbox，把UICheckbox组件中的Starts Checked取消掉。为checkbox添加一个CheckboxComponent组件（Component->NGUI->Interaction-> CheckboxComponent）,把UIGrid赋值给该组件的Target；再添加一个CheckboxCompo nent，把SlicedSprite（Row Outline）赋值给它的Target，这样可以打开或者关闭该对象。点击播放，现在可以通过checkbox控制那个高亮背景的显示与关闭，但是定位还没有实现，如图所示：

选择 UIGrid ，为其添加一个 CenterOnChild 组件（ Component-> NGUI -> Interaction -> CenterOnChild ） , 并关闭它，（这里有一个细节， checkbox controller component 在控制 target 对象的组件开关时，它只对第一个组件进行控制，所以，我们要把 UICenterOnChild 放在 UIGrid 组件之前，这个时候你可能需要先删除 UIGrid ，然后再添加 CenterOnChild ，再添加 UIGrid ，再把 UIGrid 对象重新赋值给 Checkbox 的 Checkbox Control Component 中的 target 中）如图所示：

使用 Ctrl+D 复制 Anchor-Bottom ，改名为 Anchor-BottomRight, 删除掉其下的 checkbox ，把 Side 设置成 BottomRight 。接着，为其添加一个 Button 元件，并设置它的参数和调整它的位置，使用该按钮来旋转窗口，如图所示：

先选择WindowRoot，为其添加一个TweenRotation组件（Component-> NGUI -> Tween -> Rotation），同时关闭该组件。并设置该组件的属性（这样便给WindowRoot设置了一个旋转的Tween动画，我们将用按钮来触发）如图所示：

选择 Button ，为其添加一个 ButtonTween 组件（ Component-> NGUI -> Interaction -> Button Tween ），把 WindowRoot 赋值给该组件的 Target ， PlayDirection 为 Toggle （可以实现翻转，不然你用 forward 只能点一次了，就再也回不去，可以试试）。注意，播放 Animation 用 ButtonPlayAnimation 组件，播放 Tween 动画用 ButtonTween 组件。如图所示：

现在点击播放，点击ClickMe按钮，看窗口旋转起来了，再点一下Clickme按钮。又转回来了！
下面来实现Logo的弹出与弹入效果。使用Ctrl+D复制一个Anchor-BottomRight，并把名字改为Anchor-TopRight并把下面的Button删除掉。接着把Side设置成TopRight。如图所示：

  创建一个 Sprite 组件，其参数为

为该sprite添加一个TweenPosition组件（Component->NGUI->Tween->position），设置该组件的参数为，并关闭该组件：

为Sprite添加一个Button Tween组件（Component->NGUI->Interaction -> Button Tween）。设置参数为TweenTarget为Sprite，Trigger为OnClick，PlayDirection为Toggle，如图所示：

最后，为该Sprite添加一个Collider（NGUI->Attach a Collider）。点击播放，哈哈，Logo的弹出和弹入效果实现了！

这个教程写得好累，休息下！哈哈