Cocos2dx 常用控件学习笔记

于 2020-02-25 00:52:26 发布
阅读量331 收藏
点赞数
文章标签： cocos2d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39457234/article/details/104484287
版权

1、演示拖动滑块示例：

 	Size visibleSize = Director::getInstance()->getVisibleSize();
    Vec2 origin = Director::getInstance()->getVisibleOrigin();
    auto closeItem = MenuItemImage::create(
        "CloseNormal.png",
        "CloseSelected.png",
        CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
    closeItem->setPosition(Vec2(origin.x + visibleSize.width - closeItem->getContentSize().width / 2,
        origin.y + closeItem->getContentSize().height / 2));
    auto menu = Menu::create(closeItem, NULL);
    menu->setPosition(Vec2::ZERO);
    this->addChild(menu, 1);
    // 设置标签初始文字、位置，并添加为当前层的子节点
    _displayValueLabel = Label::createWithSystemFont("请使用拇指移动滑块.", "Marker Felt", 32);
    _displayValueLabel->setPosition(visibleSize.width / 2, visibleSize.height / 2 + 100);
    addChild(_displayValueLabel);
    // 创建一个拖动滑块
    auto slider = ControlSlider::create("sliderTrack.png", "sliderProgress.png", "sliderThumb.png");
    // 设置拖动滑块的范围最小值
    slider->setMinimumValue(0.0f);
    // 设置拖动滑块的范围最大值
    slider->setMaximumValue(10.0f);
    // 绑定事件处理函数，当滑块被拖动时被调用
    slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), Control::EventType::VALUE_CHANGED);
    slider->setPosition(visibleSize.width / 2, visibleSize.height / 2);
    this->addChild(slider);

在这里插入图片描述
init函数中首先添加了一个文本标签，接下来使用三个图片文件创建一个拖动滑块，设置最小和最大的范围值，并给滑动对象绑定一个事件处理函数valueChanged，当滑块被拖动时被调用，当拖动滑块时，获取滑块的值并更新标签内容，将其显示在屏幕上

2、演示Cocos Studio中的UI控件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
（1）Button：

 	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 提示信息
    message = Label::createWithSystemFont("请触摸按钮", "", 32);
    message->setPosition(visibleSize.width / 2, visibleSize.height * 0.7);
    this->addChild(message);
    // 创建一个Button对象
    auto button = Button::create("button_n.png");
    // 设置规模大小
    button->setScale(1.8);
    // 设置Button上显示的文本
    button->setTitleText("Text Button");
    // 设置Button上显示的文本的字体
    button->setTitleFontName("微软雅黑");
    // 设置Button上显示的文本的字体大小
    button->setTitleFontSize(14);
    // 设置Button的坐标位置
    button->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    /**
     添加触碰监听
     第一个参数是触发事件的对象
     第二个参数是触发事件的类型，分别为BEGAN、MOVED、ENDED和CANCELED
     */
    button->addTouchEventListener([=](Ref* pSender, Widget::TouchEventType type) {
        switch (type) {
        case Widget::TouchEventType::BEGAN:
            message->setString("触摸事件类型：BEGAN");
            break;
        case Widget::TouchEventType::MOVED:
            message->setString("触摸事件类型：MOVED");
            break;
        case Widget::TouchEventType::ENDED:
            message->setString("触摸事件类型：ENDED");
            break;
        case Widget::TouchEventType::CANCELED:
            message->setString("触摸事件类型：CANCELED");
            break;
        default:
            break;
        }
        });

在这里插入图片描述
点击主菜单按钮测试，出现如下测试画面，点击按钮刷新文本
（2）Text：

 	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 使用系统字体创建一个Text
    auto text1 = Text::create("HelloWorld", "Arial", 48);
    text1->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2 + 100));
    this->addChild(text1);
    // 使用ttf文件创建一个字体
    auto text2 = Text::create("HelloWorld", "Marker Felt.ttf", 48);
    text2->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2 - 100));
    this->addChild(text2);

