How to create ScrollView which add object from top to down

@slackmoehrle @drelaptop hi, I am trying to create Scollview in which I want to add buttons. it is adding button but it starts to add button from bottom of scrollView, I want to add button Top to down I have tried many thing but nothing working so can you please help me outs1 s2

When you use ScrollView, remember that you’ve to set the contentSize. Something like this:

scrollView->setContentSize(...);
scrollView->setInnerContainerSize(...);

Then, all nodes/sprites/etc that you want to put inside the “scrollview”, should be consider the contentSize for set the positions. By default the node are in the down left of the scrollView (if my memory not fail).

thanks for reply, okay i have set like this

                auto Item_Scroll = cocos2d::ui::ScrollView::create();
                Item_Scroll->setPosition(Vec2(scrollBarWidth,scrollBarheight));
                scrollBarWidth += 60;
                scrollBarheight -= 30;
                Item_Scroll->setDirection(ui::ScrollView::Direction::VERTICAL);
                Item_Scroll->setAnchorPoint(Point::ANCHOR_TOP_LEFT);
                Item_Scroll->getInnerContainer()->setAnchorPoint(Point::ANCHOR_TOP_LEFT);
                Item_Scroll->setContentSize(Size(230,180));
                Item_Scroll->setBackGroundColorType(ui::ScrollView::BackGroundColorType::SOLID);
                Item_Scroll->setBackGroundColor(Color3B(colourInt,200,colourInt));
                colourInt += 40;
                Item_Scroll->setInnerContainerSize(Size(230,180));
                //Item_Scroll->setInnerContainerPosition(Vec2(Item_Scroll->getPosition().x,Item_Scroll->getPosition().y));
                Item_Scroll->setBounceEnabled(true);
                Item_Scroll->setTouchEnabled(true);
                //Item_Scroll->setIgnoreAnchorPointForPosition(true);
                Item_Scroll->setScale(0.3f);
                this->addChild(Item_Scroll);

like this now how to set node which is set down left by default. i have even tried setting container anchor point but it is not woking

I didn’t change anything.
For example, in my case, for set a sprite in the top left of the scrollview, i wrote:

sprite->setPosition(sprite->getBoundingBox().size.width/2 + (visibleSize.width * 0.03f), scrollView->getInnerContainerSize().height - sprite->getBoundingBox().size.height/2 - (visibleSize.height * 0.02f));
scrollView->addChild(sprite);

My ScrollView settings:

            auto scrollView = ScrollView::create();
            Size scrollContentSize;
            scrollContentSize.setSize(window->getBoundingBox().size.width, window->getBoundingBox().size.height * 0.60f);
            scrollView->setContentSize(scrollContentSize);
            scrollView->setAnchorPoint(Vec2(0.5, 0.5));
            scrollView->setPosition(window->getPosition());
            scrollView->setInnerContainerSize(scrollContentSize);
            scrollView->setScrollBarEnabled(false);
            scrollView->setDirection(ScrollView::Direction::VERTICAL);
            layoutTab->addChild(scrollView);
1 Like

I am creating game shop so I have to add item in scrollview at run time so i don’t know the height of scrollview at compile time so i can’t do what you are doing right now any thing else can think of it to solve it

You could create the scrollView with a size by default, and then you could “calculate” what’s the height when you’ve all info for fill, and when you know what’s the height, you could set the new InnerContainerSize, something like this:

Size scrollContentSize;
scrollContentSize.setSize(....); 
scrollView->setInnerContainerSize(scrollContentSize);
1 Like

If you have your UI already created inside ScrollView and you only want to inverse the order it’s actually pretty simple. After all UI creation simply iterate over children and child->setPositionY(contentHeight - child->getPositionY()); where contentHeight is the height of all the UI in ScrollView.

1 Like

thanks it’s worked :slight_smile: : :+1:

auto Item_Scroll = cocos2d::ui::ScrollView::create();
Item_Scroll->setPosition(Vec2(180,200));
Item_Scroll->setDirection(ui::ListView::Direction::VERTICAL);
Item_Scroll->setAnchorPoint(Point::ANCHOR_TOP_LEFT);
Item_Scroll->getInnerContainer()->setAnchorPoint(Point::ANCHOR_TOP_LEFT);
Item_Scroll->setContentSize(Size(230,180));
Item_Scroll->setBackGroundColorType(ui::ScrollView::BackGroundColorType::SOLID);
Item_Scroll->setBackGroundColor(Color3B(200,200,50));
Item_Scroll->setInnerContainerSize(Size(230,30));
Item_Scroll->setBounceEnabled(true);
Item_Scroll->setTouchEnabled(true);
Item_Scroll->setScale(0.3f);
this->addChild(Item_Scroll);


float productItemXaxis = 30.0f;
float productItemYaxis = 10.0f;
int countForThree = 1;

    float heightOfIneerContainer = 30;

    for(int i = 0 ; i < 7 ; i++){


    if(countForThree == 3){

        heightOfIneerContainer += 30;
        Item_Scroll->setInnerContainerSize(Size(230,heightOfIneerContainer));
        log("i am in modulo \n");
        countForThree = 1;
        productItemYaxis += 100;
        productItemXaxis = 30.0f;

    }
    countForThree += 1;

    ui::Button *button = ui::Button::create("buttonImage.png","buttonImage.png");

    button->addClickEventListener(CC_CALLBACK_0(HelloWorld::buttonOnClickitem,this,i));

    button->setPosition(Vec2(productItemXaxis,productItemYaxis));
    productItemXaxis += 80;

    button->setPositionY(Item_Scroll->getContentSize().height - button->getPositionY());


    button->setTitleText("button : " + std::to_string(i));
    //button->setTitleText(Language::getInstance()->getStringForKey1("RegisterButton"));
    button->setScale(0.8f);
    Item_Scroll->addChild(button);


   }

ohh, we miss understood… i don’t have UI created, we need to increase innerContainer size runtime accrording to data we got from server if i am doing according as you mention we have button only few other gets out of range… I have implement with another way i just implemented…

   Item_Scroll->getInnerContainer()->setFlippedY(true);

and when i add button runtime i apply

 button-&gt;setFlippedY(true);

and it worked… but it won’t flip untill i touch one time so do you have nay oslution for that?

I really don’t find the problem of doing something in “runtime”.
As i mentioned before, you can use setInnerContainerSize whenever you need. You could calculate the height before all or if you need to check always the “height” each X time, you could create an scheduler for do it. Sorry, hope it helps.

Why not always recalculate all positions of the buttons? It’s not really CPU expensive task. Flipping the container will create a mirrored version of expected result, I think. (I mean all images will be mirrored).