使用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、运行效果