【分享】Cocos2dx工具之Cocostudio界面编辑器二

丹尼迪恩

（作者：forward）在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客结束的时候，Forward提出两个问题——1、有了编辑好的UI界面之后，我们如何把它们加载到程序中去呢？2、如何使对应的控件具有对应的功能呢？
         带着上面这两个问题，我们开始今天的博客之旅——《【Cocos2dx工具——Cocostudio界面编辑器】二》


一、UI界面的加载
OK，在上一篇博客结束的时候，我们已经用编辑器完成了一个自己的UI，如下图所示：



图 1
首先我们创建一个新的工程——UIEditorDemo。
         从上一节的说明中我们看到，通过Cocostudio的界面编辑器编辑导出我们得出了一个如下图所示的文件结构：



图 2
         好的，下面我们需要的正式这个些资源，将他们拷贝到资源目录下。
         问题来了，有了这些资源与UI界面文件，难道要我们自己去实现解析、UI层级管理、事件响应实现？Cocostudio开发者怎么会这样对我们呢（^_^）？他们已经为我们完成了上述提到问题的解决方案，在Cocostudio官网上，可以找到对应代码下载（CocoGUILIB.zip）
         将对应该的UI层级相关的代码导入我们上面创建的UIEditorDemo工程中，（并按照编译报告添加对应的头文件路径即可）
         完成上面的工作之后，在我们的源文件中添加如下代码：
                   COCOUISYSTEM->resetSystem(this);

                   COCOUISYSTEM->replaceUISceneWithFile(this, "NewProject.json", 1, true, true,true);
         包含对应头文件即可。
         下面就是见证奇迹的时刻——



图 3
         运行程序，我们看到如上图3的运行结果，这不就是我们前天编辑的UI界面吗。不错，加载就是这么简单。

二、UI事件的响应：
加载出我们编辑好的UI界面只是第一步，一个不能响应事件的界面是毫无意义的，接下来我们就需要知道如何让这个界面能够响应我们的操作，来完成玩家的交互。
好的，我们这就进入主题
首先我们需要理解UI层面控件的操作流程——只需要获取UI层面这个控件，给它绑定一个事件的回调，然后在回调函数中实现我们的功能即可
这里我们拿ImageView的点击放大与还原效果来做一次演示，其他类似。
操作ImageView（上面的头像就是使用了ImageView）很简单，代码如下：
           cs::CocoImageView* imageView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));
           imageView->addPushDownEvent(this, coco_pushselector(HelloWorld::ScaleTo2Size));
           imageView->addReleaseEvent(this, coco_releaseselector(HelloWorld::ScaleResume));
好的，现在我们就需要再添加两个函数ScaleTo2Size和ScaleResume即可，然后这两个函数中分别对这个控件做扩大和还原处理——
voidHelloWorld::ScaleTo2Size(CCObject* pSender)
{
      cs::CocoImageView* imageView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));
      imageView->setScale(2.0f);
}

voidHelloWorld::ScaleResume(CCObject* pSender)
{
      cs::CocoImageView* imageView = (cs::CocoImageView*) (COCOUISYSTEM->getWidgetByName("ImageView_Header"));
      imageView->setScale(1.0f);
}
如上所示，头像控件的名称Forward已经在UI编辑器中修改为“ImageView_Header”，否会找不到的。
看看效果吧~~
原始头像大小如下：



图 4



图 5
确实按照我们的预期进行了……
在这篇博客中，我们已经解决了在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客末尾提出的两个问题。至此我么可以说是已经做到了“知其然”，但是到底整个CocoGUILIB是如何工作的呢？从文件解析到控件创建，其中的Touch事件又是如何接收与处理呢？CocoGUILIB的结构是什么样子呢？我们现在只是管中窥豹，见其一角，未尽全貌，要是解决了以上提及的问题，或许才可以说“知其所以然”。
对于以上问题，Forward会在《【Cocos2dx工具——Cocostudio界面编辑器】三》中做进一步深入学习与分享~~