在这里插入图片描述
点击文本测试出现如上界面，显示两种不同的文本，一种系统文本，一种字体文件初始化的文本
（3）TextField：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 添加一个Text，用于显示文本框事件类型
    _displayValueLabel = Text::create("请触摸文本框", "Marker Felt.ttf", 48);
    _displayValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.8));
    this->addChild(_displayValueLabel);
    // 添加一个Text，当数据输入结束时，显示输入的数据
    _messageValueLabel = Text::create("你没有输入数据", "Marker Felt.ttf", 48);
    _messageValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.7));
    this->addChild(_messageValueLabel);
    // 添加一个背景
    auto background = Sprite::create("background.png");
    background->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2 - 80));
    this->addChild(background);
    // 创建文本框
    auto textField = TextField::create("请输入数据", "Arial", 48);
    textField->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2 + 50));
    // 添加文本框事件监听器
    textField->addEventListener([=](Ref* pSender, TextField::EventType type) {
        // 根据文本框的事件类型执行相应的代码
        switch (type)
        {
        case TextField::EventType::ATTACH_WITH_IME:
            _displayValueLabel->setString("输入开始");
            break;
        case TextField::EventType::DETACH_WITH_IME:
        {
            _displayValueLabel->setString("输入完成");
            // 获得文本框输入的数据
            std::string value = textField->getStringValue();
            // 如果数据大于0，显示在_messageValueLabel当中
            if (value.length() > 0)
            {
                _messageValueLabel->setString("你输入的数据:" + value);
            }
            else
            {
                _messageValueLabel->setString("你没有输入数据");
            }
        }
        break;
        case TextField::EventType::INSERT_TEXT:
            _displayValueLabel->setString("插入数据");
            break;
        case TextField::EventType::DELETE_BACKWARD:
            _displayValueLabel->setString("删除数据");
            break;
        default:
            break;
        }

        });
    this->addChild(textField);

在这里插入图片描述
点击文本框测试后，进入如上界面，显示的输入框可在ios模拟器上操作
（4）CheckBox：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 为了看的更清楚，添加一个背景
    auto background = Sprite::create("background.png");
    background->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    this->addChild(background);
    // 文本，用来显示进度条的值
    _displayValueLabel = Text::create("请触摸复选框", "fonts/Marker Felt.ttf", 32);
    _displayValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.8));
    this->addChild(_displayValueLabel);
    // 创建一个CheckBox对象
    auto checkBox = CheckBox::create("check_box_normal.png",
        "check_box_normal_press.png",
        "check_box_active.png",
        "check_box_normal_disable.png",
        "check_box_active_disable.png");
    checkBox->setScale(2);
    checkBox->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    // // 添加事件监听器
    checkBox->addEventListener([=](Ref* pSender, CheckBox::EventType type) {
        switch (type)
        {
        case CheckBox::EventType::SELECTED:
            _displayValueLabel->setString("Selected（选中）");
            break;

        case CheckBox::EventType::UNSELECTED:
            _displayValueLabel->setString("Unselected（未选中）");
            break;

        default:
            break;
        }

        });
    this->addChild(checkBox);

在这里插入图片描述
在这里插入图片描述
点击复选框测试后进入如上界面，点击复选框选中后显示选中效果
（5）ImageView：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 添加背景
    auto background = Sprite::create("background.png");
    background->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    this->addChild(background);
    // 创建一个ImageView
    auto imageView = ImageView::create("ccicon.png");
    imageView->setScale(2);
    imageView->setPosition(Vec2(visibleSize.width / 2,
        visibleSize.height / 2));
    this->addChild(imageView);

