Cocos2d-x的学习之旅（八）ScrollView

声明

本教程仅用于初学cocos2dx同学使用，内容由本人（Code-Man)编写，此教程使用cocos2dx版本为3.4。本教程内容可以自由转载，但必须同时附带本声明，或注明出处。QQ群：Cocos2d-CodeMonkey ,461679592。

一个星期没见了，虽然现在没有人看我东西，但还是坚持写。这个星期我毕业了，谢谢那些陪伴了3年的小伙伴们谢谢你们。

进入今天的主题吧，今天我来介绍一个屌炸天的东西，哎，我那次不是说屌炸天的？？哈哈哈。。。。

ScrollView是什么？

ScrollView 滚动窗口。就像手机里的APP页面，我们有很多的应用可能会有4、5页的应用，左右滑动来选择需要打开的应用。这种左右滑动就是我们要实现的效果。本节课不讲触摸事件，下节课我们会结合本节课来讲解。

本节课素材：

一共三张背景图红、绿、黄，Button下节课会用到。

  
    WinSize=Director::getInstance()->getVisibleSize();
    
    //创建一个空的层，在这里把它理解为一个容器，他用来装我们的三个背景图
    auto layer=Layer::create();
    
    //创建一个ScrollView，并指定它的大小，也就是能显示的区域有多大。
    auto scrollView=ScrollView::create(WinSize);
    //设置装在ScrollView里面的东西
    scrollView->setContainer(layer);
    //滑动方向，HORIZONTAL为水平滑动，VERTICAL垂直滑动,BOTH为两者都能滑动
    scrollView->setDirection(ScrollView::Direction::HORIZONTAL);
    this->addChild(scrollView);
    
    
    //创建三个背景图
    for (int i=0; i<=2; i++) {
        std::string bgName="red_bg.png";
        switch (i) {
            case 0:
                bgName="red_bg.png";
                break;
            case 1:
                bgName="green_bg.png";
                break;
            case 2:
                bgName="yellow_bg.png";
                break;
            default:
                break;
        }
        auto bg=Sprite::create(bgName);
        //背景图的x轴坐标,隔着一个屏幕的距离，就像这样子：0..0..0
        bg->setPosition(layer->getContentSize().width/2+(WinSize.width*i), layer->getContentSize().height/2);
        layer->addChild(bg);
    }
    
    //这句话先不用管，知道他是等待1秒后会执行括号里面的方法就好。
    this->runAction(Sequence::create(DelayTime::create(1),CallFunc::create([&](){
        
        //scrollView要偏移的一个位置，在这里我吗直接填入向左移动一个屏幕的距离。本节直接移动，下节课结合触摸函数继续处理。
        scrollView->setContentOffsetInDuration(Vec2(-WinSize.width*1,0), 0.2f);
        
    }), NULL));

效果：