Cocos2dx之使用UI庫結合cocostudio
使用cocostudio的UI編輯器編輯好UI介面,匯出UI檔案,直接在cocos2dx中使用,通過tag或者name來獲取到UI控制元件
1、編輯ui介面,直接用模板然後拖幾個控制元件過去

2、cocos2dx種載入這個編輯好的UI,必須先載入cocostudio庫,具體操作參照:
http://blog.csdn.net/yangxuan0261/article/details/21651779
//將編輯好的ui新增進去,是成員變數cocos2d::ui::Widget* layout;
layout = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("DemoLogin/DemoLogin.ExportJson");
layout->setPosition(Point::ZERO);
this->addChild(layout);
count = 0;
this->schedule(schedule_selector(HelloWorld::aaa), 1.0f);
//獲取ui裡的button,並新增監聽
Button* btn = (Button*)layout->getChildByName("login_Button");
btn->addTouchEventListener(this, toucheventselector(HelloWorld::buttonEvent));
//獲取ui裡的滑動條,並新增監聽
Slider* sl = (Slider*)layout->getChildByName("Slider_70");
sl->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::sliderPercentChangeEvent));
//獲取ui裡的滾動層
ui::ScrollView* sv = (ui::ScrollView*)layout->getChildByName("ScrollView_73");
sv->setBackGroundColor(cocos2d::Color3B::GREEN);
sv->setTouchEnabled(true);
sv->setInnerContainerSize(Size(250, 250));
sv->scrollToPercentBothDirection(Point(50, 50), 1, true);
sv->setBackGroundColorType(LAYOUT_COLOR_SOLID);
//獲取ui裡的核取方塊,並新增監聽
CheckBox* cb = (CheckBox*)layout->getChildByName("agree_CheckBox");
cb->setTouchEnabled(true);
cb->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));
//獲取ui裡的文字輸入,並新增監聽
TextField* tf = (TextField*)layout->getChildByName("name_TextField");
tf->setTouchEnabled(true);
tf->setMaxLengthEnabled(true);
tf->setMaxLength(10);
tf->setPasswordEnabled(true);
tf->addEventListenerTextField(this, textfieldeventselector(HelloWorld::textFiledEvent));
相應控制元件的回撥函式
//定時器,用來顯示進度條累加
void HelloWorld::aaa(float delta)
{
count += 5;
if (count <= 100)
{
LoadingBar* lb = (LoadingBar*)layout->getChildByName("LoadingBar_68");
lb->setPercent(count);
}
}
//圖片按鈕的回撥函式
void HelloWorld::buttonEvent(Ref* obj, TouchEventType eventType)
{
switch (eventType)
{
case TouchEventType::TOUCH_EVENT_BEGAN:
CCLOG("begin");
break;
case TouchEventType::TOUCH_EVENT_MOVED:
CCLOG("move");
break;
case TouchEventType::TOUCH_EVENT_ENDED:
CCLOG("end");
break;
case TouchEventType::TOUCH_EVENT_CANCELED:
CCLOG("cancel");
break;
default:
break;
}
}
//滑動條改變的回撥函式
void HelloWorld::sliderPercentChangeEvent(Ref*pSender, SliderEventType type)
{
if (type == SLIDER_PERCENTCHANGED)
{
Slider* pSlider = (Slider*)pSender;
int percent = pSlider->getPercent();
CCLOG("slider value=%d", percent);
}
}
//勾選的換掉函式
void HelloWorld::checkSelectEvent1(Ref *pSender, CheckBoxEventType eventtype)
{
//gui::UILabelAtlas * pLabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));
LabelBMFont* lbm = (LabelBMFont*)layout->getChildByName("agree_LabelBMFont");
switch (eventtype)
{
case CheckBoxEventType::CHECKBOX_STATE_EVENT_SELECTED:
CCLOG("you select");
/*const char* temp = { "you select" };
lbm->setString(temp);*/
break;
case CheckBoxEventType::CHECKBOX_STATE_EVENT_UNSELECTED:
CCLOG("you unselect");
/* const char* temp2 = "you unselect";
lbm->setString(temp2);*/
break;
default:
break;
}
}
void HelloWorld::textFiledEvent(cocos2d::Ref *pSender, cocos2d::ui::TextFiledEventType eventtype)
{
switch (eventtype)
{
case TextFiledEventType::TEXTFIELD_EVENT_ATTACH_WITH_IME:
CCLOG("attach with_ime");
break;
case TextFiledEventType::TEXTFIELD_EVENT_INSERT_TEXT:
CCLOG("insert text");
break;
case TextFiledEventType::TEXTFIELD_EVENT_DETACH_WITH_IME:
CCLOG("detach with_ime");
break;
case TextFiledEventType::TEXTFIELD_EVENT_DELETE_BACKWARD:
CCLOG("delete backward");
break;
default:
break;
}
}
void HelloWorld::pageViewEvent(Ref *pSender, PageViewEventType eventtype)
{
switch (eventtype)
{
case PageViewEventType::PAGEVIEW_EVENT_TURNING:
CCLOG("turning");
break;
}
}
3、執行效果
相關文章
- cocos2dx之引入Sqlite3資料庫SQLite資料庫
- cocos2dx之CCTextureCache
- cocos2dx之CCSpriteFrameCache
- Android UI美化之 shape的使用及其屬性總結AndroidUI
- cocos2dx之Box2D
- Kendo UI Grid 使用總結UI
- UI設計培訓之如何將設計理論與實踐相結合UI
- cocos2dx之儲存截圖圖片
- Element-UI個人使用總結UI
- Vue CLI 3結合Lerna進行UI框架設計VueUI框架
- Protobuf的使用,結合ideaIdea
- UI基礎(五)之代理、通知的小結UI
- Kendo UI Grid 批量編輯使用總結UI
- cocos2dx之CCUserDefault及其資料進行加密解密加密解密
- 微信UI設計之WeUI前端樣式庫UI前端
- LlamaIndex RAG 和ReAct結合使用AIIndexReact
- Docker結合.Net Core初步使用Docker
- `GitHub page` 和 `gitbook` 結合使用Github
- Github Copilot 結合python的使用GithubPython
- ts結合vue使用的感悟Vue
- intervention/image和oss結合使用
- SAP UI5 初學者教程之十七 - 聚合繫結在 UI5 複合控制元件中的使用試讀版UI控制元件
- 結合 UI 框架實現可配置 Vue 表單元件淺析UI框架Vue元件
- 結合element-ui 的el-upload元件支援分片上傳UI元件
- UI2CODE再進化!結合Redux的框架升級!UIRedux框架
- 怎麼結合 airtest 和 appium 做 app 的 ui 自動化AIAPPUI
- 微服務之Eureka(二)服務中心互相註冊-Ribbon的結合使用微服務
- XGBoost類庫使用小結
- 微信小程式常見的UI框架/元件庫總結微信小程式UI框架元件
- Celery #4 結合Flask和apscheduler使用Flask
- 今日教學:RestTemplate 結合 Ribbon 使用REST
- cocos2dx之獲取當前的輸入法語言
- Vuex與Busemit結合使用淺談Vuex使用方式VueMIT
- 使用 generator-easy-ui5 快速建立 SAP UI5 應用的工程結構UI
- Oracle之Hint使用總結Oracle
- Spring之RestTemplate使用小結SpringREST
- iOS開發UI篇--仿射變(CGAffineTransform)使用小結iOSUIORM
- Cax + Matter-js 物理引擎結合使用JS
- 07_NET中Ocelot結合Consult使用