CocoStudio练习笔记2 - UI编辑器

版本号：v1.2.0.1

UI编辑器：支持目前Cocos2D-X的所有控件，同时支持碎图合并以及自定义UI。

 

先看导出工程后的目录结构：（多了一个文件夹Export）

DemoHead_UI.xml.ui为UI编辑器的工程文件；

对比Export文件夹和场景编辑器中使用UI组件的情况：

显然，在场景编辑器中使用UI组件时，需要将Export目录下的文件添加到Resources目录下使用。

 

当然，也可以直接在代码中使用UI组件。首先将Export文件夹中所有文件放到Resources中，然后就可以在代码中读取ExportJson文件使用UI了：

TouchGroup* ul = TouchGroup::create();
ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("DemoLogin.ExportJson"));
this->addChild(ul);

那么如何在代码中实现交互呢？

比如点击右上角按钮关闭程序。

有两种方法可以获得widget：by name和by tag。

 

// get a widget by Name
    UIButton* closeBtn = static_cast<UIButton*>(ul->getWidgetByName("close_Button"));
    closeBtn->addTouchEventListener(this, toucheventselector(HelloWorld::touchEnvent));

使用 addTouchEventListener 可以为widget绑定touch监听器。

selector callback如下：

void HelloWorld::touchEnvent(CCObject* pSender, TouchEventType type){
    CCLog("touch ok--------");
    switch(type){
    case TOUCH_EVENT_ENDED:
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WINRT) || (CC_TARGET_PLATFORM == CC_PLATFORM_WP8)
        CCMessageBox("You pressed the close button. Windows Store Apps do not implement a close button.","Alert");
#else
        CCDirector::sharedDirector()->end();
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
        exit(0);
#endif
#endif
        break;
    default:
        break;
    }

注意，回调选择器中，使用一个switch来判断touch event的类型，然后做出不同响应！

这里注意UIWidget以TouchGroup为友元类，而TouchGroup继承自CCLayer，实现了touch事件的处理。（Cocos2dx touch事件参考：blog.csdn.net/ym19860303/article/details/8477567）

 

前面说了，UI编辑器支持目前Cocos2D-X的所有控件，主要有：

按钮、复选框、图片、数字标签、自定义字体、进度条、滑动条、文本框、输入框；

(UIButton, UICheckBox, UIImageView, UILabelAtlas, UILabelBMFFont, UILoadingBar, UISlider, UILabel, UIField, UIPanel, UIScrallView, UIListView, UIPageView)

容器层、滚动层、列表容器、翻动页面 等13种UIWidget。关于他们的具体介绍参照CocoStudio帮助手册。

 

参考：www.cocoachina.com/bbs/read.php?tid=161616