Question

怎么使用 CocoStudio UI 编辑器实现设置界面并且包括代码

Answer 1

2.1?首先建立主配置界面：

安装好 CocoStudio
程序，并准备好所需要的素材

建立新的项目，命名“ChaosFight”,设置分辨率（根据实际需要），这里手动填写分辨率。
导入游戏的素材到项目，在界面添加图片框控件，显示背景
根据需要添加控件，在这个主界面上我们添加了，一个图片框，下面四个文本按钮，再下面一排四个图片按钮，最下面是两个文本按钮和一个文本框（文本域）。

在编辑时，我们需要注意以下几点：

设置图片按钮之时，可以设置禁用时显示的图片。所有的可点击操作的控件，需要启用“交互”属性。
设置按钮属性 默认图片 与 点击效果图 的图片相同（或者不同，按下效果图如果不设置，实际操作按下也不显示，空白）
导出各部分资源文件

2.2?其次我们需要一个 “修改密码” 的二级 UI 界面：

新建立项目，并导入相关资源。
设计界面，如下图所示：

这里我们添加了三组密码框。而在设计这样三个类似控件集的时候，有个技巧，我们首先局部好一个个控件区域，如上“旧密码”区域，然后我们将相关的控件树结构，统一在一起，如图：

点击右侧对象结构，我们可以复制整个树枝“节点”，然后粘贴到树中，如上图，“新密码”区域，我们将相关的控件集合在“新密码”节点，然后拖动此节点，可以很好的完成内部元素的相对位置。
修改相关属性，命名规范并导出资源

3?编写代码控制页面逻辑

建立新的工程，引入 CocoGUILIB 扩展库，和 UI
编辑器导出的资源文件（工程建立步骤请实时关注官方说明，不同版本操作步骤不同，这里使用的时 2.1.4e
版本，请下载最新的版本库，以使用最简单的方法配置环境等。）
创建一个新的场景类，用于加载我们的 UI
资源，并编写相关逻辑，其关键代码如下（实现加载，跳转逻辑控制功能） 所有代码即工程资源:
?工程代码下载 地址：点击下载整个工程
#ifndef TestCpp_ChaosFight_h
#define TestCpp_ChaosFight_h

#include "cocos2d.h"
#include "CocosGUI.h"

USING_NS_CC;
USING_NS_CC_EXT;

class ChaosFightUI: public CCLayer{
public:
static CCScene* scene();
virtual bool init();
CREATE_FUNC(ChaosFightUI);

void tbChangePwdCallback(CCObject* pSender);
void tbBindingEmailCallback(CCObject* pSender);
void tbChangeRoleCallback(CCObject* pSender);
void tbLogoutCallback(CCObject* pSender);

void btnSoundEffectCallback(CCObject* pSender);
void btnMusicEffectCallback(CCObject* pSender);
void btnSavingElectricityCallback(CCObject* pSender);
void btnVideoCallback(CCObject* pSender);

void tbAboutCallback(CCObject* pSender);
void tbClearCacheCallback(CCObject* pSender);

void btnXCallback(CCObject* pSender);
void tbOkCallback(CCObject* pSender);

private:
UILayer* ul;

UILayer* ulPwd;

UIButton* btnX;
UITextButton* tbOk;

UITextField* tfOldPwd;
UITextField* tfNewPwd;
UITextField* tfNewPwdConfirm;

};

#endif
#include "ChaosFight.h"

CCScene* ChaosFightUI::scene(){
CCScene* scene = CCScene::create();
CCLayer* layer = ChaosFightUI::create();
scene->addChild(layer);
return scene;
}

bool ChaosFightUI::init(){
bool bRef = false;

do{
CC_BREAK_IF(! CCLayer::init());

ul = UILayer::create();
// 设置 UI 层的tag
this->addChild(ul, 0, 100);
ul->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFight_1/ChaosFight_1.json"));