【分享】Cocos2dx工具之Cocostudio界面编辑器二（作者：forward）在《【Cocos2dx工具——Cocostudio界面编辑器】一》博客结束的时候，Forward提出两个问题——1、有了编辑好的UI界面之后，我们如何把它们加载到程序中去呢？2、如何使对应的控件具有对应的功能呢？带着上面这两个问题，我们开始今天的博客之旅——《【Cocos2dx工具——Cocostudio界面编辑器】二》一、UI界面的加载OK，在上一篇博客结束的时候，我们已经用编辑器完成了一个自己的UI，如下图所示：图1首先我们创建一个新的工程——UIEditorDemo。从上一节的说明中我们看到，通过Cocostudio的界面编辑器编辑导出我们得出了一个如下图所示的文件结构：图2好的，下面我们需要的正式这个些资源，将他们拷贝到资源目录下。问题来了，有了这些资源与UI界面文件，难道要我们自己去实现解析、UI层级管理、事件响应实现？Cocostudio开发者怎么会这样对我们呢（^_^）？他们已经为我们完成了上述提到问题的解决方案，在Cocostudio官网上，可以找到对应代码下载（HYPERLINK"http://www.cocos2d-x.org/projects/studio/wiki/CocoStudio"\t"_blank"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界面编辑器】一》博客末尾提出的两个问题。至此我么可以说是已经做到了“知其然”，但是到底整个CocoGUILI