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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章,将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@163.com微信公众号:HopToad 欢迎转载,转载标注出处:http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址:http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从Cocos2D-x官网上下载,进入网页http://www.cocos2d-x.org/download,点击Cocos2d-x以下的Download  v3.0,保存到自定义的文件夹2:从python官网上下载。进入网页https://www.python.org/downloads/,我当前下载的是3.4.0(当前最新
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发引擎,易学易用,支持多种智能移动平台。官网地址:http://cocos2d-x.org/当前版本:2.0    有很多的学习资料,在这里我只做为自己的笔记记录下来,错误之处还请指出。在VisualStudio2008平台的编译:1.下载当前稳
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱:appdevzw@163.com微信公众号:HopToadAPK下载地址:http://download.csdn.net/detailotbaron/8446223源码下载地址:http://download.csdn.net/
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址:https://github.com/cocos2d/cocos2d-x1.打开QtCreator,菜单栏→"打开文件或项目...",打开cocos2d-x目录下的CMakeLists.txt文件;2.弹出CMake向导,如下图所示:设置
 下载地址:链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后,解压进入build目录使用vs2013打开工程设置平台工具集,打开设置界面设置: 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32,里面就是编译
分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net前言上次用象棋演示了cocos2dx的基本用法,但是对cocos2dx并没有作深入的讨论,这次以超级马里奥的源代码为线索,我们一起来学习超级马里奥的实
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果:好了,不多解释,本篇到此为止。(旁白: 噗。就这样结束了?)啊才怪~我们来看看代码:[cpp] viewplaincopyprint?CCContro
原文链接:http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d,我们将自己写一个场景类,但我们不会走的太远,凡是都要循序渐进,哪怕只前进一点点,那也至少是前进了,总比贪多嚼不烂一头雾水的好。在上一节中我们建
2019独角兽企业重金招聘Python工程师标准>>>cocos2d2.0之后加入了一种九宫格的实现,主要作用是用来拉伸图片,这样的好处在于保留图片四个角不变形的同时,对图片中间部分进行拉伸,来满足一些控件的自适应(PS: 比如包括按钮,对话框,最直观的形象就是ios里的短信气泡了),这就要求图
原文链接:http://www.cnblogs.com/linji/p/3599478.html1.环境和工具准备Win7VS2010/2012,至于2008v2版本之后似乎就不支持了。 2.安装pythonv.2.0版本之前是用vs模板创建工程的,到vs2.2之后就改用python创建了。到python官网下载版本2.7.5的,然后
环境:ubuntu14.04adt-bundle-linux-x86_64android-ndk-r9d-linux-x86_64cocos2d-x-3.0正式版apache-ant1.9.3python2.7(ubuntu自带)加入环境变量exportANDROID_SDK_ROOT=/home/yangming/adt-bundle-linux/sdkexportPATH=${PATH}:/$ANDROID_SDK_ROOTools/export
1开发背景游戏程序设计涉及了学科中的各个方面,鉴于目的在于学习与进步,本游戏《FlappyBird》采用了两个不同的开发方式来开发本款游戏,一类直接采用win32底层API来实现,另一类采用当前火热的cocos2d-x游戏引擎来开发本游戏。2需求分析2.1数据分析本项目要开发的是一款游
原文链接:http://www.cnblogs.com/linji/p/3599912.html//纯色色块控件(锚点默认左下角)CCLayerColor*ccc=CCLayerColor::create(ccc4(255,0,0,128),200,100);//渐变色块控件CCLayerGradient*ccc=CCLayerGradient::create(ccc4(255,0,0,
原文链接:http://www.cnblogs.com/linji/p/3599488.html//载入一张图片CCSprite*leftDoor=CCSprite::create("loading/door.png");leftDoor->setAnchorPoint(ccp(1,0.5));//设置锚点为右边中心点leftDoor->setPosition(ccp(240,160));/
为了答谢广大学员对智捷课堂以及关老师的支持,现购买51CTO学院关老师的Cocos2d-x课程之一可以送智捷课堂编写图书一本(专题可以送3本)。一、Cocos2d-x课程列表:1、Cocos2d-x入门与提高视频教程__Part22、Cocos2d-x数据持久化与网络通信__Part33、Cocos2d-x架构设计与性能优化内存优
Spawn让多个action同时执行。Spawn有多种不同的create方法,最终都调用了createWithTwoActions(FiniteTimeAction*action1,FiniteTimeAction*action2)方法。createWithTwoActions调用initWithTwoActions方法:对两个action变量初始化:_one=action1;_two=action2;如果两个a
需要环境:php,luajit.昨天在cygwin上安装php和luajit环境,这真特么是一个坑。建议不要用虚拟环境安装打包环境,否则可能会出现各种莫名问题。折腾了一下午,最终将环境转向linux。其中,luajit的安装脚本已经在quick-cocos2d-x-develop/bin/中,直接luajit_install.sh即可。我的lin
v3.0相对v2.2来说,最引人注意的。应该是对触摸层级的优化。和lambda回调函数的引入(嗯嗯,不枉我改了那么多类名。话说,每次cocos2dx大更新。总要改掉一堆类名函数名)。这些特性应该有不少人研究了,所以今天说点跟图片有关的东西。v3.0在载入图片方面也有了非常大改变,仅仅只是