如何像在 creator 中一样在 coco2dx 中制作网格布局？

Question

我想在 cocos creator 中的 cpp 项目的滚动视图中制作网格布局。但是我遇到了问题。

我在这样的 cpp 版本中找不到布局属性

creator's properties of layout

Answer 1

在cocos2d-x的测试（tests/cpp-tests/Classes/UITest/CocoStudioGUITest/UILayoutTest/UILayoutTest.cpp）中有一个网格布局的例子：

bool UILayoutTest_Layout_Relative_Align_Parent::init()
{
if (UIScene::init())
{
    Size widgetSize = _widget->getContentSize();
    // Add the alert
    Text* alert = Text::create("Layout Relative Align Parent", "fonts/Marker Felt.ttf", 20);
    alert->setColor(Color3B(159, 168, 176));
    alert->setPosition(Vec2(widgetSize.width / 2.0f, widgetSize.height / 2.0f - alert->getContentSize().height * 4.5f));
    _uiLayer->addChild(alert);
    
    Layout* root = static_cast<Layout*>(_uiLayer->getChildByTag(81));
    
    Layout* background = dynamic_cast<Layout*>(root->getChildByName("background_Panel"));
    
    // Create the layout
    Layout* layout = Layout::create();
    layout->setLayoutType(Layout::Type::RELATIVE);
    layout->setContentSize(Size(280, 150));
    layout->setBackGroundColorType(Layout::BackGroundColorType::SOLID);
    layout->setBackGroundColor(Color3B::GREEN);
    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);
    
    // 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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::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(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BOTTOM);
    button_RightBottom->setLayoutParameter(rp_RightBottom);
    
    
    return true;
}

return false;
}

如何像在 creator 中一样在 coco2dx 中制作网格布局？

How to make a grid layout in coco2dx like in the creator?

c++

cocos2d-x