ccColor3B如何把钱存到支付宝存到NSMuta...
点击联系发帖人
时间：2011-10-27 12:54
Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用 - 推酷
Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用
最近忙死了，得空发表一篇关于所有的Cocostudio中的UI组件使用的教程，其实是对所有UI组件的Api介绍，作为手册收藏下吧！！
CocosStudio UI组件
按钮UIButton
复选框UICheckBox
滑块UISlider
图片UIImageView
进度条UILoadingBar
纹理文本 UITextAtlas
字体文本 UIText
图片字体文本 UITextBMFont
文本区域 UITextField
布局组件 UILayout
滚动组件 UIScrollView
页面切换组件 UIPageView
列表组件 & UIListView
所有控件都继承 UIWidget
可以通过addChild()添加UIWidget类型的节点
可以通过addRender()添加CCNode类型的节点
一、使用方法
1.1 在解决方案中添加项目并添加引用
libCocostudio
libExtensions
1.2 在项目中引用以下2个头文件
#include &extensions/cocos-ext.h&
#include &ui/CocosGUI.h&
USING_NS_CC;
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());
& & & & & &
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());
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-&setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
button-&setSize(Size(150, 70));
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());
case CHECKBOX_STATE_EVENT_UNSELECTED:
_displayValueLabel-&setText(String::createWithFormat(&Unselected&)-&getCString());
2.3.UISlider
// 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);&
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());
// 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(250.0f, 19));
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.UIImageView
2.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);
// Create the imageview
ImageView* imageView = ImageView::create(&cocosui/buttonHighlighted.png&);
imageView-&setScale9Enabled(true);
imageView-&setSize(Size(300, 115));
imageView-&setPosition(Point(widgetSize.width / 2.0f,
widgetSize.height / 2.0f));
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,
widgetSize.height / 2.0f + loadingBar-&getSize().height / 4.0f));
_uiLayer-&addChild(loadingBar);
2.5.2 修改进度条的长度
void UILoadingBarTest_Left::update(float delta)
if (_count & 100)
_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(300, 13)); & & & &
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&, 17, 22, &0&);
textAtlas-&setPosition(Point((widgetSize.width) / 2, widgetSize.height / 2.0f));
_uiLayer-&addChild(textAtlas); &
2.7.UIText
// 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);
// Create the line wrap
Text* text = Text::create(&Text can line wrap&,&AmericanTypewriter&,32);
text-&ignoreContentAdaptWithSize(false);
text-&setSize(Size(280, 150));
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&,30);
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
// Create the textfield
TextField* textField = TextField::create(&input words here&,&fonts/Marker Felt.ttf&,30);
textField-&setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
textField-&addEventListenerTextField(this, textfieldeventselector(UITextFieldTest::textFieldEvent));
_uiLayer-&addChild(textField);
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.225f,
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* textField = dynamic_cast&TextField*&(pSender);
Size screenSize = CCDirector::getInstance()-&getWinSize();
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);
textField-&setPasswordEnabled(true);
textField-&setPasswordStyleText(&*&);
TextField* textField = TextField::create(&input words here&,&fonts/Marker Felt.ttf&,30);
textField-&ignoreContentAdaptWithSize(false);
textField-&setSize(Size(240, 160));
textField-&setTextHorizontalAlignment(TextHAlignment::CENTER);
textField-&setTextVerticalAlignment(TextVAlignment::CENTER);
2.10.UILayout
// Create the layout
Layout* layout = Layout::create();
layout-&setSize(Size(280, 150));
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.10.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(100.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);
layout-&setBackGroundColorType(LAYOUT_COLOR_SOLID);
layout-&setBackGroundColor(Color3B(128, 128, 128));
layout-&setSize(Size(280, 150));
layout-&setBackGroundColorType(LAYOUT_COLOR_GRADIENT);
layout-&setBackGroundColor(Color3B(64, 64, 64), Color3B(192, 192, 192));
layout-&setClippingEnabled(true);
layout-&setBackGroundImage(&cocosui/Hello.png&);
layout-&setBackGroundImageScale9Enabled(true);
layout-&setBackGroundImage(&cocosui/green_edit.png&);
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_LINEAR_VERTICAL);
layout-&setSize(Size(280, 150)); & & & &
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, 10.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, 10.0f, 0.0f, 10.0f));
Button* button_scale9 = Button::create(&cocosui/button.png&, &cocosui/buttonHighlighted.png&);
button_scale9-&setScale9Enabled(true);
button_scale9-&setSize(Size(100.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, 10.0f, 0.0f, 10.0f));&
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_LINEAR_HORIZONTAL);
layout-&setClippingEnabled(true);
layout-&setSize(Size(280, 150)); & & & &
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, 10.0f, 0.0f, 10.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, 10.0f, 0.0f, 10.0f));
Button* button_scale9 = Button::create(&cocosui/button.png&, &cocosui/buttonHighlighted.png&);
button_scale9-&setScale9Enabled(true);
button_scale9-&setSize(Size(100.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, 10.0f, 0.0f, 10.0f));
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_RELATIVE);
layout-&setSize(Size(280, 150));
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);
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);
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_RELATIVE);
layout-&setSize(Size(280, 150));
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);
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.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,
(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().
float innerHeight = scrollView-&getSize().height + imageView-&getSize().
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(100.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); & & & & & &
// Create the scrollview by horizontal
ui::ScrollView* scrollView = ui::ScrollView::create();
scrollView-&setBounceEnabled(true);
scrollView-&setDirection(SCROLLVIEW_DIR_HORIZONTAL);
scrollView-&setSize(Size(280.0f, 150.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().
float innerHeight = scrollView-&getSize().
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(100.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); &
// 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(210, 122.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);
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));
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(50, 50), 1, true);
ImageView* iv = ImageView::create(&cocosui/Hello.png&);
iv-&setPosition(Point(240, 160));
sc-&addChild(iv);
_uiLayer-&addChild(sc);
2.12.UIPageView
// Create the page view
PageView* pageView = PageView::create();
pageView-&setSize(Size(240.0f, 130.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(240.0f, 130.0f));
ImageView* imageView = ImageView::create(&cocosui/scrollviewbg.png&);
imageView-&setScale9Enabled(true);
imageView-&setSize(Size(240, 130));
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&, 30);
label-&setColor(Color3B(192, 192, 192));
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);
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());
2.13.UIListView
// 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, 130));
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_ ++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);
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());
case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END:
ListView* listView = static_cast&ListView*&(pSender);
CC_UNUSED_PARAM(listView);
CCLOG(&select child end index = %ld&, listView-&getCurSelectedIndex());
// 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(240, 130));
2.14.UIRichText
_richText = RichText::create();
_richText-&ignoreContentAdaptWithSize(false);
_richText-&setSize(Size(100, 100));
RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, 255, &This color is white. &, &Helvetica&, 10);
RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 255, &And this is yellow. &, &Helvetica&, 10);
RichElementText* re3 = RichElementText::create(3, Color3B::BLUE, 255, &This one is blue. &, &Helvetica&, 10);
RichElementText* re4 = RichElementText::create(4, Color3B::GREEN, 255, &And green. &, &Helvetica&, 10);
RichElementText* re5 = RichElementText::create(5, Color3B::RED, 255, &Last one is red &, &Helvetica&, 10);
RichElementImage* reimg = RichElementImage::create(6, Color3B::WHITE, 255, &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, Color3B::WHITE, 255, pAr);
RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, 255, &Have fun!! &, &Helvetica&, 10);
_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,
(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-&addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
Button* title_button = static_cast&Button*&(Helper::seekWidgetByName(root, &Button_126&));
title_button-&addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
Button* scale9_button = static_cast&Button*&(Helper::seekWidgetByName(root, &Button_129&));
scale9_button-&addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
_displayValueLabel = Text::create();
_displayValueLabel-&setFontName(&fonts/Marker Felt.ttf&);
_displayValueLabel-&setFontSize(30);
_displayValueLabel-&setText(&No event&);
_displayValueLabel-&setPosition(Point(_layout-&getSize().width / 2,
_layout-&getSize().height - _displayValueLabel-&getSize().height * 1.75f));
_touchGroup-&addChild(_displayValueLabel);
void UIButtonTest_Editor::touchEvent(Ref *pSender, TouchEventType type)
switch (type)
case TOUCH_EVENT_BEGAN:
_displayValueLabel-&setText(&Touch Down&);
case TOUCH_EVENT_MOVED:
_displayValueLabel-&setText(&Touch Moved&);
case TOUCH_EVENT_ENDED:
_displayValueLabel-&setText(&Touch Ended&);
case TOUCH_EVENT_CANCELED:
_displayValueLabel-&setText(&Touch Canceled&);
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}
Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用
最近忙死了，得空发表一篇关于所有的Cocostudio中的UI组件使用的教程，其实是对所有UI组件的Api介绍，作为手册收藏下吧！！
CocosStudio UI组件
按钮UIButton
复选框UICheckBox
滑块UISlider
图片UIImageView
进度条UILoadingBar
纹理文本 UITextAtlas
字体文本 UIText
图片字体文本 UITextBMFont
文本区域 UITextField
布局组件 UILayout
滚动组件 UIScrollView
页面切换组件 UIPageView
列表组件 & UIListView
所有控件都继承 UIWidget
可以通过addChild()添加UIWidget类型的节点
可以通过addRender()添加CCNode类型的节点
一、使用方法
1.1 在解决方案中添加项目并添加引用
libCocostudio
libExtensions
1.2 在项目中引用以下2个头文件
#include &extensions/cocos-ext.h&
#include &ui/CocosGUI.h&
USING_NS_CC;
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());
& & & & & &
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());
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-&setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
button-&setSize(Size(150, 70));
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());
case CHECKBOX_STATE_EVENT_UNSELECTED:
_displayValueLabel-&setText(String::createWithFormat(&Unselected&)-&getCString());
2.3.UISlider
// 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);&
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());
// 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(250.0f, 19));
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.UIImageView
2.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);
// Create the imageview
ImageView* imageView = ImageView::create(&cocosui/buttonHighlighted.png&);
imageView-&setScale9Enabled(true);
imageView-&setSize(Size(300, 115));
imageView-&setPosition(Point(widgetSize.width / 2.0f,
widgetSize.height / 2.0f));
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,
widgetSize.height / 2.0f + loadingBar-&getSize().height / 4.0f));
_uiLayer-&addChild(loadingBar);
2.5.2 修改进度条的长度
void UILoadingBarTest_Left::update(float delta)
if (_count & 100)
_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(300, 13)); & & & &
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&, 17, 22, &0&);
textAtlas-&setPosition(Point((widgetSize.width) / 2, widgetSize.height / 2.0f));
_uiLayer-&addChild(textAtlas); &
2.7.UIText
// 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);
// Create the line wrap
Text* text = Text::create(&Text can line wrap&,&AmericanTypewriter&,32);
text-&ignoreContentAdaptWithSize(false);
text-&setSize(Size(280, 150));
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&,30);
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
// Create the textfield
TextField* textField = TextField::create(&input words here&,&fonts/Marker Felt.ttf&,30);
textField-&setPosition(Point(widgetSize.width / 2.0f, widgetSize.height / 2.0f));
textField-&addEventListenerTextField(this, textfieldeventselector(UITextFieldTest::textFieldEvent));
_uiLayer-&addChild(textField);
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.225f,
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* textField = dynamic_cast&TextField*&(pSender);
Size screenSize = CCDirector::getInstance()-&getWinSize();
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);
textField-&setPasswordEnabled(true);
textField-&setPasswordStyleText(&*&);
TextField* textField = TextField::create(&input words here&,&fonts/Marker Felt.ttf&,30);
textField-&ignoreContentAdaptWithSize(false);
textField-&setSize(Size(240, 160));
textField-&setTextHorizontalAlignment(TextHAlignment::CENTER);
textField-&setTextVerticalAlignment(TextVAlignment::CENTER);
2.10.UILayout
// Create the layout
Layout* layout = Layout::create();
layout-&setSize(Size(280, 150));
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.10.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(100.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);
layout-&setBackGroundColorType(LAYOUT_COLOR_SOLID);
layout-&setBackGroundColor(Color3B(128, 128, 128));
layout-&setSize(Size(280, 150));
layout-&setBackGroundColorType(LAYOUT_COLOR_GRADIENT);
layout-&setBackGroundColor(Color3B(64, 64, 64), Color3B(192, 192, 192));
layout-&setClippingEnabled(true);
layout-&setBackGroundImage(&cocosui/Hello.png&);
layout-&setBackGroundImageScale9Enabled(true);
layout-&setBackGroundImage(&cocosui/green_edit.png&);
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_LINEAR_VERTICAL);
layout-&setSize(Size(280, 150)); & & & &
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, 10.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, 10.0f, 0.0f, 10.0f));
Button* button_scale9 = Button::create(&cocosui/button.png&, &cocosui/buttonHighlighted.png&);
button_scale9-&setScale9Enabled(true);
button_scale9-&setSize(Size(100.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, 10.0f, 0.0f, 10.0f));&
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_LINEAR_HORIZONTAL);
layout-&setClippingEnabled(true);
layout-&setSize(Size(280, 150)); & & & &
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, 10.0f, 0.0f, 10.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, 10.0f, 0.0f, 10.0f));
Button* button_scale9 = Button::create(&cocosui/button.png&, &cocosui/buttonHighlighted.png&);
button_scale9-&setScale9Enabled(true);
button_scale9-&setSize(Size(100.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, 10.0f, 0.0f, 10.0f));
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_RELATIVE);
layout-&setSize(Size(280, 150));
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);
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);
// Create the layout
Layout* layout = Layout::create();
layout-&setLayoutType(LAYOUT_RELATIVE);
layout-&setSize(Size(280, 150));
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);
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.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,
(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().
float innerHeight = scrollView-&getSize().height + imageView-&getSize().
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(100.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); & & & & & &
// Create the scrollview by horizontal
ui::ScrollView* scrollView = ui::ScrollView::create();
scrollView-&setBounceEnabled(true);
scrollView-&setDirection(SCROLLVIEW_DIR_HORIZONTAL);
scrollView-&setSize(Size(280.0f, 150.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().
float innerHeight = scrollView-&getSize().
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(100.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); &
// 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(210, 122.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);
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));
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(50, 50), 1, true);
ImageView* iv = ImageView::create(&cocosui/Hello.png&);
iv-&setPosition(Point(240, 160));
sc-&addChild(iv);
_uiLayer-&addChild(sc);
2.12.UIPageView
// Create the page view
PageView* pageView = PageView::create();
pageView-&setSize(Size(240.0f, 130.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(240.0f, 130.0f));
ImageView* imageView = ImageView::create(&cocosui/scrollviewbg.png&);
imageView-&setScale9Enabled(true);
imageView-&setSize(Size(240, 130));
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&, 30);
label-&setColor(Color3B(192, 192, 192));
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);
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());
2.13.UIListView
// 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, 130));
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_ ++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);
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());
case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END:
ListView* listView = static_cast&ListView*&(pSender);
CC_UNUSED_PARAM(listView);
CCLOG(&select child end index = %ld&, listView-&getCurSelectedIndex());
// 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(240, 130));
2.14.UIRichText
_richText = RichText::create();
_richText-&ignoreContentAdaptWithSize(false);
_richText-&setSize(Size(100, 100));
RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, 255, &This color is white. &, &Helvetica&, 10);
RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 255, &And this is yellow. &, &Helvetica&, 10);
RichElementText* re3 = RichElementText::create(3, Color3B::BLUE, 255, &This one is blue. &, &Helvetica&, 10);
RichElementText* re4 = RichElementText::create(4, Color3B::GREEN, 255, &And green. &, &Helvetica&, 10);
RichElementText* re5 = RichElementText::create(5, Color3B::RED, 255, &Last one is red &, &Helvetica&, 10);
RichElementImage* reimg = RichElementImage::create(6, Color3B::WHITE, 255, &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, Color3B::WHITE, 255, pAr);
RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, 255, &Have fun!! &, &Helvetica&, 10);
_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,
(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-&addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
Button* title_button = static_cast&Button*&(Helper::seekWidgetByName(root, &Button_126&));
title_button-&addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
Button* scale9_button = static_cast&Button*&(Helper::seekWidgetByName(root, &Button_129&));
scale9_button-&addTouchEventListener(this, toucheventselector(UIButtonTest_Editor::touchEvent));
_displayValueLabel = Text::create();
_displayValueLabel-&setFontName(&fonts/Marker Felt.ttf&);
_displayValueLabel-&setFontSize(30);
_displayValueLabel-&setText(&No event&);
_displayValueLabel-&setPosition(Point(_layout-&getSize().width / 2,
_layout-&getSize().height - _displayValueLabel-&getSize().height * 1.75f));
_touchGroup-&addChild(_displayValueLabel);
void UIButtonTest_Editor::touchEvent(Ref *pSender, TouchEventType type)
switch (type)
case TOUCH_EVENT_BEGAN:
_displayValueLabel-&setText(&Touch Down&);
case TOUCH_EVENT_MOVED:
_displayValueLabel-&setText(&Touch Moved&);
case TOUCH_EVENT_ENDED:
_displayValueLabel-&setText(&Touch Ended&);
case TOUCH_EVENT_CANCELED:
_displayValueLabel-&setText(&Touch Canceled&);
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}
我要回帖
更多关于 如何把钱存到支付宝 的文章
更多推荐
- ·武杰新疆师范石河子大学知名教授教授
- ·还有人用facebook怎么开店铺进行外贸推广营销吗？ 跨境王facebook怎么开店铺营销软件有用吗？
- ·阅读必备的情感短句,句句戳心的句子戳心短句窝
- ·easmexe文件怎么打开手机用什么软件打开？
- ·酷菠萝贵不贵，有人从这个美妆店品牌十大排名榜商城买过东西吗？
- ·2011年中国十大2011家纺十大品牌品牌是几家？
- ·节能灯一年的社会总需求求是多少个呀？
- ·品牌饮品店设备咖啡、饮品、奶茶技术、设备低...
- ·中国工商银行贷款利息是多少5万时间二年利息是多少...
- ·我的QQ的财付通开通财付通不是要填真的姓名和...
- ·银行会计从业资格考试试怎样退钱？能退到账户上...
- ·网络版民间合伙私募股权 有限合伙经济
- ·各位好，我想开一家汽车美容店转让但我不包做...
- ·中国农业银行官网企业网上银行智博版管理员为...
- ·中国建设银行利息贷款5万时间二年利息是多少...
- ·每月1000到2000余钱 设计师没女朋友 ...
- ·美的电器图片官网
- ·北京哪里批发正规的无烟艾条批发
- ·怎么进行农产品现货交易技巧.....
- ·天津滨海新区区货运代理发展趋势 麻烦大家了
- ·ccColor3B如何把钱存到支付宝存到NSMuta...
- ·“以自己生产的产品或外购商品作为福利房和商品房时...
- ·什么叫携程旅行信用卡卡
- ·2011年2011九月份电影欧元对人民币汇率
- ·富利黄金交易赌博平台黄金城gcgc好不，有什么好的黄金交...
- ·农村社会新型农村养老保险险手册上的名字写错了字怎...
- ·今天晚上17点40分（周四）从工行个人网上银行网上...
- ·2011最新韩版针织连衣裙连衣裙哪里有卖呀，姐姐...
- ·兼职做完美芦荟胶会员价产品好做吗 他们办会员要买8...
- ·投资五金店加盟赚钱不？
- ·转移支付手指麻是什么病意思？
- ·股票如何买入股票。，！！！
- ·付转让费是否直接做营业费用 销售费用
- ·会花钱才世界上最会赚钱的人是吧？
