Cocos2dx|Cocos2dx之使用UI库结合cocostudio cocos2dx|cocostudio|ui|cocos2dx

使用cocostudio的UI编辑器编辑好UI界面，导出UI文件，直接在cocos2dx中使用，通过tag或者name来获取到UI控件
1、编辑ui界面，直接用模板然后拖几个控件过去
文章图片

2、cocos2dx种加载这个编辑好的UI，必须先加载cocostudio库，具体操作参照： 【Cocos2dx|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=https://www.it610.com/article/%d", percent); } }//勾选的换掉函数 void HelloWorld::checkSelectEvent1(Ref *pSender, CheckBoxEventType eventtype) { //gui::UILabelAtlas * pLabelAtlas = dynamic_cast(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、运行效果