cocosStudio中使用PageView,ListView和ScrollView

晚上吃東西好像吃壞肚子了，。可是技術還要繼續研究。最近工做中要使用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<ui::PageView *>(Helper::seekWidgetByName(static_cast<Widget *>(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<Button *>(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<ImageView *>(pSender);
    CCLOG("click img Tag = %d", img->getTag());
}

這裏只是一些簡單的例子，若是想要研究更加仔細的東西，看源碼。程序員必備的技能！