[help] How to use ScrollView?

cocos2d-x C++
#1

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??

Thx!!

#2

@aron.bordin
hope it will help you .
Layout m_pWidget = dynamic_cast<Layout>(CCUIHELPER-UILayer->createWidgetFromJsonFile(“category/CategoryMap_1.ExportJson”));
m_pUiLayer->addWidget(m_pWidget);
m_pUiLayer->setContentSize( CCSizeMake(1920, 1080));
CCScrollView *scroll = CCScrollView::create(CCSizeMake(1280, 720), m_pUiLayer);
scroll->setDelegate(this);
scroll->setBounceable(false);
this->addChild(scroll);

Scrolling Menu Cocos2dx v3.0
#3

@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!:slight_smile:

#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;
}
7 Likes
Is there a better way to stop Menu from swallowing touches in 3.0?
#4

Thank you guys!! I’ll try It.

#5

@aron.bordin …visit my blog.I have written a complete tutorial on how to use scroll view in cocos2d-x … http://scrollview-in-cocos2d-x.blogspot.in/

#6

i want to the scrolling in horizontal direction

#7

touch is not working inside scrollview .

#8

setSwallowTouches(false) in scroll view

#9

Hey, just wanted to point out for some people who will still face problem starting out with ScrollView that the right header file to include is

#include "ui/CocosGUI.h"

1 Like