晚上吃东西好像吃坏肚子了，。但是技术还要继续研究。最近工作中要使用CocosStudio做界面，好吧，不管对他有什么偏见，学习一下吧。这里主要记录一下三个控件的使用和说明。就是ScrollView，ListView和PageView。

首先大致的介绍一下这三个控件吧，scrollView顾名思义，滑动容器可以上下滑动，也可以左右滑动。PageView可以这么理解，它就是scrollView的超级版，因为它是整页滑动。listView是列表容器，它相对与其它两个控件来讲，它不不能添加精灵、粒子、声音、地图和节点对象。

在cocosStudio(使用版本2.0.6)中创建，如下图，可以看到三种容器分别是滑动容器，列表容器和翻页容器

创建地方式就是直接拖到场景中，然后在其中加入对应地组件，这是在一些确定地情况下使用的。但是，通常的情况是我们程序需要使用代码来根据不同的数据动态的加入各种的界面组件。下面就使用程序创建加入组件，这个前提依然是使用cocosStudio创建一个空的容器，然后手动加入容器中的内容。

ScrollView：

cocosStudio中创建一个场景，场景中放入一个空的scrollView，下面代码加入其中的组件

void HelloWorld::initScrollView() {
auto layer = CSLoader::getInstance()->createNode("ScrollViewScene.csb");
this->addChild(layer, 1);

auto scrollView = static\_cast<ui::ScrollView \*>(Helper::seekWidgetByName(static\_cast<Widget \*>(layer), "ScrollView\_1"));

for (auto i = 0; i< 4; i++) {  
    auto btn = Button::create("bunny.png"); //这里我是直接加入了一个按钮，还可以加入其它的东西，甚至是一个子界面  
    btn->setTouchEnabled(true);  
    btn->setTitleText("scrollViewBtn");  
    btn->setTitleFontSize(30);  
    scrollView->addChild(btn);  
    btn->addClickEventListener(CC\_CALLBACK\_1(HelloWorld::clickBtnCallback, this));  
    btn->setPosition(Vec2(300, 50 + i \* 100)); //自己设置对应的位置  
}

scrollView->scrollToBottom(0.1f, false);  

// scrollView->setDirection(cocos2d::ui::ScrollView::Direction::VERTICAL);
// scrollView->jumpToBottom();
scrollView->addEventListener(CC_CALLBACK_2(HelloWorld::scrollViewMoveCallback, this));
}

void HelloWorld::scrollViewMoveCallback(cocos2d::Ref *pSender, cocos2d::ui::ScrollView::EventType eventType) {
switch (eventType) {
case ui::ScrollView::EventType::SCROLLING:
CCLOG("scrolling");
break;
case ui::ScrollView::EventType::SCROLL_TO_BOTTOM:
CCLOG("scrolling bottom");
break;
case ui::ScrollView::EventType::SCROLL_TO_TOP:
CCLOG("scrolling top");
break;
default:
break;
}
}

PageView：

cocosStudio中创建一个场景，场景中放入一个空的pageView，加入其中的组件

void HelloWorld::initPageView() {
auto layer = CSLoader::getInstance()->createNode("PageViewScene.csb");
this->addChild(layer, 1);
auto winSize = Director::getInstance()->getWinSize();
auto pageView = static_cast(Helper::seekWidgetByName(static_cast(layer), "PageView_1"));
pageView->setTouchEnabled(true);

for (auto i = 0; i<5; i++) {  
    auto layout = Layout::create();  
    layout->setContentSize(pageView->getContentSize());  

// auto node = CSLoader::getInstance()->createNode("Stone.csb");
// layout->addChild(node);
auto label = Text::create();
label->setString(std::string(__String::createWithFormat("xxx _%d", i)->getCString()));
label->setFontSize(40);
layout->addChild(label);
label->setPosition(Vec2(100, 100));
pageView->addPage(layout);

}  

}

ListView：

cocosStudio中创建一个场景，场景中放入一个空的listView，下面代码加入其中的组件

void HelloWorld::initListView() {
auto node = CSLoader::getInstance()->createNode("MainScene.csb");
addChild(node, 1);

auto node1 = CSLoader::getInstance()->createNode("Stone.csb");  
//    node->addChild(node1, 1);  
//    node1->setPosition(Vec2(300, 500));

auto layout = static\_cast<Layout \*>(Helper::seekWidgetByName(static\_cast<Widget \*>(node), "ListView\_1"));  
//    layout->setPosition(Vec2(300, 300));

layout->removeAllChildren();  
auto listView = static\_cast<ListView \*>(layout);  
listView->setGravity(cocos2d::ui::ListView::Gravity::CENTER\_HORIZONTAL);  
listView->setItemsMargin(10.0f);  
listView->setClippingEnabled(true);

for (auto i = 0; i<10; i++) {  
    if (i == 1) {  
        listView->insertCustomItem(static\_cast<Widget \*>(node1), i);  
        continue;  
    }  
    if (i%2 == 0) {  
        auto img = ImageView::create();  
        img->loadTexture("bunny.png");  
        listView->insertCustomItem(img, i);  
        img->setTouchEnabled(true);  
        img->addTouchEventListener(CC\_CALLBACK\_2(HelloWorld::clickImgCallback, this));  
        img->setTag(i);  
    } else {  
        //            auto img = ImageView::create();  
        //            img->loadTexture("stone.png");  
        //            listView->insertCustomItem(img, i);  
        auto btn = Button::create();  
        btn->loadTextureNormal("stone.png");  
        btn->setTouchEnabled(true);  
        auto btnName = \_\_String::createWithFormat("BTN\_%d", i);  
        btn->setTitleText(std::string(btnName->getCString()));  
        btn->setTitleFontSize(20);  
        btn->setTag(i);  
        btn->addClickEventListener(CC\_CALLBACK\_1(HelloWorld::clickBtnCallback, this));  
        listView->insertCustomItem(btn, i);  
    }  
}  

}

void HelloWorld::clickBtnCallback(cocos2d::Ref *pSender) {
auto btn = static_cast(pSender);
CCLOG("click btn Tag = %d", btn->getTag());
}

void HelloWorld::clickImgCallback(cocos2d::Ref *pSender, Widget::TouchEventType event) {
if (event != Widget::TouchEventType::ENDED) {
return;
}
auto img = static_cast(pSender);
CCLOG("click img Tag = %d", img->getTag());
}

这里只是一些简单的例子，如果想要研究更加仔细的东西，看源码。程序员必备的技能！