CCLayoutBox in Cocos2d-x?

Question

Is there something similar to a CCLayoutBox in Cocos2d-x? I'm looking around Cocos Studio, but find nothing. I want a node that can space out its children over an area with unknown width and/or height - so that the individual components will be equally dispersed.

Answer 1

I'm not familiar with CCLayoutBox but I think what you want is Layout. There are some examples on the wiki that explain how to use it. Here's one of them:

// Create the layout
    Layout* layout = Layout::create();
    layout->setLayoutType(LayoutType::VERTICAL);
    layout->setContentSize(Size(280, 150));
    Size backgroundSize = background->getContentSize();
    layout->setPosition(Vec2((widgetSize.width - backgroundSize.width) / 2.0f +
                              (backgroundSize.width - layout->getContentSize().width) / 2.0f,
                              (widgetSize.height - backgroundSize.height) / 2.0f +
                              (backgroundSize.height - layout->getContentSize().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(LinearLayoutParameter::LinearGravity::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(LinearLayoutParameter::LinearGravity::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->setContentSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
    layout->addChild(button_scale9);

    LinearLayoutParameter* lp3 = LinearLayoutParameter::create();
    button_scale9->setLayoutParameter(lp3);
    lp3->setGravity(LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL);
    lp3->setMargin(Margin(0.0f, 10.0f, 0.0f, 10.0f));

"Setting three parameters for layout - LinearLayoutParameter, Gravity and Margin, then set layout parameters for three UIPanel's inner widgets.

Here we used Linear Vertical scheme, but every Gravity set as LinearLayoutParameter::LinearGravity::CENTER_HORIZONTAL that is displaying as center horizontally. Margin shows the spacing around the edges, notice that the value of lp2 is UIMargin(20, 20, 0, 5), which means the spacing from left, top, right and button. When left spacing is 20 you can see textButton's position has little offset to right. Except for the direction, other setting of layout vertical scheme is same as horizontal scheme. And two schemes are called Linear Layout, they using the same parameters."