ui界面如何生成代碼

1. 怎麼使用 cocostudio ui 編輯器實現設置界面並且包括代碼

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"));

// 獲得各個控制項，並添加點擊事件
UITextButton* tbChangePwd = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangePwd"));
UITextButton* tbBindingEmail = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbBindingEmail"));
UITextButton* tbChangeRole = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbChangeRole"));
UITextButton* tbLogout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbLogout"));

UIButton* btnSoundEffect = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSoundEffect"));
UIButton* btnMusic = dynamic_cast<UIButton*>(ul->getWidgetByName("btnMusic"));
UIButton* btnSavingElectricity = dynamic_cast<UIButton*>(ul->getWidgetByName("btnSavingElectricity"));
UIButton* btnVideo = dynamic_cast<UIButton*>(ul->getWidgetByName("btnVideo"));

UITextButton* tbAbout = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbAbout"));
UITextButton* tbClearCache = dynamic_cast<UITextButton*>(ul->getWidgetByName("tbClearCache"));

// 設置字體顏色
tbChangePwd->setTextColor(0, 0, 0);
tbBindingEmail->setTextColor(0, 0, 0);
tbChangeRole->setTextColor(0, 0, 0);
tbLogout->setTextColor(0, 0, 0);

tbAbout->setTextColor(0, 0, 0);
tbClearCache->setTextColor(0, 0, 0);

// 為控制項添加處理事件
tbChangePwd->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangePwdCallback));
tbBindingEmail->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbBindingEmailCallback));
tbChangeRole->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbChangeRoleCallback));
tbLogout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbLogoutCallback));

btnSoundEffect->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSoundEffectCallback));
btnMusic->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnMusicEffectCallback));
btnSavingElectricity->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnSavingElectricityCallback));
btnVideo->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::btnVideoCallback));

tbAbout->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbAboutCallback));
tbClearCache->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbClearCacheCallback));

bRef = true;
}while(0);
return bRef;
}

void ChaosFightUI::tbChangePwdCallback(cocos2d::CCObject *pSender){
// 創建載入修改密碼界面 ulPwd 作為類成員屬性，以便重用
ulPwd = UILayer::create();
ulPwd->addWidget(CCUIHELPER->createWidgetFromJsonFile("ChaosFightPassword_1/ChaosFightPassword_1.json"));
this->addChild(ulPwd);
ulPwd->setAnchorPoint(CCPoint(0.5,0.5));
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
ulPwd->setPosition(CCPoint(winSize.width / 2 - 250, winSize.height / 2 - 180));

// 獲取點擊確定按鈕
tbOk = dynamic_cast<UITextButton*>(ulPwd->getWidgetByName("tbOk"));
tbOk->addReleaseEvent(this, coco_releaseselector(ChaosFightUI::tbOkCallback));
tbOk->setTextColor(0, 0, 0);

tfOldPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfOldPwd"));
tfNewPwd = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwd"));
tfNewPwdConfirm = dynamic_cast<UITextField*>(ulPwd->getWidgetByName("tfNewPwdConfirm"));

tfOldPwd->setColor(ccc3(0, 0, 0));
tfNewPwd->setColor(ccc3(0, 0, 0));
tfNewPwdConfirm->setColor(ccc3(0, 0, 0));

ul->setTouchEnabled(false);

}

void ChaosFightUI::tbBindingEmailCallback(cocos2d::CCObject *pSender){
CCMessageBox("綁定郵箱", "title");
}

void ChaosFightUI::tbChangeRoleCallback(cocos2d::CCObject* pSender){
CCMessageBox("切換角色", "title");
}

void ChaosFightUI::tbLogoutCallback(cocos2d::CCObject *pSender){
CCMessageBox("注銷", "title");
}

void ChaosFightUI::btnSoundEffectCallback(cocos2d::CCObject *pSender){
CCMessageBox("音效", "title");
}

void ChaosFightUI::btnMusicEffectCallback(cocos2d::CCObject *pSender){
CCMessageBox("音樂", "title");
}

void ChaosFightUI::btnSavingElectricityCallback(cocos2d::CCObject *pSender){
CCMessageBox("省電", "title");
}

void ChaosFightUI::btnVideoCallback(cocos2d::CCObject *pSender){
CCMessageBox("片頭", "title");
}

void ChaosFightUI::tbAboutCallback(cocos2d::CCObject *pSender){
CCMessageBox("關於", "title");
}

void ChaosFightUI::tbClearCacheCallback(cocos2d::CCObject *pSender){
CCMessageBox("清楚緩存", "title");
}

void ChaosFightUI::btnXCallback(cocos2d::CCObject *pSender){
CCMessageBox("btnX", "title");
}

void ChaosFightUI::tbOkCallback(cocos2d::CCObject *pSender){
// 獲取文本框值，並且列印
const char* value = tfOldPwd->getStringValue();
CCLog(value);
ul->setTouchEnabled(true);
this->removeChild(ulPwd);
}

最後運行效果如下：二級 UI
界面：文本輸入框控制項：

2. android studio 做ui界面都是用手工敲代碼嗎

基本都是手工敲代碼，這是沒辦法的辦法，androidstudio的拖拽控制項做的太爛，會把整個代碼層搞亂，以後如果要修改根本捋不明白，而且許多控制項屬性還是在代碼通過提示好找。不知道你使的是哪個版，顏色是在textcolor左側能選，但顏色主要是美工提供。