cocos2d-Lua08常用SocostudioUI组件及编辑器
来源:互联网 发布:淘宝直通车有免费的吗 编辑:程序博客网 时间:2024/06/05 20:23
复习复习:
动画编辑器
Animation Editor
------------------------
1.编辑帧动画
1.1 在Animation Editor创建一个项目
1.2 图片资源拷贝到Resoures目录
1.3 第一帧拖动到渲染窗口
1.4 动画窗口,拖放后续帧序列
2.编辑骨骼动画
1.1 创建项目
1.2 拷贝资源
1.3 渲染窗口 组成一帧
1.4 定义骨骼
1.5 定义每个图块绑定骨骼
1.6 定义骨骼的父子关系
1.7 进入动画窗口,编辑动画
3。在Lua代码中如何加载
ccs.ArmatureDataManager:getInstance():addArmatureFileInfo("chuanzhang/chuanzhang.ExportJson")
local arm=ccs.Armature:create("chuanzhang")
arm:getAnimation():play("walk")
layer:addChild(arm)
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;
————————lua
ccui.Button
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);
// left top right bottom
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;
}
}
--------------------------------------------》代码《------------------------------------------
ui.lua
--ui组件
local UIScene=class("UIScene",function ()
return cc.Scene:create()
end)
--create
function UIScene:create()
local us=UIScene:new()
us:addChild(us:init())
return us
end
--ctor
function UIScene:ctor()
self.winsize=cc.Director:getInstance():getWinSize()
self._count=0
end
--init
function UIScene:init()
local layer=cc.Layer:create()
--UI测试
local labeltitle=ccui.Text:create()
labeltitle:setString("GUI测试")
layer:addChild(labeltitle)
labeltitle:setPosition(self.winsize.width/2,self.winsize.height/2)
--使用Button
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:setPressedActionEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(50, 80))
local function touchEvent(sender,eventType)
if eventType == ccui.TouchEventType.began then
print("Touch Down")
elseif eventType == ccui.TouchEventType.moved then
print("Touch Move")
elseif eventType == ccui.TouchEventType.ended then
print("Touch Up")
elseif eventType == ccui.TouchEventType.canceled then
print("Touch Cancelled")
end
end
button:addTouchEventListener(touchEvent)
layer:addChild(button)
--9宫格Button
local button9 = ccui.Button:create()
button9:setTouchEnabled(true)
button9:setScale9Enabled(true)
button9:setCapInsets(cc.rect(5,10,5,10))
button9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button9:setPosition(cc.p(100, 120))
button9:setContentSize(cc.size(150, 40))
layer:addChild(button9)
--使用CheckBox
local checkBox = ccui.CheckBox:create()
checkBox:setTouchEnabled(true)
checkBox:loadTextures("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(cc.p(80, 160))
layer:addChild(checkBox)
--使用滑块
local function percentChangedEvent(sender,eventType)
if eventType == ccui.SliderEventType.percentChanged then
local slider = sender
local percent = "Percent " .. slider:getPercent()
labeltitle:setString(percent)
end
end
local slider = ccui.Slider:create()
slider:setTouchEnabled(true)
slider:loadBarTexture("cocosui/sliderTrack.png")
slider:loadSlidBallTextures("cocosui/sliderThumb.png", "cocosui/sliderThumb.png", "")
slider:loadProgressBarTexture("cocosui/sliderProgress.png")
slider:setPosition(cc.p(150, 210))
slider:addEventListener(percentChangedEvent)
layer:addChild(slider)
--使用ImageView
local imageView = ccui.ImageView:create()
imageView:loadTexture("cocosui/ccicon.png")
imageView:setPosition(cc.p(150,250))
layer:addChild(imageView)
--使用LoadBar
local loadingBar = ccui.LoadingBar:create()
loadingBar:setTag(999)
loadingBar:setName("LoadingBar")
loadingBar:loadTexture("cocosui/sliderProgress.png")
loadingBar:setPercent(100)--设定当前进度
loadingBar:setPosition(cc.p(150, 290))
layer:addChild(loadingBar)
local function update(delta)
self._count = self._count + 1
if self._count > 100 then
self._count = 0
end
loadingBar:setPercent(self._count)
end
layer:scheduleUpdateWithPriorityLua(update, 0)
--使用图集文字
local labelAtlas = ccui.TextAtlas:create()
labelAtlas:setProperty("2048", "cocosui/labelatlas.png", 17, 22, "0")
labelAtlas:setPosition(cc.p(240, 100))
layer:addChild(labelAtlas)
--使用BMFont
local labelBMFont = ccui.TextBMFont:create()
labelBMFont:setFntFile("cocosui/bitmapFontTest2.fnt")
labelBMFont:setString("9miao")
labelBMFont:setPosition(cc.p(240, 40))
layer:addChild(labelBMFont)
--使用TextField实现文字输入
local textField = ccui.TextField:create()
textField:setTouchEnabled(true)
textField:setFontSize(30)
textField:setPlaceHolder("input words here")
textField:setPosition(cc.p(300,260))
layer:addChild(textField)
local function textFieldEvent(sender, eventType)
if eventType == ccui.TextFiledEventType.insert_text then
labeltitle:setString(textField:getStringValue())
end
end
textField:addEventListener(textFieldEvent)
--使用Layout
local layout = ccui.Layout:create()
layout:setContentSize(cc.size(280, 150))
layout:setPosition(cc.p(500,30))
layer:addChild(layout)
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(button:getContentSize().width / 2, layout:getContentSize().height - button:getContentSize().height / 2))
layout:addChild(button)
local textButton = ccui.Button:create()
textButton:setTouchEnabled(true)
textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "")
textButton:setTitleText("Text Button")
textButton:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(textButton)
local button_scale9 = ccui.Button:create()
button_scale9:setTouchEnabled(true)
button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button_scale9:setScale9Enabled(true)
button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height))
button_scale9:setPosition(cc.p(layout:getContentSize().width - button_scale9:getContentSize().width / 2, button_scale9:getContentSize().height / 2))
layout:addChild(button_scale9)
--使用滚动视图
local scrollView = ccui.ScrollView:create()
scrollView:setTouchEnabled(true)
scrollView:setContentSize(cc.size(280, 150))
scrollView:setPosition(cc.p(0,300))
layer:addChild(scrollView)
local imageView = ccui.ImageView:create()
imageView:loadTexture("cocosui/ccicon.png")
local innerWidth = scrollView:getContentSize().width
local innerHeight = scrollView:getContentSize().height + imageView:getContentSize().height
scrollView:setInnerContainerSize(cc.size(innerWidth, innerHeight))
local button = ccui.Button:create()
button:setTouchEnabled(true)
button:loadTextures("cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "")
button:setPosition(cc.p(innerWidth / 2, scrollView:getInnerContainerSize().height - button:getContentSize().height / 2))
scrollView:addChild(button)
local textButton = ccui.Button:create()
textButton:setTouchEnabled(true)
textButton:loadTextures("cocosui/backtotopnormal.png", "cocosui/backtotoppressed.png", "")
textButton:setTitleText("Text Button")
textButton:setPosition(cc.p(innerWidth / 2, button:getBottomBoundary() - button:getContentSize().height))
scrollView:addChild(textButton)
local button_scale9 = ccui.Button:create()
button_scale9:setTouchEnabled(true)
button_scale9:setScale9Enabled(true)
button_scale9:loadTextures("cocosui/button.png", "cocosui/buttonHighlighted.png", "")
button_scale9:setContentSize(cc.size(100, button_scale9:getVirtualRendererSize().height))
button_scale9:setPosition(cc.p(innerWidth / 2, textButton:getBottomBoundary() - textButton:getContentSize().height))
scrollView:addChild(button_scale9)
imageView:setPosition(cc.p(innerWidth / 2, imageView:getContentSize().height / 2))
scrollView:addChild(imageView)
--添加列表视图
local listView = ccui.ListView:create()
-- set list view ex direction
listView:setDirection(ccui.ScrollViewDir.vertical)
listView:setBounceEnabled(true)
listView:setBackGroundImage("cocosui/green_edit.png")
listView:setBackGroundImageScale9Enabled(true)
listView:setContentSize(cc.size(240, 130))
listView:setPosition(cc.p(480,500))
layer:addChild(listView)
-- create model
local default_button = ccui.Button:create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png")
default_button:setName("Title Button")
default_button:setTag(10)
local default_item = ccui.Layout:create()
default_item:setTouchEnabled(true)
default_item:setContentSize(default_button:getContentSize())
default_button:setPosition(cc.p(default_item:getContentSize().width / 2.0, default_item:getContentSize().height / 2.0))
default_item:addChild(default_button)
--set model
listView:setItemModel(default_item)
--add default item
for i = 1,10 do
listView:pushBackDefaultItem()
end
for i=0,9 do
listView:getItem(i):getChildByTag(10):setTitleText("bt"..i)
end
--添加pageView
local pageView = ccui.PageView:create()
pageView:setTouchEnabled(true)
pageView:setContentSize(cc.size(240, 130))
pageView:setPosition(cc.p(0,500))
layer:addChild(pageView)
for i = 1 , 3 do
local layout = ccui.Layout:create()
layout:setContentSize(cc.size(240, 130))
local imageView = ccui.ImageView:create()
imageView:setTouchEnabled(true)
imageView:setScale9Enabled(true)
imageView:loadTexture("cocosui/scrollviewbg.png")
imageView:setContentSize(cc.size(240, 130))
imageView:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(imageView)
local label = ccui.Text:create()
local pageInfo = string.format("page %d", i)
label:setString(pageInfo)
label:setFontName(font_TextName)
label:setFontSize(30)
label:setColor(cc.c3b(192, 192, 192))
label:setPosition(cc.p(layout:getContentSize().width / 2, layout:getContentSize().height / 2))
layout:addChild(label)
pageView:addPage(layout)
end
--在程序中加载ui文件
local ui=ccs.GUIReader:getInstance():widgetFromJsonFile("DemoHead_UI/DemoHead_UI.json")
layer:addChild(ui)
ui:setPosition(480,100)
local bt=ui:getChildByTag(22)
local function btclick(s,e)
if e==ccui.TouchEventType.ended then
print("click")
end
end
bt:addTouchEventListener(btclick)
return layer
end
return UIScene
- cocos2d-Lua08常用SocostudioUI组件及编辑器
- COCOS2D常用的游戏编辑器
- 窗口及常用组件
- cocos2d-x: 常用组件默认参数
- Cocos2d-x常用函数及常用宏
- Cocos2d-x常用函数及常用宏
- Cocos2d-x常用函数及常用宏
- Cocos2d-x 3.0 及以上常用函数
- mac Cocos2d-x中常用粒子编辑器ParticleDesigner测试例子
- Cocos2d-x 3.2编写常用UI组件 《Cocos2d-x 3.2编写常用UI组件 带滚动的表格GridView
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- vi编辑器常用的命令及快捷键
- red5使用教程
- ORACLE 创建序列
- C++之运算符重载
- Linux下DIR,dirent,stat 结构体
- 面试问题,将字符串、字符串单词倒叙输出
- cocos2d-Lua08常用SocostudioUI组件及编辑器
- 第一个程序(C#)_使用Visual Studio
- android工具2——MD5加密
- 【学习笔记----数据结构03--线性链表】
- Hadoop和spark通信机制
- 【笔记】 《js权威指南》- 第17章 事件处理 - 17.2 - 17.3
- 阿里云ecs搭建wordpress
- Eventbus的基本使用
- css 相对电脑窗口定位