使用cocostudio的UI編輯器編輯好UI介面，匯出UI檔案，直接在cocos2dx中使用，通過tag或者name來獲取到UI控制元件

1、編輯ui介面，直接用模板然後拖幾個控制元件過去

2、cocos2dx種載入這個編輯好的UI，必須先載入cocostudio庫，具體操作參照：

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));  

相應控制元件的回撥函式

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. 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、執行效果