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

[cpp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //将编辑好的ui加入进去。是成员变量cocos2d::ui::Widget* layout;  
  2. layout = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("DemoLogin/DemoLogin.ExportJson");  
  3. layout->setPosition(Point::ZERO);  
  4. this->addChild(layout);  
  5.   
  6. count = 0;  
  7. this->schedule(schedule_selector(HelloWorld::aaa), 1.0f);  
  8.   
  9. //获取ui里的button，并加入监听  
  10. Button* btn = (Button*)layout->getChildByName("login_Button");  
  11. btn->addTouchEventListener(this, toucheventselector(HelloWorld::buttonEvent));  
  12.   
  13. //获取ui里的滑动条，并加入监听  
  14. Slider* sl = (Slider*)layout->getChildByName("Slider_70");  
  15. sl->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::sliderPercentChangeEvent));  
  16.   
  17. //获取ui里的滚动层  
  18. ui::ScrollView* sv = (ui::ScrollView*)layout->getChildByName("ScrollView_73");  
  19. sv->setBackGroundColor(cocos2d::Color3B::GREEN);  
  20. sv->setTouchEnabled(true);  
  21. sv->setInnerContainerSize(Size(250, 250));  
  22. sv->scrollToPercentBothDirection(Point(50, 50), 1, true);  
  23. sv->setBackGroundColorType(LAYOUT_COLOR_SOLID);  
  24.   
  25. //获取ui里的复选框，并加入监听  
  26. CheckBox* cb = (CheckBox*)layout->getChildByName("agree_CheckBox");  
  27. cb->setTouchEnabled(true);  
  28. cb->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));  
  29.   
  30. //获取ui里的文字输入，并加入监听  
  31. TextField* tf = (TextField*)layout->getChildByName("name_TextField");  
  32. tf->setTouchEnabled(true);  
  33. tf->setMaxLengthEnabled(true);  
  34. tf->setMaxLength(10);  
  35. tf->setPasswordEnabled(true);  
  36. tf->addEventListenerTextField(this, textfieldeventselector(HelloWorld::textFiledEvent));  

对应控件的回调函数

[cpp] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //定时器，用来显示运行进度条累加  
  2. void HelloWorld::aaa(float delta)  
  3. {  
  4.     count += 5;  
  5.     if (count <= 100)  
  6.     {  
  7.         LoadingBar* lb = (LoadingBar*)layout->getChildByName("LoadingBar_68");  
  8.         lb->setPercent(count);  
  9.     }  
  10. }  
  11.   
  12. //图片button的回调函数  
  13. void HelloWorld::buttonEvent(Ref* obj, TouchEventType eventType)  
  14. {  
  15.     switch (eventType)  
  16.     {  
  17.     case TouchEventType::TOUCH_EVENT_BEGAN:  
  18.         CCLOG("begin");  
  19.         break;  
  20.     case TouchEventType::TOUCH_EVENT_MOVED:  
  21.         CCLOG("move");  
  22.         break;  
  23.     case TouchEventType::TOUCH_EVENT_ENDED:  
  24.         CCLOG("end");  
  25.         break;  
  26.     case TouchEventType::TOUCH_EVENT_CANCELED:  
  27.         CCLOG("cancel");  
  28.         break;  
  29.     default:  
  30.         break;  
  31.     }  
  32. }  
  33.   
  34. //滑动条改变的回调函数  
  35. void HelloWorld::sliderPercentChangeEvent(Ref*pSender, SliderEventType type)  
  36. {  
  37.     if (type == SLIDER_PERCENTCHANGED)  
  38.     {  
  39.         Slider* pSlider = (Slider*)pSender;  
  40.         int percent = pSlider->getPercent();  
  41.         CCLOG("slider value=%d", percent);  
  42.     }  
  43. }  
  44.   
  45. //勾选的换掉函数  
  46. void HelloWorld::checkSelectEvent1(Ref *pSender, CheckBoxEventType eventtype)  
  47. {  
  48.     //gui::UILabelAtlas * pLabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));  
  49.     LabelBMFont* lbm = (LabelBMFont*)layout->getChildByName("agree_LabelBMFont");  
  50.     switch (eventtype)  
  51.     {  
  52.   
  53.     case CheckBoxEventType::CHECKBOX_STATE_EVENT_SELECTED:  
  54.         CCLOG("you select");  
  55.         /*const char* temp = { "you select" }; 
  56.         lbm->setString(temp);*/  
  57.         break;  
  58.   
  59.     case CheckBoxEventType::CHECKBOX_STATE_EVENT_UNSELECTED:  
  60.         CCLOG("you unselect");  
  61.         /*  const char* temp2 = "you unselect"; 
  62.             lbm->setString(temp2);*/  
  63.         break;  
  64.     default:  
  65.         break;  
  66.     }  
  67. }  
  68.   
  69. void HelloWorld::textFiledEvent(cocos2d::Ref *pSender, cocos2d::ui::TextFiledEventType eventtype)  
  70. {  
  71.     switch (eventtype)  
  72.     {  
  73.     case TextFiledEventType::TEXTFIELD_EVENT_ATTACH_WITH_IME:  
  74.         CCLOG("attach with_ime");  
  75.         break;  
  76.     case TextFiledEventType::TEXTFIELD_EVENT_INSERT_TEXT:  
  77.         CCLOG("insert text");  
  78.         break;  
  79.     case TextFiledEventType::TEXTFIELD_EVENT_DETACH_WITH_IME:  
  80.         CCLOG("detach with_ime");  
  81.         break;  
  82.     case TextFiledEventType::TEXTFIELD_EVENT_DELETE_BACKWARD:  
  83.         CCLOG("delete backward");  
  84.         break;  
  85.     default:  
  86.         break;  
  87.     }  
  88. }  
  89.   
  90. void HelloWorld::pageViewEvent(Ref *pSender, PageViewEventType eventtype)  
  91. {  
  92.     switch (eventtype)  
  93.     {  
  94.     case PageViewEventType::PAGEVIEW_EVENT_TURNING:  
  95.         CCLOG("turning");  
  96.         break;  
  97.   
  98.     }  
  99. }  

3、执行效果

posted on 2017-07-23 15:56  yjbjingcha  阅读(465)  评论(0)  编辑  收藏  举报

导航