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

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;

}

}

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

时间： 2024-08-05 07:08:44

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

Cocos2d-x 3.0final 终结者系列教程04-引擎架构分析

从前有个跟我学Android的学生,老是问我: 沈老师,为什么Android中的窗口叫Activity,为什么要在onCreate方法中写setContentView(R.layout.main)? 我说: 你能不能按照我教你的实现一个窗口 第一步在AndroidManifest.xml中添加一个Activity标签 第二步写一个类继承Activity并覆盖onCreate方法 他说: 我想知道为什么要实现Activity和onCreate方法,之后我才能完成这个练习. 我说: 你实现了Acti

Cocos2d-x 3.0final 终结者系列教程09-绘图节点Node中的Schedule

如何让HelloWorld项目中的HelloWorld文字实现自动运动呢? 有的童鞋会想到使用线程,不断修改Label的Position, 这样不行,因为在Cocos2d-x中只能在主线程中来修改Node中的信息,这是由于所有的node都是非线程安全的,如果我们的场景移除了node 在子线程种可能引用错误,所以,要让Node执行特定的变化,需要在当前的Node中使用Schedule 使用方法很简单 1.在当前的HelloWorldScne.h中添加一个方法在HelloWorldScene 如:

Cocos2d-x 3.0final 终结者系列教程10-绘图节点Node中的Action

Action是作用在Node上的逻辑处理,比如让Node移动.旋转.缩放.变色.跳跃.翻转.透明等等,都有相对应的Action Action如何在Node上使用 1.定义Action对象 如 auto act=MoveTo::create(Point(30,0),1); 2.在Node上执行runAction auto sp=Sprite::create("npc.png"); sp->runAction(act); 这样就实现了在sp这个Node上执行移动到30,0这个坐标的动

Cocos2d-x 3.0final 终结者系列教程08-绘图节点Node中的锚点和坐标系

图片问答,(只要回答正确,锚点和坐标系就学会了) 1.下图一共有几个填充为淡黄色的实心矩形? 选择:A,2个  B, 4个 C,1个 D,16个 答案,B,4个 2.下图的4个实心矩形排列在几行几列? 选择:A,1行1列 B,2行2列 答案,B 3.在每个实心矩形外侧都代表了屏幕,并标记了屏幕坐标系,和OpengGL坐标系,请问以下回答哪个正确? A,下图第一列是屏幕坐标系,左上角为0,0点,第二列是OpenGL坐标系,左下角为(0,0)点 B,    文章喜欢马伊琍 C,   黄海波是被陷害的

Cocos2d-x 3.0final 终结者系列教程06-Director和场景跳转

这些天互联网大事不少呀 1.逻辑思维分家(所谓合久必分,分久必合,实属正常,切行切珍惜吧) 2.锤子手机开卖  (不管你买没买,反正我没买,作为多年Android开发的我深知说的亮点其实在我看来都是没用的) 3.京东上市        (一直亏损的企业,在国内上市真的不可能,不过公司亏损不表示公司没有价值,这就是潜力股,奉劝各位找对象的多关注些潜力股) 4.聚美优品上市  (话说欧哥虽是官二代,但互联网电商公司上市跟这确实没啥关系,有本事你是官二代也做个上市公司试试呀, 徐小平老师这次算牛了,投

Cocos2d-x 3.0final 终结者系列教程07-绘图节点Node

在Cocos2d-x中所有能看到的都是引擎调用底层图形库函数绘制完成的, Cocos2d-x将屏幕所有要绘制的所有内容逻辑上保存到一个场景Scene中(尺寸一般会和屏幕大小一致) 而在Scene中又包含了多个图层Layer,每个图层都是一个绘图节点Node. 所以可以理解为所有能在屏幕上显示的对象都是Node类的实例,或Node的子类对象 继承关系是这样的 Node------Scene -------Layer -------Sprite ....... Scene,Layer,Sprite,

Cocos2d-x 3.0final 终结者系列教程12-Vector&amp;map&amp;value

昨天中午北京温度为40度,在中午12:16分我来到篮球场,思考了1分钟决定开站 转球: 我和另外3名队友开始半场, 球传到我手的刹那顿时烫的我持球不稳,顿时问道了淡淡的胶皮味道和烤肉味道的混搭. 这时我来了一个腾空跳投, 球---------爆炸了........ 听新闻说昨天在路上都是 "熟人" 一位老大爷不慎被车刮倒了,大爷二话没说立马爬了起来,围观众人议论纷纷: "大爷人不错","大爷素质真高","大爷身体可真好" 大爷

Cocos2d-x 3.0final 终结者系列教程16-《微信飞机大战》实现

看到cocos2d-x推出了3.1版本,真是每月一次新版本,速度, 还有一个好消息就是http://cn.cocos2d-x.org/上线了,祝贺!啥时候把我的视频和教程放上去呢?!!! 本文介绍一款纵版射击游戏的实现,开发环境: win7 vs2012 cocos2d-x3.0final android adt android ndk r9 首先看下最后的效果: (图1,微信飞机大战运行效果) 源码下载地址:http://download.csdn.net/detail/sdhjob/7513

Cocos2d-x 3.0final 终结者系列教程15-win7+vs2012+adt+ndk环境搭建(无Cygwin)

终于不用Cygwin 了,很高兴 为什么要用Win7? 因为VS2012要求Win7以上系统才能安装! 为什么要用vs2012? 因为VS2012才支持C++11! 为什么要支持C++11? 因为Cocos2d-x 3.0final版需要C++11的支持. ----------------------------------------------------------- 准备软件都有哪些? Win7,VS2012,Java SDK , ADT(包含了Eclipse,sdk), Android