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

转自：http://demo.netfoucs.com/sdhjob/article/details/38681239

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

break;

case TOUCH_EVENT_ENDED:

_displayValueLabel->setText(String::createWithFormat("Touch Up")->getCString());

break;

case TOUCH_EVENT_CANCELED:

_displayValueLabel->setText(String::createWithFormat("Touch Cancelled")->getCString());

break;

default:

break;

}

}

2.1.3 使用9Path图片

// Create the button

Button* button = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");

// open scale9 render

button->setScale9Enabled(true);

button->setCapInsets(Rect(5,5,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());

break;

case CHECKBOX_STATE_EVENT_UNSELECTED:

_displayValueLabel->setText(String::createWithFormat("Unselected")->getCString());

break;

default:

break;

}

}

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

2.4.2

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

{

_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* 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("1234567890", "cocosui/labelatlas.png", 17, 22, "0");

textAtlas->setPosition(Point((widgetSize.width) / 2, widgetSize.height / 2.0f));

_uiLayer->addChild(textAtlas);

2.7.UIText

2.7.1

// Create the text

Text* text = Text::create("Text", "AmericanTypewriter", 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","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

2.9.1

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

2.9.2

void UITextFieldTest::textFieldEvent(Ref *pSender, TextFiledEventType type)

{

switch (type)

{

case TEXTFIELD_EVENT_ATTACH_WITH_IME:

{

TextField* textField = dynamic_cast<TextField*>(pSender);

Size screenSize = CCDirector::getInstance()->getWinSize();

textField->runAction(CCMoveTo::create(0.225f,

Point(screenSize.width / 2.0f, screenSize.height / 2.0f + textField->getContentSize().height / 2.0f)));

_displayValueLabel->setText(String::createWithFormat("attach with IME")->getCString());

}

break;

case TEXTFIELD_EVENT_DETACH_WITH_IME:

{

TextField* textField = dynamic_cast<TextField*>(pSender);

Size screenSize = CCDirector::getInstance()->getWinSize();

textField->runAction(CCMoveTo::create(0.175f, Point(screenSize.width / 2.0f, screenSize.height / 2.0f)));

_displayValueLabel->setText(String::createWithFormat("detach with IME")->getCString());

}

break;

case TEXTFIELD_EVENT_INSERT_TEXT:

_displayValueLabel->setText(String::createWithFormat("insert words")->getCString());

break;

case TEXTFIELD_EVENT_DELETE_BACKWARD:

_displayValueLabel->setText(String::createWithFormat("delete word")->getCString());

break;

default:

break;

}

}

2.9.2

textField->setMaxLengthEnabled(true);

textField->setMaxLength(3);

2.9.3

textField->setPasswordEnabled(true);

textField->setPasswordStyleText("*");

2.9.4

TextField* textField = TextField::create("input words here","fonts/Marker Felt.ttf",30);

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

2.10.3

layout->setBackGroundColorType(LAYOUT_COLOR_SOLID);

layout->setBackGroundColor(Color3B(128, 128, 128));

layout->setSize(Size(280, 150));

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

2.10.8

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

2.10.9

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

// center

Button* buttonCenter = Button::create("cocosui/animationbuttonnormal.png",

"cocosui/animationbuttonpressed.png");

layout->addChild(buttonCenter);

RelativeLayoutParameter* rpCenter = RelativeLayoutParameter::create();

rpCenter->setAlign(RELATIVE_CENTER_IN_PARENT);

buttonCenter->setLayoutParameter(rpCenter);

// right center

Button* button_RightCenter = Button::create("cocosui/animationbuttonnormal.png",

"cocosui/animationbuttonpressed.png");

layout->addChild(button_RightCenter);

RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();

rp_RightCenter->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_CENTER_VERTICAL);

button_RightCenter->setLayoutParameter(rp_RightCenter);

// left bottom

Button* button_LeftBottom = Button::create("cocosui/animationbuttonnormal.png",

"cocosui/animationbuttonpressed.png");

layout->addChild(button_LeftBottom);

RelativeLayoutParameter* rp_LeftBottom = RelativeLayoutParameter::create();

rp_LeftBottom->setAlign(RELATIVE_ALIGN_PARENT_LEFT_BOTTOM);

button_LeftBottom->setLayoutParameter(rp_LeftBottom);

// bottom center

Button* button_BottomCenter = Button::create("cocosui/animationbuttonnormal.png",

"cocosui/animationbuttonpressed.png");

layout->addChild(button_BottomCenter);

RelativeLayoutParameter* rp_BottomCenter = RelativeLayoutParameter::create();

rp_BottomCenter->setAlign(RELATIVE_ALIGN_PARENT_BOTTOM_CENTER_HORIZONTAL);

button_BottomCenter->setLayoutParameter(rp_BottomCenter);

// right bottom

Button* button_RightBottom = Button::create("cocosui/animationbuttonnormal.png",

"cocosui/animationbuttonpressed.png");

layout->addChild(button_RightBottom);

RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create();

rp_RightBottom->setAlign(RELATIVE_ALIGN_PARENT_RIGHT_BOTTOM);

button_RightBottom->setLayoutParameter(rp_RightBottom);

2.10.10

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

// center

ImageView* imageView_Center = ImageView::create("cocosui/scrollviewbg.png");

layout->addChild(imageView_Center);

RelativeLayoutParameter* rp_Center = RelativeLayoutParameter::create();

rp_Center->setRelativeName("rp_Center");

rp_Center->setAlign(RELATIVE_CENTER_IN_PARENT);

imageView_Center->setLayoutParameter(rp_Center);

// above center

ImageView* imageView_AboveCenter = ImageView::create("cocosui/switch-mask.png");

layout->addChild(imageView_AboveCenter);

RelativeLayoutParameter* rp_AboveCenter = RelativeLayoutParameter::create();

rp_AboveCenter->setRelativeToWidgetName("rp_Center");

rp_AboveCenter->setAlign(RELATIVE_LOCATION_ABOVE_CENTER);

imageView_AboveCenter->setLayoutParameter(rp_AboveCenter);

// below center

ImageView* imageView_BelowCenter = ImageView::create("cocosui/switch-mask.png");

layout->addChild(imageView_BelowCenter);

RelativeLayoutParameter* rp_BelowCenter = RelativeLayoutParameter::create();

rp_BelowCenter->setRelativeToWidgetName("rp_Center");

rp_BelowCenter->setAlign(RELATIVE_LOCATION_BELOW_CENTER);

imageView_BelowCenter->setLayoutParameter(rp_BelowCenter);

// left center

ImageView* imageView_LeftCenter = ImageView::create("cocosui/switch-mask.png");

layout->addChild(imageView_LeftCenter);

RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create();

rp_LeftCenter->setRelativeToWidgetName("rp_Center");

rp_LeftCenter->setAlign(RELATIVE_LOCATION_LEFT_OF_CENTER);

imageView_LeftCenter->setLayoutParameter(rp_LeftCenter);

// right center

ImageView* imageView_RightCenter = ImageView::create("cocosui/switch-mask.png");

layout->addChild(imageView_RightCenter);

RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();

rp_RightCenter->setRelativeToWidgetName("rp_Center");

rp_RightCenter->setAlign(RELATIVE_LOCATION_RIGHT_OF_CENTER);

imageView_RightCenter->setLayoutParameter(rp_RightCenter);

2.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().width;

float innerHeight = scrollView->getSize().height + imageView->getSize().height;

scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));

Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");

