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

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. count = 0;
6. this->schedule(schedule_selector(HelloWorld::aaa), 1.0f);
7. //获取ui里的button，并加入监听
8. Button* btn = (Button*)layout->getChildByName("login_Button");
9. btn->addTouchEventListener(this, toucheventselector(HelloWorld::buttonEvent));
10. //获取ui里的滑动条，并加入监听
11. Slider* sl = (Slider*)layout->getChildByName("Slider_70");
12. sl->addEventListenerSlider(this, sliderpercentchangedselector(HelloWorld::sliderPercentChangeEvent));
13. //获取ui里的滚动层
14. ui::ScrollView* sv = (ui::ScrollView*)layout->getChildByName("ScrollView_73");
15. sv->setBackGroundColor(cocos2d::Color3B::GREEN);
16. sv->setTouchEnabled(true);
17. sv->setInnerContainerSize(Size(250, 250));
18. sv->scrollToPercentBothDirection(Point(50, 50), 1, true);
19. sv->setBackGroundColorType(LAYOUT_COLOR_SOLID);
20. //获取ui里的复选框，并加入监听
21. CheckBox* cb = (CheckBox*)layout->getChildByName("agree_CheckBox");
22. cb->setTouchEnabled(true);
23. cb->addEventListenerCheckBox(this, checkboxselectedeventselector(HelloWorld::checkSelectEvent1));
24. //获取ui里的文字输入，并加入监听
25. TextField* tf = (TextField*)layout->getChildByName("name_TextField");
26. tf->setTouchEnabled(true);
27. tf->setMaxLengthEnabled(true);
28. tf->setMaxLength(10);
29. tf->setPasswordEnabled(true);
30. tf->addEventListenerTextField(this, textfieldeventselector(HelloWorld::textFiledEvent));

对应控件的回调函数

[cpp] view
plaincopy

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. //图片button的回调函数
12. void HelloWorld::buttonEvent(Ref* obj, TouchEventType eventType)
13. {
14. switch (eventType)
15. {
16. case TouchEventType::TOUCH_EVENT_BEGAN:
17. CCLOG("begin");
18. break;
19. case TouchEventType::TOUCH_EVENT_MOVED:
20. CCLOG("move");
21. break;
22. case TouchEventType::TOUCH_EVENT_ENDED:
23. CCLOG("end");
24. break;
25. case TouchEventType::TOUCH_EVENT_CANCELED:
26. CCLOG("cancel");
27. break;
28. default:
29. break;
30. }
31. }
32. //滑动条改变的回调函数
33. void HelloWorld::sliderPercentChangeEvent(Ref*pSender, SliderEventType type)
34. {
35. if (type == SLIDER_PERCENTCHANGED)
36. {
37. Slider* pSlider = (Slider*)pSender;
38. int percent = pSlider->getPercent();
39. CCLOG("slider value=%d", percent);
40. }
41. }
42. //勾选的换掉函数
43. void HelloWorld::checkSelectEvent1(Ref *pSender, CheckBoxEventType eventtype)
44. {
45. //gui::UILabelAtlas * pLabelAtlas = dynamic_cast<UILabelAtlas *>(uiLayer->getWidgetByName("LabelAtlas_38"));
46. LabelBMFont* lbm = (LabelBMFont*)layout->getChildByName("agree_LabelBMFont");
47. switch (eventtype)
48. {
49. case CheckBoxEventType::CHECKBOX_STATE_EVENT_SELECTED:
50. CCLOG("you select");
51. /*const char* temp = { "you select" };
52. lbm->setString(temp);*/
53. break;
54. case CheckBoxEventType::CHECKBOX_STATE_EVENT_UNSELECTED:
55. CCLOG("you unselect");
56. /*  const char* temp2 = "you unselect";
57. lbm->setString(temp2);*/
58. break;
59. default:
60. break;
61. }
62. }
63. void HelloWorld::textFiledEvent(cocos2d::Ref *pSender, cocos2d::ui::TextFiledEventType eventtype)
64. {
65. switch (eventtype)
66. {
67. case TextFiledEventType::TEXTFIELD_EVENT_ATTACH_WITH_IME:
68. CCLOG("attach with_ime");
69. break;
70. case TextFiledEventType::TEXTFIELD_EVENT_INSERT_TEXT:
71. CCLOG("insert text");
72. break;
73. case TextFiledEventType::TEXTFIELD_EVENT_DETACH_WITH_IME:
74. CCLOG("detach with_ime");
75. break;
76. case TextFiledEventType::TEXTFIELD_EVENT_DELETE_BACKWARD:
77. CCLOG("delete backward");
78. break;
79. default:
80. break;
81. }
82. }
83. void HelloWorld::pageViewEvent(Ref *pSender, PageViewEventType eventtype)
84. {
85. switch (eventtype)
86. {
87. case PageViewEventType::PAGEVIEW_EVENT_TURNING:
88. CCLOG("turning");
89. break;
90. }
91. }

3、执行效果