Cocos2dx之使用UI库结合cocostudio

使用cocostudio的UI编辑器编辑好UI界面，导出UI文件，直接在cocos2dx中使用，通过tag或者name来获取到UI控件

1、编辑ui界面，直接用模板然后拖几个控件过去

2、cocos2dx种加载这个编辑好的UI，必须先加载cocostudio库，具体操作参照：

http://blog.youkuaiyun.com/yangxuan0261/article/details/21651779

[cpp]  view plain copy

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 plain copy

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. //图片按钮的回调函数  
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、运行效果