button->setPosition(Point(innerWidth / 2.0f, scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));

scrollView->addChild(button);

Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");

titleButton->setTitleText("Title Button");

titleButton->setPosition(Point(innerWidth / 2.0f, button->getBottomInParent() - button->getSize().height));

scrollView->addChild(titleButton);

Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");

button_scale9->setScale9Enabled(true);

button_scale9->setSize(Size(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);

2.11.2

// 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().width;

float innerHeight = scrollView->getSize().height;

scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));

Button* button = Button::create("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png");

button->setPosition(Point(button->getSize().width / 2.0f,

scrollView->getInnerContainerSize().height - button->getSize().height / 2.0f));

scrollView->addChild(button);

Button* titleButton = Button::create("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png");

titleButton->setTitleText("Title Button");

titleButton->setPosition(Point(button->getRightInParent() + button->getSize().width / 2.0f,

button->getBottomInParent() - button->getSize().height / 2.0f));

scrollView->addChild(titleButton);

Button* button_scale9 = Button::create("cocosui/button.png", "cocosui/buttonHighlighted.png");

button_scale9->setScale9Enabled(true);

button_scale9->setSize(Size(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);

2.11.3

// Create the dragpanel

ui::ScrollView* scrollView = ui::ScrollView::create();

scrollView->setDirection(SCROLLVIEW_DIR_BOTH);

scrollView->setTouchEnabled(true);

scrollView->setBounceEnabled(true);//反弹

scrollView->setBackGroundImageScale9Enabled(true);

scrollView->setBackGroundImage("cocosui/green_edit.png");

scrollView->setSize(Size(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);

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

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

2.12.2

void UIPageViewTest::pageViewEvent(Ref *pSender, PageViewEventType type)

{

switch (type)

{

case PAGEVIEW_EVENT_TURNING:

{

PageView* pageView = dynamic_cast<PageView*>(pSender);

_displayValueLabel->setText(CCString::createWithFormat("page = %ld", pageView->getCurPageIndex() + 1)->getCString());

}

break;

default:

break;

}

}

2.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, 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_count; ++i)

{

Widget* item = listView->getItem(i);

Button* button = static_cast<Button*>(item->getChildByName("Title Button"));

ssize_t index = listView->getIndex(item);

button->setTitleText(static_cast<__String*>(_array->getObjectAtIndex(index))->getCString());

}

// remove last item

listView->removeLastItem();

// remove item by index

items_count = items.size();

listView->removeItem(items_count - 1);

// set all items layout gravity

listView->setGravity(LISTVIEW_GRAVITY_CENTER_VERTICAL);

// set items margin

listView->setItemsMargin(2.0f);

2.13.2

void UIListViewTest_Vertical::selectedItemEvent(Ref *pSender, ListViewEventType type)

{

switch (type)

{

case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_START:

{

ListView* listView = static_cast<ListView*>(pSender);

CC_UNUSED_PARAM(listView);

CCLOG("select child start index = %ld", listView->getCurSelectedIndex());

break;

}

case cocos2d::ui::LISTVIEW_ONSELECTEDITEM_END:

{

ListView* listView = static_cast<ListView*>(pSender);

CC_UNUSED_PARAM(listView);

CCLOG("select child end index = %ld", listView->getCurSelectedIndex());

break;

}

default:

break;

}

}

2.13.3

// Create the list view ex

ListView* listView = ListView::create();

// set list view ex direction

listView->setDirection(SCROLLVIEW_DIR_HORIZONTAL);

listView->setTouchEnabled(true);

listView->setBounceEnabled(true);

listView->setBackGroundImage("cocosui/green_edit.png");

listView->setBackGroundImageScale9Enabled(true);

listView->setSize(Size(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);

return true;

}

return false;

}

void UIButtonTest_Editor::touchEvent(Ref *pSender, TouchEventType type)

{

switch (type)

{

case TOUCH_EVENT_BEGAN:

_displayValueLabel->setText("Touch Down");

break;

case TOUCH_EVENT_MOVED:

_displayValueLabel->setText("Touch Moved");

break;

case TOUCH_EVENT_ENDED:

_displayValueLabel->setText("Touch Ended");

break;

case TOUCH_EVENT_CANCELED:

_displayValueLabel->setText("Touch Canceled");

break;

default:

break;

}

}