Use pageview, listview, and scrollview in cocosstudio

Eating at night seems to have a bad stomach ,. However, the technology will continue to be studied. I have to use cocosstudio for the interface in my recent work. Well, no matter what prejudice he has, let's take a look. Here we mainly record the use and description of the three controls. That is, scrollview, listview, and pageview.

First, let's take a rough look at these three controls. As the name suggests, scrollview can slide up or down the container, or slide left or right. Pageview can be understood as a super version of scrollview, because it slides the whole page. Listview is a list container. Compared with the other two controls, it cannot add genie, particles, sound, map, and node objects.

Create in cocosstudio (version 2.0.6). For example, you can see three containers: slide container, list container, and flip container.

The place of creation is dragged directly to the scene and then the corresponding component is added to it. This is used in some definite conditions. However, we usually use code to dynamically add various interface components based on different data. Next we will use the program to create and add components. The premise is that we still use cocosstudio to create an empty container and then manually add the content in the container.

Scrollview:

Create a scenario in cocosstudio, and put an empty scrollview in the scenario. The following Code adds the component

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 "); // here I directly add a button, and can also add other things, or even a sub-interface BTN-> settouchenabled (true ); BTN-> settitletext ("scrollviewbtn"); BTN-> bytes (30); scrollview-> addchild (BTN); BTN-> addclickeventlistener (cc_callback_1 (helloworld: clickbtncallback, this); BTN-> setposition (vec2 (300, 50 + I * 100); // set the corresponding position} scrollview-> scrolltobottom (0.1f, false ); // scrollview-> setdirection (cocos2d: Ui: scrollview: ction: vertical); // scrollview-> jumptobottom (); scrollview-> addeventlistener (cc_callback_2 (helloworld:: scrollviewmovecallback, this);} void helloworld: scrollviewmovecallback (cocos2d: ref * psender, cocos2d: Ui: scrollview: 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:

Create a scenario in cocosstudio, place an empty pageview in the scenario, and add the components to it.

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:

Create a scenario in cocosstudio and put an empty listview in the scenario. The following Code adds the component

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());}

Here are some simple examples. If you want to study things more carefully, read the source code. Essential Skills for programmers!

Use pageview, listview, and scrollview in cocosstudio