在这里插入图片描述
（6）LoadingBar：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 为了看的更清楚，添加一个背景
    auto background = Sprite::create("background.png");
    background->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    this->addChild(background);
    // 文本，用来显示进度条的值
    _displayValueLabel = Text::create("Percent = 0", "Marker Felt.ttf", 48);
    _displayValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.8));
    this->addChild(_displayValueLabel);
    // 创建一个LoadingBar
    auto loadingBar = LoadingBar::create("loadingbar.png");
    // 设置进度条从左向右递增
    loadingBar->setDirection(LoadingBar::Direction::LEFT);
    // 设置tag值，之后在update函数中可以通过getChildByTag函数获取这个LoadingBar对象
    loadingBar->setTag(100);
    // 设置坐标位置
    loadingBar->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    // 将LoadingBar添加为当前层的子节点
    this->addChild(loadingBar);
    // 启用定时器回调更新函数
    this->scheduleUpdate();

在这里插入图片描述
（7）Slider：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 为了看的更清楚，添加一个背景
    auto background = Sprite::create("background.png");
    background->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    this->addChild(background);
    // 文本，用来显示进度条的值
    _displayValueLabel = Text::create("Percent = 0", "Marker Felt.ttf", 48);
    _displayValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.8));
    this->addChild(_displayValueLabel);
    // 创建一个LoadingBar
    auto loadingBar = LoadingBar::create("loadingbar.png");
    // 设置进度条从左向右递增
    loadingBar->setDirection(LoadingBar::Direction::LEFT);
    // 设置tag值，之后在update函数中可以通过getChildByTag函数获取这个LoadingBar对象
    loadingBar->setTag(100);
    // 设置坐标位置
    loadingBar->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    // 将LoadingBar添加为当前层的子节点
    this->addChild(loadingBar);
    // 启用定时器回调更新函数
    this->scheduleUpdate();

在这里插入图片描述
（8）Layout：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 左边的背景
    auto background_Left = Sprite::create("background.png");
    background_Left->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
    background_Left->setPosition(Vec2(0, visibleSize.height / 2));
    this->addChild(background_Left);
    // 创建左边的Layout
    Layout* layout_Left = Layout::create();
    // 设置Layout的布局类型为平面相对布局
    layout_Left->setLayoutType(LayoutType::RELATIVE);
    // 设置Layout的ContentSize
    layout_Left->setContentSize(Size(280, 150));
    // 设置Layout的锚点
    layout_Left->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
    // 设置Layout的背景颜色类型为单一固定颜色
    layout_Left->setBackGroundColorType(Layout::BackGroundColorType::SOLID);
    // 设置Layout的背景颜色为绿色
    layout_Left->setBackGroundColor(Color3B::GREEN);
    // 设置Layout的位置
    layout_Left->setPosition(Vec2(100, visibleSize.height / 2));
    // 将Layout添加为当前层的子节点
    this->addChild(layout_Left);
    // 创建一个Button对象，设置在Layout的左上角
    Button* button_TopLeft = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_TopLeft);
    RelativeLayoutParameter* rp_TopLeft = RelativeLayoutParameter::create();
    rp_TopLeft->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT);
    button_TopLeft->setLayoutParameter(rp_TopLeft);
    // 创建一个Button对象，设置在Layout的上方中间位置
    Button* button_TopCenter = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_TopCenter);
    RelativeLayoutParameter* rp_TopCenter = RelativeLayoutParameter::create();
    rp_TopCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL);
    button_TopCenter->setLayoutParameter(rp_TopCenter);
    // 创建一个Button对象，设置在Layout的右上角
    Button* button_TopRight = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_TopRight);
    RelativeLayoutParameter* rp_TopRight = RelativeLayoutParameter::create();
    rp_TopRight->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT);
    button_TopRight->setLayoutParameter(rp_TopRight);
    // 创建一个Button对象，设置在Layout的中间位置的左边
    Button* button_LeftCenter = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_LeftCenter);
    RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create();
    rp_LeftCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_CENTER_VERTICAL);
    button_LeftCenter->setLayoutParameter(rp_LeftCenter);
    // 创建一个Button对象，设置在Layout的中间位置
    Button* buttonCenter = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(buttonCenter);
    RelativeLayoutParameter* rpCenter = RelativeLayoutParameter::create();
    rpCenter->setAlign(RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);
    buttonCenter->setLayoutParameter(rpCenter);
    // 创建一个Button对象，设置在Layout的中间位置的右边
    Button* button_RightCenter = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_RightCenter);
    RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();
    rp_RightCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_CENTER_VERTICAL);
    button_RightCenter->setLayoutParameter(rp_RightCenter);
    // 创建一个Button对象，设置在Layout的左下脚
    Button* button_LeftBottom = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_LeftBottom);
    RelativeLayoutParameter* rp_LeftBottom = RelativeLayoutParameter::create();
    rp_LeftBottom->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_BOTTOM);
    button_LeftBottom->setLayoutParameter(rp_LeftBottom);
    // 创建一个Button对象，设置在Layout的底部的中间位置
    Button* button_BottomCenter = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_BottomCenter);
    RelativeLayoutParameter* rp_BottomCenter = RelativeLayoutParameter::create();
    rp_BottomCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_BOTTOM_CENTER_HORIZONTAL);
    button_BottomCenter->setLayoutParameter(rp_BottomCenter);
    // 创建一个Button对象，设置在Layout的右下脚
    Button* button_RightBottom = Button::create("animationbuttonnormal.png",
        "animationbuttonpressed.png");
    layout_Left->addChild(button_RightBottom);
    RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create();
    rp_RightBottom->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BOTTOM);
    button_RightBottom->setLayoutParameter(rp_RightBottom);
    // 右边的背景
    auto background_Right = Sprite::create("background.png");
    background_Right->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
    background_Right->setPosition(Vec2(visibleSize.width - background_Right->getContentSize().width, visibleSize.height / 2));
    this->addChild(background_Right);
    // 创建右边的Layout
    Layout* layout_Right = Layout::create();
    // 设置Layout的布局类型为平面相对布局
    layout_Right->setLayoutType(LayoutType::RELATIVE);
    layout_Right->setContentSize(Size(280, 150));
    layout_Right->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
    // 设置Layout的位置
    layout_Right->setPosition(Vec2(visibleSize.width - layout_Right->getContentSize().width - 100, visibleSize.height / 2));
    this->addChild(layout_Right);
    // 创建一个图片放在Layout的中间位置
    ImageView* imageView_Center = ImageView::create("scrollviewbg.png");
    layout_Right->addChild(imageView_Center);
    RelativeLayoutParameter* rp_Center = RelativeLayoutParameter::create();
    rp_Center->setRelativeName("rp_Center");
    rp_Center->setAlign(RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);
    imageView_Center->setLayoutParameter(rp_Center);
    // 创建一个图片放在Layout的中间位置的上方
    ImageView* imageView_AboveCenter = ImageView::create("animationbuttonnormal.png");
    layout_Right->addChild(imageView_AboveCenter);
    RelativeLayoutParameter* rp_AboveCenter = RelativeLayoutParameter::create();
    rp_AboveCenter->setRelativeToWidgetName("rp_Center");
    rp_AboveCenter->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_ABOVE_CENTER);
    imageView_AboveCenter->setLayoutParameter(rp_AboveCenter);
    // 创建一个图片放在Layout的中间位置的下方
    ImageView* imageView_BelowCenter = ImageView::create("animationbuttonnormal.png");
    layout_Right->addChild(imageView_BelowCenter);
    RelativeLayoutParameter* rp_BelowCenter = RelativeLayoutParameter::create();
    rp_BelowCenter->setRelativeToWidgetName("rp_Center");
    rp_BelowCenter->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_BELOW_CENTER);
    imageView_BelowCenter->setLayoutParameter(rp_BelowCenter);
    // 创建一个图片放在Layout的中间位置的左边
    ImageView* imageView_LeftCenter = ImageView::create("animationbuttonnormal.png");
    layout_Right->addChild(imageView_LeftCenter);
    RelativeLayoutParameter* rp_LeftOfCenter = RelativeLayoutParameter::create();
    rp_LeftOfCenter->setRelativeToWidgetName("rp_Center");
    rp_LeftOfCenter->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_LEFT_OF_CENTER);
    imageView_LeftCenter->setLayoutParameter(rp_LeftOfCenter);
    // 创建一个图片放在Layout的中间位置的右边
    ImageView* imageView_RightCenter = ImageView::create("animationbuttonnormal.png");
    layout_Right->addChild(imageView_RightCenter);
    RelativeLayoutParameter* rp_RightOfCenter = RelativeLayoutParameter::create();
    rp_RightOfCenter->setRelativeToWidgetName("rp_Center");
    rp_RightOfCenter->setAlign(RelativeLayoutParameter::RelativeAlign::LOCATION_RIGHT_OF_CENTER);
    imageView_RightCenter->setLayoutParameter(rp_RightOfCenter);

在这里插入图片描述
（9）ScrollView：

Size visibleSize = Director::getInstance()->getVisibleSize();
    // 添加一个背景
    auto background = Sprite::create("background.png");
    background->setPosition(Vec2(visibleSize.width / 2, visibleSize.height / 2));
    this->addChild(background);
    Size backgroundSize = background->getContentSize();

    // 创建一个ScrollView滚动层容器
    ScrollView* scrollView = ScrollView::create();
    // 激活反弹，拉过了之后，可以弹回来
    scrollView->setBounceEnabled(true);
    // 设置锚点
    scrollView->setAnchorPoint(Vec2::ZERO);
    // 设置滚动方向为水平方向滚动
    scrollView->setDirection(ScrollView::Direction::HORIZONTAL);
    // 设置ScrollView的ContentSize，和背景一致
    scrollView->setContentSize(backgroundSize);
    // 设置滚动层容器的内部容器大小
    scrollView->setInnerContainerSize(scrollView->getContentSize());
    // 设置滚动层容器的位置坐标
    scrollView->setPosition(Vec2((visibleSize.width - backgroundSize.width) / 2.0f +
        (backgroundSize.width - scrollView->getContentSize().width) / 2.0f,
        (visibleSize.height - backgroundSize.height) / 2.0f +
        (backgroundSize.height - scrollView->getContentSize().height) / 2.0f));
    // 将滚动层容器添加为当前层的子节点
    this->addChild(scrollView);
    // 创建一个ImageView
    ImageView* imageView = ImageView::create("ccicon.png");
    float innerWidth = scrollView->getContentSize().width + imageView->getContentSize().width;
    float innerHeight = scrollView->getContentSize().height;
    scrollView->setInnerContainerSize(Size(innerWidth, innerHeight));
    // 创建一个Button
    Button* button = Button::create("animationbuttonnormal.png", "animationbuttonpressed.png");
    button->setPosition(Vec2(button->getContentSize().width / 2.0f,
        scrollView->getInnerContainerSize().height - button->getContentSize().height / 2.0f));
    // 将Button添加为当前层的子节点
    scrollView->addChild(button);
    // 创建一个Button
    Button* titleButton = Button::create("backtotopnormal.png", "backtotoppressed.png");
    titleButton->setTitleText("Title Button");
    titleButton->setPosition(Vec2(button->getRightBoundary() + button->getContentSize().width / 2.0f, button->getBottomBoundary() - button->getContentSize().height / 2.0f));
    // 将Button添加为当前层的子节点
    scrollView->addChild(titleButton);
    // 创建一个Button
    Button* button_scale9 = Button::create("button.png", "buttonHighlighted.png");
    // 设置九宫格
    button_scale9->setScale9Enabled(true);
    button_scale9->setContentSize(Size(100.0f, button_scale9->getVirtualRendererSize().height));
    button_scale9->setPosition(Vec2(titleButton->getRightBoundary() + titleButton->getContentSize().width / 2.0f, titleButton->getBottomBoundary() - titleButton->getContentSize().height / 2.0f));
    // 将Button添加为当前层的子节点
    scrollView->addChild(button_scale9);
    // 设置ImageView的位置在第三个Button之后
    imageView->setPosition(Vec2(innerWidth - button_scale9->getPosition().x,
        button_scale9->getBottomBoundary() - button_scale9->getContentSize().height / 2.0f));
    // 将ImageView添加为当前层的子节点
    scrollView->addChild(imageView);

在这里插入图片描述
（10）ListView：

 	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 提示信息
    _displayValueLabel = Text::create("请垂直方向滚动ListView", "fonts/Marker Felt.ttf", 32);
    _displayValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.8));
    this->addChild(_displayValueLabel);
    // 创建一个ListView
    auto listView = ListView::create();
    // 设置ListView的方向，本例为VERTICAL（垂直）
    listView->setDirection(ScrollView::Direction::VERTICAL);
    // 设置ListView的背景图片
    listView->setBackGroundImage("green_edit.png");
    // 设置背景图片作为九宫格填充
    listView->setBackGroundImageScale9Enabled(true);
    // 设置ListView的ContentSize
    listView->setContentSize(Size(480, 260));
    // 设置ListView的位置
    listView->setPosition(Vec2((visibleSize.width - listView->getContentSize().width) / 2.0f,
        (visibleSize.height - listView->getContentSize().height) / 2.0f));
    // 添加事件监听器
    listView->addEventListener([=](Ref* pSender, ListView::EventType type) {
        switch (type)
        {
        case ListView::EventType::ON_SELECTED_ITEM_START:
        {
            ListView* listView = static_cast<ListView*>(pSender);
            log("select child start index = %ld", listView->getCurSelectedIndex());
            break;
        }
        case ListView::EventType::ON_SELECTED_ITEM_END:
        {
            ListView* listView = static_cast<ListView*>(pSender);
            log("select child end index = %ld", listView->getCurSelectedIndex());
            break;
        }
        default:
            break;
        }

        });
    // 添加事件监听器
    listView->addEventListener([=](Ref* pSender, ScrollView::EventType type) {
        switch (type) {
        case ScrollView::EventType::SCROLL_TO_BOTTOM:
            log("SCROLL_TO_BOTTOM");
            break;
        case ScrollView::EventType::SCROLL_TO_TOP:
            log("SCROLL_TO_TOP");
            break;
        default:
            break;
        }
        });
    // 将ListView添加为当前层的子节点
    this->addChild(listView);
    // 添加自定义item（10个Button）
    for (int i = 0; i < 10; ++i)
    {
        // 创建一个Button
        Button* custom_button = Button::create("button.png", "buttonHighlighted.png");
        // 设置Button的Name
        custom_button->setName("Title Button");
        // 设置Button是否九宫格填充
        custom_button->setScale9Enabled(true);
        // 设置Button的ContentSize
        custom_button->setContentSize(Size(200, 60));
        // 设置Button的TitleText为对应_array的文本内容
        custom_button->setTitleText(StringUtils::format("listview_item_%d", i));
        // 设置Button的文本字体大小
        custom_button->setTitleFontSize(24);
        // 创建一个Layout，用来添加Button
        Layout* custom_item = Layout::create();
        // 设置Layout的ContentSize和Button的ContentSize一致
        custom_item->setContentSize(custom_button->getContentSize());
        // 设置Layout的坐标位置
        custom_button->setPosition(Vec2(custom_item->getContentSize().width / 2.0f, custom_item->getContentSize().height / 2.0f));
        // 将Button添加为Layout的字节
        custom_item->addChild(custom_button);
        // 将Layout添加为ListView的子节点
        listView->addChild(custom_item);

在这里插入图片描述
（11）PageView：

	Size visibleSize = Director::getInstance()->getVisibleSize();
    // 提示信息
    _displayValueLabel = Text::create("请水平方向移动page", "fonts/Marker Felt.ttf", 32);
    _displayValueLabel->setPosition(Vec2(visibleSize.width / 2, visibleSize.height * 0.8));
    this->addChild(_displayValueLabel);
    // 创建一个PageView
    auto pageView = PageView::create();
    // 设置PageView的ContentSize
    pageView->setContentSize(Size(480.0f, 320.0f));
    // 设置PageView在屏幕居中位置
    pageView->setPosition(Vec2((visibleSize.width - pageView->getContentSize().width) / 2.0f,
        (visibleSize.height - pageView->getContentSize().height) / 2.0f));
    // 设置PageView的数量，本例只有3个page
    int pageCount = 3;
    // 循环添加3个Layout（关卡图片）
    for (int i = 0; i < pageCount; ++i)
    {
        // 创建一个Layout
        Layout* layout = Layout::create();
        // 设置Layout的ContentSize
        layout->setContentSize(Size(480.0f, 320.0f));
        // 创建一个ImageView
        ImageView* imageView = ImageView::create(StringUtils::format("level%d.png", i + 1));
        imageView->setContentSize(Size(480.0f, 320.0f));
        imageView->setPosition(Vec2(layout->getContentSize().width / 2.0f, layout->getContentSize().height / 2.0f));
        // 将ImageView添加为Layout的子节点
        layout->addChild(imageView);
        // 在i表示的位置上插入Layout
        pageView->insertPage(layout, i);
    }
    // 添加事件监听器
    pageView->addEventListener([=](Ref* pSender, PageView::EventType type) {
        switch (type)
        {
        case PageView::EventType::TURNING:
        {
            PageView* pageView = dynamic_cast<PageView*>(pSender);
            // 在_displayValueLabel文本中显示PageIndex
            _displayValueLabel->setString(StringUtils::format("page = %ld", pageView->getCurPageIndex() + 1));
        }
        break;

        default:
            break;
        }
        });
    // 将PageView添加未当层的子节点
    this->addChild(pageView);

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

养兔子的张张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cocos2d-x控件示例
03-16
cocos2d-x ListView控件，Slider控件，Switch控件，ColourPicker控件实例
cocos2dx学习之常用控件的使用
hnust_疯子
08-07 2181
关于COCOS2DX一些常用控件的理解，写给新手
Cocos2d-x MessageBox
COCO56的博客
06-15 583
源码 一行代码搞定，不知道网上搜的为啥写这么多行代码，看了下，有上千行了 MessageBox("消息内容", "消息标题"); 效果： Windows： Android
cocos2dx控件
12-11
Checkbox,tabmenu,DecoratedBox
cocos2dx自定义控件ScrollBar
01-13
自定义控件ScrollBar的设计，使用在TableView和ScrollView之中
cocos2d-x学习笔记
04-27
《cocos2d-x学习笔记》 在学习cocos2d-x时，了解其核心组件和工作流程至关重要。AppDelegate是cocos2d-x框架中的一个关键类，它扮演着应用程序入口点的角色，处理应用程序的生命周期事件。让我们深入探讨...
Cocos2d-x学习笔记——完全掌握C++ API与游戏项目开发.zip
06-28
本学习笔记旨在帮助开发者全面掌握Cocos2d-x的C++ API以及游戏项目的开发流程。 一、Cocos2d-x框架基础 Cocos2d-x是Cocos2d-x系列的C++版本，它提供了丰富的图形绘制、动画制作、音频播放、物理引擎等功能。Cocos2d...
Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
09-04
在Cocos2d-x游戏开发框架中，理解各个节点如CCScene、CCLayer和CCSprite的默认坐标和锚点是非常关键的。这些组件是构建游戏场景的基础，它们的坐标系统和锚点设置直接影响到元素的布局和动画效果。下面我们将深入...
cocos2d 学习笔记
06-27
本学习笔记将深入探讨cocos2d的核心概念、关键组件以及实际应用技巧。 一、cocos2d基本概念 1. Scene（场景）：cocos2d中的基本构造单元，代表游戏或应用的一个完整状态，例如主菜单、游戏关卡等。 2. Layer（层）...
cocos2d-x学习笔记(13)--schedule .rar
08-25
这份"Cocos2d-x学习笔记(13)--schedule .rar"很可能是深入讲解如何使用和理解cocos2d-x中的调度系统。让我们详细探讨一下这个主题。 1. **游戏循环（Game Loop）**： 游戏循环是所有游戏引擎的基础，cocos2d-x也不...
cocos2dx3.0 读取cocostudio UI控件
10-23
cocos2dx3.0 cocostudio UI
cocos2d-x 常用UI控件
11-30
总结cocos2d-x开发中常用ui控件的使用方法
cocos2dx开发者指南：UI控件使用
学无止境! 无休无止!
02-01 4160
综述 Cocos2d-x提供了一套易于使用的UI API来满足你的GUI需求，其中包括：Label、Menu、MenuItems、Buttons和Views。 Label（标签） Cocos2d-x中提供了Label(标签)对象来创建TTF、BMFont和SystemFont文本。 Label BMFont（BMFont标签） BMFont是使用位图字体的标签类型。位
Cocos2dx技术（三）——cocos2dx基本概念（六）控件库
YongYu_IT的专栏
04-09 3216
cocos2dx提供了一套易于使用的控件库来满足开发者的GUI需求。cocos2dx控件大致可分为两种，第一种是非继承自Widget类的早期控件库；第二类是新的继承自Widget类的控件库。 先介绍早期的非继承自Widget的控件库 1、标签（Label） 由于Label是SpriteBatchCode的子类，所以每个Label都具有精灵的特性，可以旋转、缩放、着色、改变锚点等等。
cocos2dx的控件
hwh的博客
02-27 754
http://blog.csdn.net/yongyu_it/article/details/44963371 cocos2dx提供了一套易于使用的控件库来满足开发者的GUI需求。cocos2dx控件大致可分为两种，第一种是非继承自Widget类的早期控件库；第二类是新的继承自Widget类的控件库。 先介绍早期的非继承自Widget的控件库 1、标签（Label）
Cocos2dx UI系列控件其一
GladiolusLai的博客
09-21 2894
游戏开发中，经常会使用到很多有关界面的控件，这些都属于UI控件。 所有UI控件的基类都继承Widget类，这个类是节点类的一种，若要自定义UI控件，继承这个类是必须的。 Widget类里包含了： FocusDirection 控件焦点方向 PositionType 布局系统中的控件位置类型 SizeType 布局系统中的控件尺寸类型 TouchEventType 触摸事件类型 Tex
Cocos2d-x layout （二）
杜甲同学的专栏
04-30 2267
相对某个控件进行布局 Size widgetSize = Director::getInstance()->getWinSize(); Text* alert = Text::create("Layout", "fonts/Marker Felt.ttf", 30 ); alert->setColor(Color3B(159, 168, 176)
cocos2dx 坐标学习
loni718的专栏
01-07 190
    auto visibleSize = Director::getInstance()-&gt;getVisibleSize();     得到所用的模拟器的大小，比如在不同的设备如iphone6,ipad 的大小     auto origin = Director::getInstance()-&gt;getVisibleOrigin();    得到实际这个坐标的位置，因为要兼容...
cocos2d-x的LayoutParameter布局深入理解
dingyuduan的专栏
01-05 630
之前理解的不深，今天遇到一个坑，收获了一些更深的理解。 需求是这样：一个相对布局的Panel，里面有个ImageView，界面其他地方有几个按钮，按下去后需要动态地改变这个ImageView的位置。 按照往常的理解，按钮事件得到触发后，无非这样操作就可以了嘛： node:getLayoutParameter():setMargin({ left = 10, right = 0, top =
Cocos2d-x学习笔记：从基础到控件应用
本笔记主要围绕C++基础和Cocos2dx的基本控件展开，适合初学者参考学习。 一、C++基础 1. 面向对象编程：C++支持面向对象编程，通常在头文件（h或hpp）中声明类和接口，在对应的cpp文件中实现类的方法。 2. 命名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值