Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用

推荐整理分享Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

转自： UI组件

按钮UIButton复选框UICheckBox滑块UISlider图片UIImageView进度条UILoadingBar纹理文本 UITextAtlas字体文本 UIText图片字体文本 UITextBMFont文本区域 UITextField布局组件 UILayout滚动组件 UIScrollView页面切换组件 UIPageView列表组件 UIListView所有控件都继承 UIWidget可以通过addChild()添加UIWidget类型的节点可以通过addRender()添加CCNode类型的节点一、使用方法1.1 在解决方案中添加项目并添加引用libCocostudiolibGuilibExtensions1.2 在项目中引用以下2个头文件#include "extensions/cocos-ext.h"#include "ui/CocosGUI.h"USING_NS_CC;using namespace ui;1.3 使用CocosStudio UI编辑器或直接通过代码定义组件对象二、各组件使用详解2.1.UIButton 2.1.1 按钮对象的创建 // 创建按钮 button Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); //设置坐标 button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); //添加事件 button->addTouchEventListener(this, toucheventselector(UIButtonTest::touchEvent)); //添加到图层 _uiLayer->addChild(button); 2.1.2 事件处理方法：void UIButtonTest::touchEvent(Ref *pSender, TouchEventType type){ switch (type) { case TOUCH_EVENT_BEGAN: _displayValueLabel->setText(String::createWithFormat("Touch Down")->getCString()); break; case TOUCH_EVENT_MOVED: _displayValueLabel->setText(String::createWithFormat("Touch Move")->getCString()); break; case TOUCH_EVENT_ENDED: _displayValueLabel->setText(String::createWithFormat("Touch Up")->getCString()); break; case TOUCH_EVENT_CANCELED: _displayValueLabel->setText(String::createWithFormat("Touch Cancelled")->getCString()); break; default: break; } } 2.1.3 使用9Path图片 // Create the button Button* button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); // open scale9 render button->setScale9Enabled(true); button->setCapInsets(Rect(5,5,,)); button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); button->setSize(Size(, )); button->addTouchEventListener(this, toucheventselector(UIButtonTest_Scale9::touchEvent)); _uiLayer->addChild(button); 2.1.4 实现PressedAction效果 // Create the button Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); button->setPressedActionEnabled(true); button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); button->addTouchEventListener(this, toucheventselector(UIButtonTest_PressedAction::touchEvent)); _uiLayer->addChild(button); 2.1.5 实现TitleButton // Create the button with title Button* button = Button::create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png"); button->setTitleText("Title Button"); button->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); button->addTouchEventListener(this, toucheventselector(UIButtonTest_Title::touchEvent)); _uiLayer->addChild(button);2.2.UICheckBox 2.2.1 添加CheckBox // Create the checkbox CheckBox* checkBox = CheckBox::create("cocosui/check_box_normal.png", "cocosui/check_box_normal_press.png", "cocosui/check_box_active.png", "cocosui/check_box_normal_disable.png", "cocosui/check_box_active_disable.png"); checkBox->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); checkBox->addEventListenerCheckBox(this, checkboxselectedeventselector(UICheckBoxTest::selectedEvent)); _uiLayer->addChild(checkBox); 2.2.2 处理用户选中事件 void UICheckBoxTest::selectedEvent(Ref* pSender,CheckBoxEventType type){ switch (type) { case CHECKBOX_STATE_EVENT_SELECTED: _displayValueLabel->setText(String::createWithFormat("Selected")->getCString()); break; case CHECKBOX_STATE_EVENT_UNSELECTED: _displayValueLabel->setText(String::createWithFormat("Unselected")->getCString()); break; default: break; } } 2.3.UISlider2.3.1 // Create the slider Slider* slider = Slider::create(); slider->loadBarTexture("cocosui/sliderTrack.png"); slider->loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", ""); slider->loadProgressBarTexture("cocosui/sliderProgress.png"); slider->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f/* &#; slider->getSize().height * 2.0f*/)); slider->addEventListenerSlider(this, sliderpercentchangedselector(UISliderTest::sliderEvent)); _uiLayer->addChild(slider); 2.3.2 void UISliderTest::sliderEvent(Ref *pSender, SliderEventType type) { if (type == SLIDER_PERCENTCHANGED) { Slider* slider = dynamic_cast<Slider*>(pSender); int percent = slider->getPercent(); _displayValueLabel->setText(String::createWithFormat("Percent %d", percent)->getCString()); } }2.3.3 // Create the slider Slider* slider = Slider::create(); slider->loadBarTexture("cocosui/sliderTrack2.png"); slider->loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", ""); slider->loadProgressBarTexture("cocosui/slider_bar_active_9patch.png"); slider->setScale9Enabled(true); slider->setCapInsets(Rect(0, 0, 0, 0)); slider->setSize(Size(.0f, )); slider->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f/* &#; slider->getSize().height * 3.0f*/)); slider->addEventListenerSlider(this, sliderpercentchangedselector(UISliderTest_Scale9::sliderEvent)); _uiLayer->addChild(slider);2.4.UIImageView2.4.1 // Create the imageview ImageView* imageView = ImageView::create("cocosui/ccicon.png"); imageView->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); _uiLayer->addChild(imageView);2.4.2 // Create the imageview ImageView* imageView = ImageView::create("cocosui/buttonHighlighted.png"); imageView->setScale9Enabled(true); imageView->setSize(Size(, )); imageView->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); 2.5.UILoadingBar2.5.1创建进度条 // Create the loading bar LoadingBar* loadingBar = LoadingBar::create("cocosui/sliderProgress.png"); loadingBar->setTag(0); loadingBar->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f &#; loadingBar->getSize().height / 4.0f)); _uiLayer->addChild(loadingBar);2.5.2 修改进度条的长度 void UILoadingBarTest_Left::update(float delta){ _count&#;&#;; if (_count > ) { _count = 0; } LoadingBar* loadingBar = static_cast<LoadingBar*>(_uiLayer->getChildByTag(0)); loadingBar->setPercent(_count);}2.5.3 修改进度条的方向 // Create the loading bar LoadingBar* loadingBar = LoadingBar::create("cocosui/sliderProgress.png"); loadingBar->setTag(0); loadingBar->setDirection(LoadingBarTypeRight); loadingBar->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f &#; loadingBar->getSize().height / 4.0f)); _uiLayer->addChild(loadingBar);2.5.4 scale9 LoadingBar* loadingBar = LoadingBar::create("cocosui/slider_bar_active_9patch.png"); loadingBar->setTag(0); loadingBar->setScale9Enabled(true); loadingBar->setCapInsets(Rect(0, 0, 0, 0)); loadingBar->setSize(Size(, )); loadingBar->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f &#; loadingBar->getSize().height / 4.0f)); _uiLayer->addChild(loadingBar);2.6.UITextAtlas TextAtlas* textAtlas = TextAtlas::create("", "cocosui/labelatlas.png", , , "0"); textAtlas->setPosition(Point((widgetSize.width) / 2, widgetSize.height / 2.0f)); _uiLayer->addChild(textAtlas); 2.7.UIText 2.7.1 // Create the text Text* text = Text::create("Text", "AmericanTypewriter", ); text->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f &#; text->getSize().height / 4.0f)); _uiLayer->addChild(text); 2.7.2 // Create the line wrap Text* text = Text::create("Text can line wrap","AmericanTypewriter",); text->ignoreContentAdaptWithSize(false); text->setSize(Size(, )); text->setTextHorizontalAlignment(TextHAlignment::CENTER); text->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f - text->getSize().height / 8.0f)); _uiLayer->addChild(text); 2.7.3 create with ttf Text* alert = Text::create("Text line wrap","fonts/Marker Felt.ttf",); alert->setColor(Color3B(, , )); alert->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f - alert->getSize().height * 1.f)); _uiLayer->addChild(alert);2.8.UITextBMFont // Create the TextBMFont TextBMFont* textBMFont = TextBMFont::create("BMFont", "cocosui/bitmapFontTest2.fnt"); textBMFont->setPosition(Point(widgetSize.width / 2, widgetSize.height / 2.0f &#; textBMFont->getSize().height / 8.0f)); _uiLayer->addChild(textBMFont);2.9.UITextField 2.9.1 // Create the textfield TextField* textField = TextField::create("input words here","fonts/Marker Felt.ttf",); textField->setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f)); textField->addEventListenerTextField(this, textfieldeventselector(UITextFieldTest::textFieldEvent)); _uiLayer->addChild(textField); 2.9.2 void UITextFieldTest::textFieldEvent(Ref *pSender, TextFiledEventType type){ switch (type) { case TEXTFIELD_EVENT_ATTACH_WITH_IME: { TextField* textField = dynamic_cast<TextField*>(pSender); Size screenSize = CCDirector::getInstance()->getWinSize(); textField->runAction(CCMoveTo::create(0.f, Point(screenSize.width / 2.0f, screenSize.height / 2.0f &#; textField->getContentSize().height / 2.0f))); _displayValueLabel->setText(String::createWithFormat("attach with IME")->getCString()); } break; case TEXTFIELD_EVENT_DETACH_WITH_IME: { TextField* textField = dynamic_cast<TextField*>(pSender); Size screenSize = CCDirector::getInstance()->getWinSize(); textField->runAction(CCMoveTo::create(0.f, Point(screenSize.width / 2.0f, screenSize.height / 2.0f))); _displayValueLabel->setText(String::createWithFormat("detach with IME")->getCString()); } break; case TEXTFIELD_EVENT_INSERT_TEXT: _displayValueLabel->setText(String::createWithFormat("insert words")->getCString()); break; case TEXTFIELD_EVENT_DELETE_BACKWARD: _displayValueLabel->setText(String::createWithFormat("delete word")->getCString()); break; default: break; }}2.9.2 textField->setMaxLengthEnabled(true); textField->setMaxLength(3);2.9.3 textField->setPasswordEnabled(true); textField->setPasswordStyleText("*");2.9.4 TextField* textField = TextField::create("input words here","fonts/Marker Felt.ttf",); textField->ignoreContentAdaptWithSize(false); textField->setSize(Size(, )); textField->setTextHorizontalAlignment(TextHAlignment::CENTER); textField->setTextVerticalAlignment(TextVAlignment::CENTER);2..UILayout2..1 // Create the layout Layout* layout = Layout::create(); layout->setSize(Size(, )); Size backgroundSize = background->getSize(); layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - layout->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - layout->getSize().height) / 2.0f)); _uiLayer->addChild(layout);//将Layout添加到场景2..2在Layout中添加组件 Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); button->setPosition(Point(button->getSize().width / 2.0f, layout->getSize().height - button->getSize().height / 2.0f)); layout->addChild(button); Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png"); titleButton->setTitleText("Title Button"); titleButton->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f)); layout->addChild(titleButton); Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); button_scale9->setScale9Enabled(true); button_scale9->setSize(Size(.0f, button_scale9->getVirtualRendererSize().height)); button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2.0f, button_scale9->getSize().height / 2.0f)); layout->addChild(button_scale9);2..3 layout->setBackGroundColorType(LAYOUT_COLOR_SOLID); layout->setBackGroundColor(Color3B(, , )); layout->setSize(Size(, ));2..4 layout->setBackGroundColorType(LAYOUT_COLOR_GRADIENT); layout->setBackGroundColor(Color3B(, , ), Color3B(, , ));2..5 layout->setClippingEnabled(true); layout->setBackGroundImage("cocosui/Hello.png");2..6 layout->setBackGroundImageScale9Enabled(true); layout->setBackGroundImage("cocosui/green_edit.png");2..7 // Create the layout Layout* layout = Layout::create(); layout->setLayoutType(LAYOUT_LINEAR_VERTICAL); layout->setSize(Size(, )); Size backgroundSize = background->getSize(); layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - layout->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - layout->getSize().height) / 2.0f)); _uiLayer->addChild(layout); Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button); LinearLayoutParameter* lp1 = LinearLayoutParameter::create(); button->setLayoutParameter(lp1); lp1->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL); lp1->setMargin(Margin(0.0f, 5.0f, 0.0f, .0f)); Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png"); titleButton->setTitleText("Title Button"); layout->addChild(titleButton); LinearLayoutParameter* lp2 = LinearLayoutParameter::create(); titleButton->setLayoutParameter(lp2); lp2->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL); lp2->setMargin(Margin(0.0f, .0f, 0.0f, .0f)); Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); button_scale9->setScale9Enabled(true); button_scale9->setSize(Size(.0f, button_scale9->getVirtualRendererSize().height)); layout->addChild(button_scale9); LinearLayoutParameter* lp3 = LinearLayoutParameter::create(); button_scale9->setLayoutParameter(lp3); lp3->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL); lp3->setMargin(Margin(0.0f, .0f, 0.0f, .0f)); 2..8 // Create the layout Layout* layout = Layout::create(); layout->setLayoutType(LAYOUT_LINEAR_HORIZONTAL); layout->setClippingEnabled(true); layout->setSize(Size(, )); Size backgroundSize = background->getSize(); layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - layout->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - layout->getSize().height) / 2.0f)); _uiLayer->addChild(layout); Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button); LinearLayoutParameter* lp1 = LinearLayoutParameter::create(); button->setLayoutParameter(lp1); lp1->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL); lp1->setMargin(Margin(0.0f, .0f, 0.0f, .0f)); Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png"); titleButton->setTitleText("Title Button"); layout->addChild(titleButton); LinearLayoutParameter* lp2 = LinearLayoutParameter::create(); titleButton->setLayoutParameter(lp2); lp2->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL); lp2->setMargin(Margin(0.0f, .0f, 0.0f, .0f)); Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); button_scale9->setScale9Enabled(true); button_scale9->setSize(Size(.0f, button_scale9->getVirtualRendererSize().height)); layout->addChild(button_scale9); LinearLayoutParameter* lp3 = LinearLayoutParameter::create(); button_scale9->setLayoutParameter(lp3); lp3->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL); lp3->setMargin(Margin(0.0f, .0f, 0.0f, .0f));2..9 // Create the layout Layout* layout = Layout::create(); layout->setLayoutType(LAYOUT_RELATIVE); layout->setSize(Size(, )); layout->setBackGroundColorType(LAYOUT_COLOR_SOLID); layout->setBackGroundColor(Color3B::GREEN); Size backgroundSize = background->getSize(); layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - layout->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - layout->getSize().height) / 2.0f)); _uiLayer->addChild(layout); // top left Button* button_TopLeft = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_TopLeft); RelativeLayoutParameter* rp_TopLeft = RelativeLayoutParameter::create(); rp_TopLeft->setAlign(RELATIVE_ALIGN_PARENT_TOP_LEFT); button_TopLeft->setLayoutParameter(rp_TopLeft); // top center horizontal Button* button_TopCenter = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_TopCenter); RelativeLayoutParameter* rp_TopCenter = RelativeLayoutParameter::create(); rp_TopCenter->setAlign(RELATIVE_ALIGN_PARENT_TOP_CENTER_HORIZONTAL); button_TopCenter->setLayoutParameter(rp_TopCenter); // top right Button* button_TopRight = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_TopRight); RelativeLayoutParameter* rp_TopRight = RelativeLayoutParameter::create(); rp_TopRight->setAlign(RELATIVE_ALIGN_PARENT_TOP_RIGHT); button_TopRight->setLayoutParameter(rp_TopRight); // left center Button* button_LeftCenter = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_LeftCenter); RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create(); rp_LeftCenter->setAlign(RELATIVE_ALIGN_PARENT_LEFT_CENTER_VERTICAL); button_LeftCenter->setLayoutParameter(rp_LeftCenter); // center Button* buttonCenter = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(buttonCenter); RelativeLayoutParameter* rpCenter = RelativeLayoutParameter::create(); rpCenter->setAlign(RELATIVE_CENTER_IN_PARENT); buttonCenter->setLayoutParameter(rpCenter); // right center Button* button_RightCenter = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_RightCenter); RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create(); rp_RightCenter->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_CENTER_VERTICAL); button_RightCenter->setLayoutParameter(rp_RightCenter); // left bottom Button* button_LeftBottom = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_LeftBottom); RelativeLayoutParameter* rp_LeftBottom = RelativeLayoutParameter::create(); rp_LeftBottom->setAlign(RELATIVE_ALIGN_PARENT_LEFT_BOTTOM); button_LeftBottom->setLayoutParameter(rp_LeftBottom); // bottom center Button* button_BottomCenter = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_BottomCenter); RelativeLayoutParameter* rp_BottomCenter = RelativeLayoutParameter::create(); rp_BottomCenter->setAlign(RELATIVE_ALIGN_PARENT_BOTTOM_CENTER_HORIZONTAL); button_BottomCenter->setLayoutParameter(rp_BottomCenter); // right bottom Button* button_RightBottom = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); layout->addChild(button_RightBottom); RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create(); rp_RightBottom->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_BOTTOM); button_RightBottom->setLayoutParameter(rp_RightBottom); 2.. // Create the layout Layout* layout = Layout::create(); layout->setLayoutType(LAYOUT_RELATIVE); layout->setSize(Size(, )); Size backgroundSize = background->getSize(); layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - layout->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - layout->getSize().height) / 2.0f)); _uiLayer->addChild(layout); // center ImageView* imageView_Center = ImageView::create("cocosui/scrollviewbg.png"); layout->addChild(imageView_Center); RelativeLayoutParameter* rp_Center = RelativeLayoutParameter::create(); rp_Center->setRelativeName("rp_Center"); rp_Center->setAlign(RELATIVE_CENTER_IN_PARENT); imageView_Center->setLayoutParameter(rp_Center); // above center ImageView* imageView_AboveCenter = ImageView::create("cocosui/switch-mask.png"); layout->addChild(imageView_AboveCenter); RelativeLayoutParameter* rp_AboveCenter = RelativeLayoutParameter::create(); rp_AboveCenter->setRelativeToWidgetName("rp_Center"); rp_AboveCenter->setAlign(RELATIVE_LOCATION_ABOVE_CENTER); imageView_AboveCenter->setLayoutParameter(rp_AboveCenter); // below center ImageView* imageView_BelowCenter = ImageView::create("cocosui/switch-mask.png"); layout->addChild(imageView_BelowCenter); RelativeLayoutParameter* rp_BelowCenter = RelativeLayoutParameter::create(); rp_BelowCenter->setRelativeToWidgetName("rp_Center"); rp_BelowCenter->setAlign(RELATIVE_LOCATION_BELOW_CENTER); imageView_BelowCenter->setLayoutParameter(rp_BelowCenter); // left center ImageView* imageView_LeftCenter = ImageView::create("cocosui/switch-mask.png"); layout->addChild(imageView_LeftCenter); RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create(); rp_LeftCenter->setRelativeToWidgetName("rp_Center"); rp_LeftCenter->setAlign(RELATIVE_LOCATION_LEFT_OF_CENTER); imageView_LeftCenter->setLayoutParameter(rp_LeftCenter); // right center ImageView* imageView_RightCenter = ImageView::create("cocosui/switch-mask.png"); layout->addChild(imageView_RightCenter); RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create(); rp_RightCenter->setRelativeToWidgetName("rp_Center"); rp_RightCenter->setAlign(RELATIVE_LOCATION_RIGHT_OF_CENTER); imageView_RightCenter->setLayoutParameter(rp_RightCenter); 2..UIScrollView 2..1 创建垂直滚动UI // Create the scrollview by vertical ui::ScrollView* scrollView = ui::ScrollView::create(); scrollView->setSize(Size(.0f, .0f)); Size backgroundSize = background->getContentSize(); scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - scrollView->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - scrollView->getSize().height) / 2.0f)); _uiLayer->addChild(scrollView); ImageView* imageView = ImageView::create("cocosui/ccicon.png"); float innerWidth = scrollView->getSize().width; float innerHeight = scrollView->getSize().height &#; imageView->getSize().height; scrollView->setInnerContainerSize(Size(innerWidth, innerHeight)); Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); button->setPosition(Point(innerWidth / 2.0f, scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f)); scrollView->addChild(button); Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png"); titleButton->setTitleText("Title Button"); titleButton->setPosition(Point(innerWidth / 2.0f, button->getBottomInParent() - button->getSize().height)); scrollView->addChild(titleButton); Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); button_scale9->setScale9Enabled(true); button_scale9->setSize(Size(.0f, button_scale9->getVirtualRendererSize().height)); button_scale9->setPosition(Point(innerWidth / 2.0f, titleButton->getBottomInParent() - titleButton->getSize().height)); scrollView->addChild(button_scale9); imageView->setPosition(Point(innerWidth / 2.0f, imageView->getSize().height / 2.0f)); scrollView->addChild(imageView); 2..2 // Create the scrollview by horizontal ui::ScrollView* scrollView = ui::ScrollView::create(); scrollView->setBounceEnabled(true); scrollView->setDirection(SCROLLVIEW_DIR_HORIZONTAL); scrollView->setSize(Size(.0f, .0f)); scrollView->setInnerContainerSize(scrollView->getSize()); Size backgroundSize = background->getContentSize(); scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - scrollView->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - scrollView->getSize().height) / 2.0f)); _uiLayer->addChild(scrollView); ImageView* imageView = ImageView::create("cocosui/ccicon.png"); float innerWidth = scrollView->getSize().width &#; imageView->getSize().width; float innerHeight = scrollView->getSize().height; scrollView->setInnerContainerSize(Size(innerWidth, innerHeight)); Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png"); button->setPosition(Point(button->getSize().width / 2.0f, scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f)); scrollView->addChild(button); Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png"); titleButton->setTitleText("Title Button"); titleButton->setPosition(Point(button->getRightInParent() &#; button->getSize().width / 2.0f, button->getBottomInParent() - button->getSize().height / 2.0f)); scrollView->addChild(titleButton); Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); button_scale9->setScale9Enabled(true); button_scale9->setSize(Size(.0f, button_scale9->getVirtualRendererSize().height)); button_scale9->setPosition(Point(titleButton->getRightInParent() &#; titleButton->getSize().width / 2.0f, titleButton->getBottomInParent() - titleButton->getSize().height / 2.0f)); scrollView->addChild(button_scale9); imageView->setPosition(Point(innerWidth - imageView->getSize().width / 2.0f, button_scale9->getBottomInParent() - button_scale9->getSize().height / 2.0f)); scrollView->addChild(imageView); 2..3 // Create the dragpanel ui::ScrollView* scrollView = ui::ScrollView::create(); scrollView->setDirection(SCROLLVIEW_DIR_BOTH); scrollView->setTouchEnabled(true); scrollView->setBounceEnabled(true);//反弹 scrollView->setBackGroundImageScale9Enabled(true); scrollView->setBackGroundImage("cocosui/green_edit.png"); scrollView->setSize(Size(, .5)); Size backgroundSize = background->getContentSize(); scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - scrollView->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - scrollView->getSize().height) / 2.0f)); ImageView* imageView = ImageView::create("Hello.png"); scrollView->addChild(imageView); scrollView->setInnerContainerSize(imageView->getContentSize()); Size innerSize = scrollView->getInnerContainerSize(); imageView->setPosition(Point(innerSize.width / 2.0f, innerSize.height / 2.0f)); _uiLayer->addChild(scrollView);2..4 ui::ScrollView* sc = ui::ScrollView::create(); sc->setBackGroundColor(Color3B::GREEN); sc->setBackGroundColorType(LAYOUT_COLOR_SOLID); sc->setDirection(SCROLLVIEW_DIR_BOTH); sc->setInnerContainerSize(Size(, )); sc->setSize(Size(,)); Size backgroundSize = background->getContentSize(); sc->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - sc->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - sc->getSize().height) / 2.0f)); //减速 sc->scrollToPercentBothDirection(Point(, ), 1, true); ImageView* iv = ImageView::create("cocosui/Hello.png"); iv->setPosition(Point(, )); sc->addChild(iv); _uiLayer->addChild(sc);2..UIPageView // Create the page view PageView* pageView = PageView::create(); pageView->setSize(Size(.0f, .0f)); Size backgroundSize = background->getContentSize(); pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - pageView->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - pageView->getSize().height) / 2.0f)); for (int i = 0; i < 3; &#;&#;i) { Layout* layout = Layout::create(); layout->setSize(Size(.0f, .0f)); ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png"); imageView->setScale9Enabled(true); imageView->setSize(Size(, )); imageView->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f)); layout->addChild(imageView); Text* label = Text::create(StringUtils::format("page %d",(i&#;1)), "fonts/Marker Felt.ttf", ); label->setColor(Color3B(, , )); label->setPosition(Point(layout->getSize().width / 2.0f, layout->getSize().height / 2.0f)); layout->addChild(label); pageView->addPage(layout); } pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent)); _uiLayer->addChild(pageView); 2..2 void UIPageViewTest::pageViewEvent(Ref *pSender, PageViewEventType type){ switch (type) { case PAGEVIEW_EVENT_TURNING: { PageView* pageView = dynamic_cast<PageView*>(pSender); _displayValueLabel->setText(CCString::createWithFormat("page = %ld", pageView->getCurPageIndex() &#; 1)->getCString()); } break; default: break; }} 2..UIListView2..1 // create list view ex data _array = Array::create(); CC_SAFE_RETAIN(_array); for (int i = 0; i < ; &#;&#;i) { __String* ccstr = __String::createWithFormat("listview_item_%d", i); _array->addObject(ccstr); } // Create the list view ex ListView* listView = ListView::create(); // set list view ex direction listView->setDirection(SCROLLVIEW_DIR_VERTICAL); listView->setTouchEnabled(true); listView->setBounceEnabled(true); listView->setBackGroundImage("cocosui/green_edit.png"); listView->setBackGroundImageScale9Enabled(true); listView->setSize(Size(, )); listView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f &#; (backgroundSize.width - listView->getSize().width) / 2.0f, (widgetSize.height - backgroundSize.height) / 2.0f &#; (backgroundSize.height - listView->getSize().height) / 2.0f)); listView->addEventListenerListView(this, listvieweventselector(UIListViewTest_Vertical::selectedItemEvent)); _uiLayer->addChild(listView); // create model Button* default_button = Button::create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png"); default_button->setName("Title Button"); Layout* default_item = Layout::create(); default_item->setTouchEnabled(true); default_item->setSize(default_button->getSize()); default_button->setPosition(Point(default_item->getSize().width / 2.0f, default_item->getSize().height / 2.0f)); default_item->addChild(default_button); // set model listView->setItemModel(default_item); // add default item ssize_t count = _array->count(); for (int i = 0; i < count / 4; &#;&#;i) { listView->pushBackDefaultItem(); } // insert default item for (int i = 0; i < count / 4; &#;&#;i) { listView->insertDefaultItem(0); } // add custom item for (int i = 0; i < count / 4; &#;&#;i) { Button* custom_button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); custom_button->setName("Title Button"); custom_button->setScale9Enabled(true); custom_button->setSize(default_button->getSize()); Layout *custom_item = Layout::create(); custom_item->setSize(custom_button->getSize()); custom_button->setPosition(Point(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f)); custom_item->addChild(custom_button); listView->pushBackCustomItem(custom_item); } // insert custom item Vector<Widget*>& items = listView->getItems(); ssize_t items_count = items.size(); for (int i = 0; i < count / 4; &#;&#;i) { Button* custom_button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png"); custom_button->setName("Title Button"); custom_button->setScale9Enabled(true); custom_button->setSize(default_button->getSize()); Layout *custom_item = Layout::create(); custom_item->setSize(custom_button->getSize()); custom_button->setPosition(Point(custom_item->getSize().width / 2.0f, custom_item->getSize().height / 2.0f)); custom_item->addChild(custom_button); listView->insertCustomItem(custom_item, items_count); } // set item data items_count = items.size(); for (int i = 0; i < items_count; &#;&#;i) { Widget* item = listView->getItem(i); Button* button = static_cast<Button*>(item->getChildByName("Title Button")); ssize_t index = listView->getIndex(item); button->setTitleText(static_cast<__String*>(_array->getObjectAtIndex(index))->getCString()); } // remove last item listView->removeLastItem(); // remove item by index items_count = items.size(); listView->removeItem(items_count - 1); // set all items layout gravity listView->setGravity(LISTVIEW_GRAVITY_CENTER_VERTICAL); // set items margin listView->setItemsMargin(2.0f); 2..2 void UIListViewTest_Vertical::selectedItemEvent(Ref *pSender, ListViewEventType type){ switch (type) { case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_START: { ListView* listView = static_cast<ListView*>(pSender); CC_UNUSED_PARAM(listView); CCLOG("select child start index = %ld", listView->getCurSelectedIndex()); break; } case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END: { ListView* listView = static_cast<ListView*>(pSender); CC_UNUSED_PARAM(listView); CCLOG("select child end index = %ld", listView->getCurSelectedIndex()); break; } default: break; }}2..3 // Create the list view ex ListView* listView = ListView::create(); // set list view ex direction listView->setDirection(SCROLLVIEW_DIR_HORIZONTAL); listView->setTouchEnabled(true); listView->setBounceEnabled(true); listView->setBackGroundImage("cocosui/green_edit.png"); listView->setBackGroundImageScale9Enabled(true); listView->setSize(Size(, ));2..UIRichText _richText = RichText::create(); _richText->ignoreContentAdaptWithSize(false); _richText->setSize(Size(, )); RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, , "This color is white. ", "Helvetica", ); RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, , "And this is yellow. ", "Helvetica", ); RichElementText* re3 = RichElementText::create(3, Color3B::BLUE, , "This one is blue. ", "Helvetica", ); RichElementText* re4 = RichElementText::create(4, Color3B::GREEN, , "And green. ", "Helvetica", ); RichElementText* re5 = RichElementText::create(5, Color3B::RED, , "Last one is red ", "Helvetica", ); RichElementImage* reimg = RichElementImage::create(6, Color3B::WHITE, , "cocosui/sliderballnormal.png"); cocostudio::ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosui//.ExportJson"); cocostudio::Armature *pAr = cocostudio::Armature::create(""); pAr->getAnimation()->play("Animation1"); RichElementCustomNode* recustom = RichElementCustomNode::create(1, Color3B::WHITE, , pAr); RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, , "Have fun!! ", "Helvetica", ); _richText->pushBackElement(re1); _richText->insertElement(re2, 1); _richText->pushBackElement(re3); _richText->pushBackElement(re4); _richText->pushBackElement(re5); _richText->insertElement(reimg, 2); _richText->pushBackElement(recustom); _richText->pushBackElement(re6); _richText->setPosition(Point(widgetSize.width / 2, widgetSize.height / 2)); _richText->setLocalZOrder(); _widget->addChild(_richText);三、在CocosStudio的UI编辑器中获取组件对象3.1使用UI编辑器3.2导出UI文件3.3在Cocos2d-x中加载UI文件3.4获取UI层中的子对象四、UI组件详解4.1使用UIButton4.1.1 载入UIButton文件bool UIButtonTest_Editor::init(){ if (UIScene_Editor::init()) { _layout = static_cast<Layout*>(cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosui/UIEditorTest/UIButton_Editor/UIButton_Editor_1.json")); _touchGroup->addChild(_layout); Size screenSize = CCDirector::getInstance()->getWinSize(); Size rootSize = _layout->getSize(); _touchGroup->setPosition(Point((screenSize.width - rootSize.width) / 2, (screenSize.height - rootSize.height) / 2)); Layout* root = static_cast<Layout*>(_layout->getChildByName("root_Panel")); Text* back_label = static_cast<Text*>(Helper::seekWidgetByName(root, "back")); back_label->addTouchEventListener(this, toucheventselector(UIScene_Editor::toGUIEditorTestScene)); _sceneTitle = static_cast<Text*>(Helper::seekWidgetByName(root, "UItest")); Button* button = static_cast<Button*>(Helper::seekWidgetByName(root, "Button_")); button->addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent)); Button* title_button = static_cast<Button*>(Helper::seekWidgetByName(root, "Button_")); title_button->addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent)); Button* scale9_button = static_cast<Button*>(Helper::seekWidgetByName(root, "Button_")); scale9_button->addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent)); _displayValueLabel = Text::create(); _displayValueLabel->setFontName("fonts/Marker Felt.ttf"); _displayValueLabel->setFontSize(); _displayValueLabel->setText("No event"); _displayValueLabel->setPosition(Point(_layout->getSize().width / 2, _layout->getSize().height - _displayValueLabel->getSize().height * 1.f)); _touchGroup->addChild(_displayValueLabel); return true; } return false;}void UIButtonTest_Editor::touchEvent(Ref *pSender, TouchEventType type){ switch (type) { case TOUCH_EVENT_BEGAN: _displayValueLabel->setText("Touch Down"); break; case TOUCH_EVENT_MOVED: _displayValueLabel->setText("Touch Moved"); break; case TOUCH_EVENT_ENDED: _displayValueLabel->setText("Touch Ended"); break; case TOUCH_EVENT_CANCELED: _displayValueLabel->setText("Touch Canceled"); break; default: break; }}

cocos2dx之lua项目开发中MVC框架的简单应用 ****************************************************************************时间：--作者：Sharing_Li转载注明出处：

call to OpenGL ES API with no current context (logged once per thread) 背景cocos2dxAndroid工程接入移动基地的短信扣费SDK；程序运行，扣费成功后程序崩溃。eclipselogcat提示：网上搜索到两个方法第一个方法：.在应用程序Androi

mac中quick-cocos2dx-2.2.5+sublime text 2搭建lua的开发环境 准备工作：1、首先下载quick-cocos2dx-2.2.5-plus-release版本的: