cocos2dx－ui的分类与使用

作者：MrBatista | 来源：互联网 | 2023-09-08 19:15

容器层的使用GUI控件我们大致可以分为两类，**普通控件**和容器控件，普通控件指的是一些常用的控件，如UIButton，UILabel，UISlider和UITextField

容器层的使用

GUI 控件我们大致可以分为两类，**普通控件** 和容器控件，普通控件指的是一些常用的控件，如 UIButton，UILabel，UISlider 和 UITextField 等控件，而容器控件如 UILayout，UIScrollView，UIListView，UIPageView 等，这些容器控件都有一个特点，它可以作为容器，包含其它控件，虽然所有的控件都能够包含其它控件，但有些控件的职责非常单一，如按钮标签等，并不经常向其添加其它控件。以下详细介绍容器控件的使用方法。

UILayout (Panel)

Panel 作为最主要的容器层，前面我们说过，由 CocoStudio UI 编辑器所创建的 UI 是基于 Panel 来布局的，要想熟练的使用 UI 控件，了解 Panel 以及其属性也是重中之重，既然是容器，容器里面总得有些内容了，Panel 对应得控件名称为 UILayout。

    Size widgetSize = m_pWidget->getSize();

    UILayout *background = dynamic_cast<UILayout*>(m_pUiLayer->getWidgetByName("background_Panel"));

    // Create the layout
    UILayout* layout = UILayout::create();
    layout->setSize(Size(280, 150));
    Size backgroundSize = background->getSize();
    layout->setPosition(Point((widgetSize.width - backgroundSize.width) / 2 +
                            (backgroundSize.width - layout->getSize().width) / 2,
                            (widgetSize.height - backgroundSize.height) / 2 +
                            (backgroundSize.height - layout->getSize().height) / 2));
    m_pUiLayer->addWidget(layout);

    UIButton* button = UIButton::create();
    button->setTouchEnabled(true);
    button->loadTextures("cocosgui/animationbuttonnormal.png", "cocosgui/animationbuttonpressed.png", "");
    button->setPosition(Point(button->getSize().width / 2, layout->getSize().height - button->getSize().height / 2));
    layout->addChild(button);

    UIButton* textButton = UIButton::create();
    textButton->setTouchEnabled(true);
    textButton->loadTextures("cocosgui/backtotopnormal.png", "cocosgui/backtotoppressed.png", "");
    textButton->setTitleText("Text Button");
    textButton->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
    layout->addChild(textButton);

    UIButton* button_scale9 = UIButton::create();
    button_scale9->setTouchEnabled(true);
    button_scale9->loadTextures("cocosgui/button.png", "cocosgui/buttonHighlighted.png", "");
    button_scale9->setScale9Enabled(true);
    button_scale9->setSize(Size(100, button_scale9->getContentSize().height));
    button_scale9->setPosition(Point(layout->getSize().width - button_scale9->getSize().width / 2, button_scale9->getSize().height / 2));
    layout->addChild(button_scale9);

如上面代码所示，我们创建了一个 layout 控件，然后在其中添加了三个控件。m_pUiLayer 是当前场景的一个 UILayer ，前面我们介绍过，所有的 UI 控件，都是放在 UILayer 里面，UILayer 管理所有的控件，并添加到当前场景中去。显示效果如下：

);

);

float innerWidth = scrollView->getSize().width;
float innerHeight = scrollView->getSize().height + imageView->getSize().height;

scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));

imageView->setPosition(Point(innerWidth / 2, imageView->getSize().height / 2));
scrollView->addChild(imageView);

// 为 scrollview 添加其它控件，省略

, "cocosgui/animationbuttonpressed.png", "");
lv->setItemModel(model);

for (int i=0; i<20; i++)
{
lv->pushBackDefaultItem();
}
lv->setItemsMargin(10);
lv->setGravity(LISTVIEW_GRAVITY_CENTER_HORIZONTAL);
lv->setSize(Size(100, 100));
lv->setBackGroundColorType(LAYOUT_COLOR_SOLID);
lv->setBackGroundColor(Color3B::GREEN);
lv->setPosition(Point(100, 100));
m_pUiLayer->addWidget(lv);

);
imageView->setSize(Size(240, 130));
imageView->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(imageView);

UILabel* label = UILabel::create();
label->setText(CCString::createWithFormat("page %d", (i + 1))->getCString());
label->setFontName(font_UIPageViewTest);
label->setFontSize(30);
label->setColor(Color3B(192, 192, 192));
label->setPosition(Point(layout->getSize().width / 2, layout->getSize().height / 2));
layout->addChild(label);

pageView->addPage(layout);
}
pageView->addEventListenerPageView(this, pagevieweventselector(UIPageViewTest::pageViewEvent));

m_pUiLayer->addWidget(pageView);

如图显示，创建了一个 PageView 对象 pageView，设置大小为 "Size(240, 130)"，这也就是它的显示区域大小了。我们使用一个 for 循环，添加了三个同样的元素 UILayout ，每个 UILayout 的大小也都是

Size(240,
 130)

，所以 PageView 一次正好能够显示一个项的内容，也就是 "页"。至于每个页的 UILayout 里面装着什么，那就是根据自己的需要而定了。然后使用 pageView->addPage(layout) 添加一个页，需要注意的是，这里所添加的必须是 UILayout 类型对象或者其派生类对象。

PageView 虽然实现了滑动，滚动的效果，但它并不是继承自 ScrollView 的，而是直接继承自 UILayout 的，那怎么实现滚动的呢，它集成并且实现了 UIScrollInterface 类型，这赋予了它可以滚动的属性。ScrollView 也是同样。

各个控件组成了丰富的 GUI 界面，而容器层则是其骨架，通过它的布局，来达到我们想要的效果。从 Panel 到 ScrollView ，Listview 和 PageView ，根据实际的需要灵活的组织可以让我们的界面显示的更为友好。