I’m new with cocos2d-x, I’m trying to use ScrollView, but It’s not working… I have read some pages on the web and the GUI documentation, but I cannot figure out how this widget works.
I’m using cocos2d-x beta 2. Someone can show me a simple and complete example of ScrollView please??
@aron.bordin
hi, I suppose that you meant the new UI ScrollView other than old CCScrollView, Due to the insufficiency of the beta2 document, it took me six hours on it and finally I figured out how to use it.
Following is my demo code,hope it will help you!
#include "cocos2d.h"
#include "CocosGUI.h" //using the whole new UI widget to create scroll view
USING_NS_CC;
using namespace gui;
..........
// Layout widget with fixed position.
void UI_ScrollableLayer001::addAbsoluteLayoutScrollView() {
Size visibleSize = Director::getInstance()->getVisibleSize();
Size scollFrameSize = Size(visibleSize.width - 30.f, visibleSize.height - 10.f);
auto scrollView = ScrollView::create();
scrollView->setBackGroundColorType(LAYOUT_COLOR_SOLID);
scrollView->setBackGroundColor(Color3B(200, 200, 200));
scrollView->setSize(scollFrameSize);
scrollView->setPosition(Point(15, 5));
scrollView->setDirection(SCROLLVIEW_DIR_VERTICAL);
auto containerSize = Size(scollFrameSize.width, scollFrameSize.height * 2);
scrollView->setInnerContainerSize(containerSize);
auto textWidget = allocText("Hello......");
textWidget->setPosition(Point(containerSize.width / 2, containerSize.height / 2));
scrollView->addChild(textWidget);
auto buttonWidget = allocButton("On me");
buttonWidget->setPosition(Point(containerSize.width / 2, containerSize.height / 2 - 100));
scrollView->addChild(buttonWidget);
addChild(scrollView);
}
// Layout widgets with linear layout
void UI_ScrollableLayer001::addLinearLayoutScrollView() {
Size visibleSize = Director::getInstance()->getVisibleSize();
Size scollFrameSize = Size(visibleSize.width - 30.f, visibleSize.height - 10.f);
auto scrollView = ScrollView::create();
scrollView->setBackGroundColorType(LAYOUT_COLOR_SOLID);
scrollView->setBackGroundColor(Color3B(200, 200, 200));
scrollView->setSize(scollFrameSize);
scrollView->setPosition(Point(15, 5));
scrollView->setDirection(SCROLLVIEW_DIR_VERTICAL);
auto containerSize = Size(scollFrameSize.width, scollFrameSize.height * 2);
scrollView->setInnerContainerSize(containerSize);
scrollView->setLayoutType(LAYOUT_LINEAR_VERTICAL);
for (int i = 0; i < 10; i++) {
auto textWidget = allocText("Hello......");
auto param1 = LinearLayoutParameter::create();
param1->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL);
param1->setMargin(Margin(0, 10, 0, 10));
textWidget->setLayoutParameter(param1);
scrollView->addChild(textWidget);
auto buttonWidget = allocButton("On Me");
auto param2 = LinearLayoutParameter::create();
param2->setGravity(LINEAR_GRAVITY_CENTER_HORIZONTAL);
param2->setMargin(Margin(0, 10, 0, 10));
buttonWidget->setLayoutParameter(param2);
scrollView->addChild(buttonWidget);
}
addChild(scrollView);
}
//==============================================
// these two helper methods for creation of Label and Button widget
Text * UI_ScrollableLayer001::allocText(const std::string &text) {
auto textWidget = Text::create();
textWidget->setText(text);
textWidget->setFontName("Marker Felt");
textWidget->setFontSize(30);
textWidget->setColor(Color3B(159, 168, 176));
return textWidget;
}
Button * UI_ScrollableLayer001::allocButton(const std::string &text) {
auto buttonWidget = Button::create();
buttonWidget->setTouchEnabled(true);
buttonWidget->loadTextures("button001.png", "button001_hl.png", "");
buttonWidget->setTitleFontSize(24);
buttonWidget->setTitleText(text);
return buttonWidget;
}