Cocos2d-x 3.9教程：9. Cocos2d-x中基于布局的容器控件

Cocos2d-x 3.9教程

9. Cocos2d-x中基于布局的容器控件

1.1. ScrollView滚动视图

滚动视图是一种常见的容器型控件，它里面可以放置其他组件。Cocos2d-x中的ScrollView本身也是一种Layout，所以也可以在其中使用线形或者相对布局。ScrollView的显示效果，主要是取决于：

setContentSize()，设置显示出来的区域大小“视口”。

setInnerContainerSize()，设置内部容器的大小，决定了拖动的区域大小；它必须大于或等于setContentSize()。

以及添加进内部的组件和布局位置。

ScrollView，内部的容器为innerLayout，我们的控件放在这个layout上。任一时刻拖动ScrollView，会在“视口”显示innerLayout的一部分：效果示意图如下：

拖动视口，改变的是内部容器innerLayout的位置偏移。则通过视口看到的内容得以改变：

注意，因此内部容器innerLayout上我们加入的控件，需要我们自己来摆放到正确的位置上。

#include "ui/UIScrollView.h"

ui::ScrollView *scrollView = ui::ScrollView::create();

 

scrollView->setBackGroundColorType(ui::Layout::BackGroundColorType::SOLID);

scrollView->setBackGroundColor(Color3B::RED);

scrollView->setPosition(Vec2(50, 100));

scrollView->setContentSize(Size(400, 300));//外部显示的大小

scrollView->setBounceEnabled(true);//是否开启拖动到头后的反弹效果

scrollView->setInnerContainerSize(Size(500, 500));//内部的尺寸，决定了拖动的区域大小；它必须大于或等于setContentSize

//scrollView->setTouchEnabled(true);//是否允许拖动空白处滚动视图，默认为是；否的话，只能拖动里面的组件来滚动视图

scrollView->setDirection(ui::ScrollView::Direction::VERTICAL);//允许拖动的方向

scrollView->setLayoutType(Layout::Type::VERTICAL);//垂直布局；ScrollView本身就是一种Layout

 

//绑定响应事件

scrollView->addEventListener(CC_CALLBACK_2(HelloWorld::onScrollViewEvent, this));

 

Button * button1 = Button::create("button.png");

scrollView->addChild(button1);

Button * button2 = Button::create("potentiometerButton.png");

scrollView->addChild(button2);

Button * button3 = Button::create("potentiometerProgress.png");

scrollView->addChild(button3);

Button * button4 = Button::create("potentiometerTrack.png");

scrollView->addChild(button4);

Button * button5 = Button::create("button_normal.png");

scrollView->addChild(button5);

Button * button6 = Button::create("CloseNormal.png");

scrollView->addChild(button6);

 

this->addChild(scrollView);

void HelloWorld::onScrollViewEvent(Ref* pSender, cocos2d::ui::ScrollView::EventType event)

{

ui::ScrollView * scrollView = (ui::ScrollView *)pSender;

 

switch (event)

{

case cocos2d::ui::ScrollView::EventType::SCROLL_TO_TOP:

CCLOG("scrollView is scroll to top");

break;

case cocos2d::ui::ScrollView::EventType::SCROLLING:

//CCLOG("scrollView is scrolling");

break;

case cocos2d::ui::ScrollView::EventType::SCROLL_TO_BOTTOM:

CCLOG("scrollView is scroll to bottom");

break;

case cocos2d::ui::ScrollView::EventType::BOUNCE_TOP:

CCLOG("scrollView is bounce to top");

break;

case cocos2d::ui::ScrollView::EventType::BOUNCE_BOTTOM:

CCLOG("scrollView is bounce to bottom");

break;

}

}

注意，由于cocos2d::extension库中也有ScrollView，为了避免编译时的冲突。建议类的名字写全路径，如：cocos2d::ui::ScrollView在使用Event时，同样也需要使用全路径：cocos2d::ui::ScrollView::EventType。

最终效果如下：

初始位置：

拖动到最下面的位置：

由于我们设定了允许回弹，所以拖动到某一端时，还可以继续拖动一段距离，松开即可回弹：

 

1.2. TableView桌面视图

注意，目前至最新版cocos2d-x3.9为止，TableView是属于extension库的，它继承自extension库的Scro