Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大
发布时间:2020-12-14 19:08:33 所属栏目:百科 来源:网络整理
导读:CocosStudio UI组件 按钮UIButton 复选框UICheckBox 滑块UISlider 图片UIImageView 进度条UILoadingBar 纹理文本 UITextAtlas 字体文本 UIText 图片字体文本 UITextBMFont 文本区域 UITextField 布局组件 UILayout 滚动组件 UIScrollView 页面切换组件 UIPag
CocosStudio UI组件 按钮UIButton 复选框UICheckBox 滑块UISlider 图片UIImageView 进度条UILoadingBar 纹理文本 UITextAtlas 字体文本 UIText 图片字体文本 UITextBMFont 文本区域 UITextField 布局组件 UILayout 滚动组件 UIScrollView 页面切换组件 UIPageView 列表组件 UIListView 所有控件都继承 UIWidget 可以通过addChild()添加UIWidget类型的节点 可以通过addRender()添加CCNode类型的节点 一、使用方法 1.1 在解决方案中添加项目并添加引用 libCocostudio libGui libExtensions 1.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()); case TOUCH_EVENT_ENDED: _displayValueLabel->setText(String::createWithFormat("Touch Up")->getCString()); case TOUCH_EVENT_CANCELED: _displayValueLabel->setText(String::createWithFormat("Touch Cancelled")->getCString()); break; default: } } 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,15,15)); button->setSize(Size(150,70)); 2.1.4 实现PressedAction效果 // Create the button button->setPressedActionEnabled(true); 2.1.5 实现TitleButton // Create the button with title Button* button = Button::create("cocosui/backtotoppressed.png","cocosui/backtotopnormal.png"); button->setTitleText("Title Button"); 2.2.UICheckBox 2.2.1 添加CheckBox // Create the checkbox CheckBox* checkBox = CheckBox::create("cocosui/check_box_normal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_box_normal_press.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_box_active.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_box_normal_disable.png",51); font-family:Arial; font-size:14px; line-height:26px"> "cocosui/check_box_active_disable.png"); checkBox->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> 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()); case CHECKBOX_STATE_EVENT_UNSELECTED: _displayValueLabel->setText(String::createWithFormat("Unselected")->getCString()); } 2.3.UISlider 2.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->loadBarTexture("cocosui/sliderTrack2.png"); slider->loadProgressBarTexture("cocosui/slider_bar_active_9patch.png"); slider->setScale9Enabled(true); slider->setCapInsets(Rect(0,0)); slider->setSize(Size(250.0f,19)); 2.4.UIImageView 2.4.1 // Create the imageview ImageView* imageView = ImageView::create("cocosui/ccicon.png"); imageView->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> 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(300,115)); 2.5.UILoadingBar 2.5.1创建进度条 // Create the loading bar LoadingBar* loadingBar = LoadingBar::create("cocosui/sliderProgress.png"); loadingBar->setTag(0); loadingBar->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f)); _uiLayer->addChild(loadingBar); 2.5.2 修改进度条的长度 void UILoadingBarTest_Left::update(float delta) _count++; if (_count > 100) _count = 0; LoadingBar* loadingBar = static_cast<LoadingBar*>(_uiLayer->getChildByTag(0)); loadingBar->setPercent(_count); } 2.5.3 修改进度条的方向 // Create the loading bar loadingBar->setDirection(LoadingBarTypeRight); 2.5.4 scale9 LoadingBar* loadingBar = LoadingBar::create("cocosui/slider_bar_active_9patch.png"); loadingBar->setScale9Enabled(true); loadingBar->setCapInsets(Rect(0,51); font-family:Arial; font-size:14px; line-height:26px"> loadingBar->setSize(Size(300,13)); widgetSize.height / 2.0f + loadingBar->getSize().height / 4.0f)); 2.6.UITextAtlas TextAtlas* textAtlas = TextAtlas::create("1234567890","cocosui/labelatlas.png",17,22,"0"); textAtlas->setPosition(Point((widgetSize.width) / 2,51); font-family:Arial; font-size:14px; line-height:26px"> _uiLayer->addChild(textAtlas); 2.7.UIText 2.7.1 // Create the text Text* text = Text::create("Text","AmericanTypewriter",30); 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",32); text->ignoreContentAdaptWithSize(false); text->setSize(Size(280,150)); text->setTextHorizontalAlignment(TextHAlignment::CENTER); 2.7.3 create with ttf Text* alert = Text::create("Text line wrap","fonts/Marker Felt.ttf",51); font-family:Arial; font-size:14px; line-height:26px"> alert->setColor(Color3B(159,168,176)); alert->setPosition(Point(widgetSize.width / 2.0f,widgetSize.height / 2.0f - alert->getSize().height * 1.75f)); _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",51); font-family:Arial; font-size:14px; line-height:26px"> textField->setPosition(Point(widgetSize.width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> textField->addEventListenerTextField(this,textfieldeventselector(UITextFieldTest::textFieldEvent)); _uiLayer->addChild(textField); 2.9.2 void UITextFieldTest::textFieldEvent(Ref *pSender,TextFiledEventType type) case TEXTFIELD_EVENT_ATTACH_WITH_IME: { TextField* textField = dynamic_cast<TextField*>(pSender); Size screenSize = CCDirector::getInstance()->getWinSize(); textField->runAction(CCMoveTo::create(0.225f,51); font-family:Arial; font-size:14px; line-height:26px"> Point(screenSize.width / 2.0f,screenSize.height / 2.0f + textField->getContentSize().height / 2.0f))); _displayValueLabel->setText(String::createWithFormat("attach with IME")->getCString()); } case TEXTFIELD_EVENT_DETACH_WITH_IME: textField->runAction(CCMoveTo::create(0.175f,Point(screenSize.width / 2.0f,screenSize.height / 2.0f))); _displayValueLabel->setText(String::createWithFormat("detach with IME")->getCString()); case TEXTFIELD_EVENT_INSERT_TEXT: _displayValueLabel->setText(String::createWithFormat("insert words")->getCString()); case TEXTFIELD_EVENT_DELETE_BACKWARD: _displayValueLabel->setText(String::createWithFormat("delete word")->getCString()); textField->setMaxLengthEnabled(true); textField->setMaxLength(3); 2.9.3 textField->setPasswordEnabled(true); textField->setPasswordStyleText("*"); 2.9.4 textField->ignoreContentAdaptWithSize(false); textField->setSize(Size(240,160)); textField->setTextHorizontalAlignment(TextHAlignment::CENTER); textField->setTextVerticalAlignment(TextVAlignment::CENTER); 2.10.UILayout 2.10.1 // Create the layout Layout* layout = Layout::create(); layout->setSize(Size(280,51); font-family:Arial; font-size:14px; line-height:26px"> Size backgroundSize = background->getSize(); layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f + (backgroundSize.width - layout->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f + (backgroundSize.height - layout->getSize().height) / 2.0f)); _uiLayer->addChild(layout);//将Layout添加到场景 2.10.2在Layout中添加组件 button->setPosition(Point(button->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> 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",51); font-family:Arial; font-size:14px; line-height:26px"> button_scale9->setScale9Enabled(true); button_scale9->setSize(Size(100.0f,button_scale9->getVirtualRendererSize().height)); button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> button_scale9->getSize().height / 2.0f)); layout->addChild(button_scale9); 2.10.3 layout->setBackGroundColorType(LAYOUT_COLOR_SOLID); layout->setBackGroundColor(Color3B(128,128,128)); 2.10.4 layout->setBackGroundColorType(LAYOUT_COLOR_GRADIENT); layout->setBackGroundColor(Color3B(64,64,64),Color3B(192,192,192)); 2.10.5 layout->setClippingEnabled(true); layout->setBackGroundImage("cocosui/Hello.png"); 2.10.6 layout->setBackGroundImageScale9Enabled(true); layout->setBackGroundImage("cocosui/green_edit.png"); 2.10.7 // Create the layout layout->setLayoutType(LAYOUT_LINEAR_VERTICAL); _uiLayer->addChild(layout); LinearLayoutParameter* lp1 = LinearLayoutParameter::create(); button->setLayoutParameter(lp1); lp1->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL); lp1->setMargin(Margin(0.0f,5.0f,0.0f,10.0f)); LinearLayoutParameter* lp2 = LinearLayoutParameter::create(); titleButton->setLayoutParameter(lp2); lp2->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL); lp2->setMargin(Margin(0.0f,10.0f,51); font-family:Arial; font-size:14px; line-height:26px"> LinearLayoutParameter* lp3 = LinearLayoutParameter::create(); button_scale9->setLayoutParameter(lp3); lp3->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL); lp3->setMargin(Margin(0.0f,51); font-family:Arial; font-size:14px; line-height:26px">2.10.8 // Create the layout layout->setLayoutType(LAYOUT_LINEAR_HORIZONTAL); lp1->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL); lp2->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL); lp3->setGravity(LINEAR_GRAVITY_CENTER_VERTICAL); 2.10.9 layout->setLayoutType(LAYOUT_RELATIVE); layout->setBackGroundColor(Color3B::GREEN); (backgroundSize.width - layout->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f + (backgroundSize.height - layout->getSize().height) / 2.0f)); // top left Button* button_TopLeft = Button::create("cocosui/animationbuttonnormal.png",51); font-family:Arial; font-size:14px; line-height:26px"> "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",51); font-family:Arial; font-size:14px; line-height:26px"> "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",51); font-family:Arial; font-size:14px; line-height:26px"> 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",51); font-family:Arial; font-size:14px; line-height:26px"> 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",51); font-family:Arial; font-size:14px; line-height:26px"> "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",51); font-family:Arial; font-size:14px; line-height:26px"> "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",51); font-family:Arial; font-size:14px; line-height:26px"> 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",51); font-family:Arial; font-size:14px; line-height:26px"> 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",51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(button_RightBottom); RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create(); rp_RightBottom->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_BOTTOM); button_RightBottom->setLayoutParameter(rp_RightBottom); 2.10.10 // Create the layout 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); ImageView* imageView_LeftCenter = ImageView::create("cocosui/switch-mask.png"); layout->addChild(imageView_LeftCenter); rp_LeftCenter->setRelativeToWidgetName("rp_Center"); rp_LeftCenter->setAlign(RELATIVE_LOCATION_LEFT_OF_CENTER); imageView_LeftCenter->setLayoutParameter(rp_LeftCenter); ImageView* imageView_RightCenter = ImageView::create("cocosui/switch-mask.png"); layout->addChild(imageView_RightCenter); rp_RightCenter->setRelativeToWidgetName("rp_Center"); rp_RightCenter->setAlign(RELATIVE_LOCATION_RIGHT_OF_CENTER); imageView_RightCenter->setLayoutParameter(rp_RightCenter); 2.11.UIScrollView 2.11.1 创建垂直滚动UI // Create the scrollview by vertical ui::ScrollView* scrollView = ui::ScrollView::create(); scrollView->setSize(Size(280.0f,150.0f)); Size backgroundSize = background->getContentSize(); scrollView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f + (backgroundSize.width - scrollView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f + (backgroundSize.height - scrollView->getSize().height) / 2.0f)); _uiLayer->addChild(scrollView); float innerWidth = scrollView->getSize().width; float innerHeight = scrollView->getSize().height + imageView->getSize().height; scrollView->setInnerContainerSize(Size(innerWidth,innerHeight)); button->setPosition(Point(innerWidth / 2.0f,scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f)); scrollView->addChild(button); titleButton->setPosition(Point(innerWidth / 2.0f,button->getBottomInParent() - button->getSize().height)); scrollView->addChild(titleButton); 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.11.2 // Create the scrollview by horizontal scrollView->setBounceEnabled(true); scrollView->setDirection(SCROLLVIEW_DIR_HORIZONTAL); scrollView->setInnerContainerSize(scrollView->getSize()); (backgroundSize.width - scrollView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (widgetSize.height - backgroundSize.height) / 2.0f + (backgroundSize.height - scrollView->getSize().height) / 2.0f)); float innerWidth = scrollView->getSize().width + imageView->getSize().width; float innerHeight = scrollView->getSize().height; scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f)); titleButton->setPosition(Point(button->getRightInParent() + button->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> button->getBottomInParent() - button->getSize().height / 2.0f)); button_scale9->setPosition(Point(titleButton->getRightInParent() + titleButton->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> titleButton->getBottomInParent() - titleButton->getSize().height / 2.0f)); scrollView->addChild(button_scale9); imageView->setPosition(Point(innerWidth - imageView->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> button_scale9->getBottomInParent() - button_scale9->getSize().height / 2.0f)); scrollView->addChild(imageView); 2.11.3 // Create the dragpanel scrollView->setDirection(SCROLLVIEW_DIR_BOTH); scrollView->setTouchEnabled(true); scrollView->setBounceEnabled(true);//反弹 scrollView->setBackGroundImageScale9Enabled(true); scrollView->setBackGroundImage("cocosui/green_edit.png"); scrollView->setSize(Size(210,122.5)); 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)); 2.11.4 ui::ScrollView* sc = ui::ScrollView::create(); sc->setBackGroundColor(Color3B::GREEN); sc->setBackGroundColorType(LAYOUT_COLOR_SOLID); sc->setDirection(SCROLLVIEW_DIR_BOTH); sc->setInnerContainerSize(Size(480,320)); sc->setSize(Size(100,100)); sc->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f + (backgroundSize.width - sc->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (backgroundSize.height - sc->getSize().height) / 2.0f)); //减速 sc->scrollToPercentBothDirection(Point(50,50),1,true); ImageView* iv = ImageView::create("cocosui/Hello.png"); iv->setPosition(Point(240,51); font-family:Arial; font-size:14px; line-height:26px"> sc->addChild(iv); _uiLayer->addChild(sc); 2.12.UIPageView // Create the page view PageView* pageView = PageView::create(); pageView->setSize(Size(240.0f,130.0f)); pageView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f + (backgroundSize.width - pageView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (backgroundSize.height - pageView->getSize().height) / 2.0f)); for (int i = 0; i < 3; ++i) Layout* layout = Layout::create(); layout->setSize(Size(240.0f,51); font-family:Arial; font-size:14px; line-height:26px"> ImageView* imageView = ImageView::create("cocosui/scrollviewbg.png"); imageView->setScale9Enabled(true); imageView->setSize(Size(240,130)); imageView->setPosition(Point(layout->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(imageView); Text* label = Text::create(StringUtils::format("page %d",(i+1)),51); font-family:Arial; font-size:14px; line-height:26px"> label->setColor(Color3B(192,51); font-family:Arial; font-size:14px; line-height:26px"> label->setPosition(Point(layout->getSize().width / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> layout->addChild(label); pageView->addPage(layout); pageView->addEventListenerPageView(this,pagevieweventselector(UIPageViewTest::pageViewEvent)); _uiLayer->addChild(pageView); 2.12.2 void UIPageViewTest::pageViewEvent(Ref *pSender,PageViewEventType type) case PAGEVIEW_EVENT_TURNING: PageView* pageView = dynamic_cast<PageView*>(pSender); _displayValueLabel->setText(CCString::createWithFormat("page = %ld",pageView->getCurPageIndex() + 1)->getCString()); } 2.13.UIListView 2.13.1 // create list view ex data _array = Array::create(); CC_SAFE_RETAIN(_array); for (int i = 0; i < 20; ++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(240,51); font-family:Arial; font-size:14px; line-height:26px"> listView->setPosition(Point((widgetSize.width - backgroundSize.width) / 2.0f + (backgroundSize.width - listView->getSize().width) / 2.0f,51); font-family:Arial; font-size:14px; line-height:26px"> (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",51); font-family:Arial; font-size:14px; line-height:26px"> 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,51); font-family:Arial; font-size:14px; line-height:26px"> 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 listView->insertDefaultItem(0); // add custom item Button* custom_button = Button::create("cocosui/button.png",51); font-family:Arial; font-size:14px; line-height:26px"> 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(); 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 listView->removeItem(items_count - 1); // set all items layout gravity listView->setGravity(LISTVIEW_GRAVITY_CENTER_VERTICAL); // set items margin listView->setItemsMargin(2.0f); 2.13.2 void UIListViewTest_Vertical::selectedItemEvent(Ref *pSender,ListViewEventType 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()); case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END: CCLOG("select child end index = %ld",51); font-family:Arial; font-size:14px; line-height:26px">2.13.3 listView->setDirection(SCROLLVIEW_DIR_HORIZONTAL); 2.14.UIRichText _richText = RichText::create(); _richText->ignoreContentAdaptWithSize(false); _richText->setSize(Size(100,51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re1 = RichElementText::create(1,Color3B::WHITE,255,"This color is white. ","Helvetica",10); RichElementText* re2 = RichElementText::create(2,Color3B::YELLOW,"And this is yellow. ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re3 = RichElementText::create(3,Color3B::BLUE,"This one is blue. ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re4 = RichElementText::create(4,Color3B::GREEN,"And green. ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementText* re5 = RichElementText::create(5,Color3B::RED,"Last one is red ",51); font-family:Arial; font-size:14px; line-height:26px"> RichElementImage* reimg = RichElementImage::create(6,"cocosui/sliderballnormal.png"); cocostudio::ArmatureDataManager::getInstance()->addArmatureFileInfo("cocosui/100/100.ExportJson"); cocostudio::Armature *pAr = cocostudio::Armature::create("100"); pAr->getAnimation()->play("Animation1"); RichElementCustomNode* recustom = RichElementCustomNode::create(1,pAr); RichElementText* re6 = RichElementText::create(7,Color3B::ORANGE,"Have fun!! ",51); font-family:Arial; font-size:14px; line-height:26px"> _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(10); _widget->addChild(_richText); 三、在CocosStudio的UI编辑器中获取组件对象 3.1使用UI编辑器 3.2导出UI文件 3.3在Cocos2d-x中加载UI文件 3.4获取UI层中的子对象 四、UI组件详解 4.1使用UIButton 4.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,51); font-family:Arial; font-size:14px; line-height:26px"> (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_123")); Button* title_button = static_cast<Button*>(Helper::seekWidgetByName(root,"Button_126")); title_button->addTouchEventListener(this,51); font-family:Arial; font-size:14px; line-height:26px"> Button* scale9_button = static_cast<Button*>(Helper::seekWidgetByName(root,"Button_129")); scale9_button->addTouchEventListener(this,51); font-family:Arial; font-size:14px; line-height:26px"> _displayValueLabel = Text::create(); _displayValueLabel->setFontName("fonts/Marker Felt.ttf"); _displayValueLabel->setFontSize(30); _displayValueLabel->setText("No event"); _displayValueLabel->setPosition(Point(_layout->getSize().width / 2,51); font-family:Arial; font-size:14px; line-height:26px"> _layout->getSize().height - _displayValueLabel->getSize().height * 1.75f)); _touchGroup->addChild(_displayValueLabel); return true; return false; void UIButtonTest_Editor::touchEvent(Ref *pSender,51); font-family:Arial; font-size:14px; line-height:26px"> case TOUCH_EVENT_BEGAN: _displayValueLabel->setText("Touch Down"); _displayValueLabel->setText("Touch Moved"); _displayValueLabel->setText("Touch Ended"); _displayValueLabel->setText("Touch Canceled"); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |