3.4.5 控件类及其子类

在应用的开发中，无论是Android操作系统还是iOS操作系统，其开发框架都提供了控件，包括按键、拖动滑块等，这样提高了开发效率。对于游戏的开发，UI的开发同样需要控件来提高开发效率。对Cocos2D-x来说，从2.0版本开始提供了很多控件类来帮助我们更好地开发UI。

1.拖动滑块的控件类CCControlSlider

首先来看拖动滑块的控件类CCControlSlider。tests项目中ControlExtensionTest\CCControl-SliderTest目录下CCControlSliderTest.cpp中的代码如代码清单3-25所示。

代码清单3-25 定义并初始化CCControlSliderTest类实例

bool CCControlSliderTest::init()
{
    if (CCControlScene::init())
    {
        CCSize screenSize=CCDirector::sharedDirector()->getWinSize();
        //定义标签的代码，考虑到篇幅而被省略
        ...
        //定义CCControlSlider
        CCControlSlider *slider=CCControlSlider::create("extensions/
            sliderTrack.png","extensions/sliderProgress.png","extensions/
            sliderThumb.png");
        slider->setAnchorPoint(ccp(0.5f,1.0f));
        slider->setMinimumValue(0.0f);//设置范围最小值
        slider->setMaximumValue(5.0f);//设置范围最大值
        slider->setPosition(ccp(screenSize.width/2.0f,screenSize.height/2.0f));
        //添加回调函数，当滑块被拖动时被调用
        slider->addTargetWithActionForControlEvents(this,cccontrol_selector(CCC
            ontrolSliderTest::valueChanged),CCControlEventValueChanged);
        addChild(slider);
        return true;
    }
    return false;
}
void CCControlSliderTest::valueChanged(CCObject *sender,CCControlEvent
    controlEvent)
{
    CCControlSlider* pSlider=(CCControlSlider*)sender;
m_pD isplayValueLabel->setString(CCString::createWithFormat("Slider value=
    %.02f",pSlider->getValue())->getCString());
}

要定义拖动滑块对象，首先调用create函数，参数为图片路径，分别是滑块滑道图片路径、滑块滑动后覆盖滑道图片路径和滑块图片路径；之后设置锚点，并设置范围最小值和设置范围最大值，设置位置后给拖动注册拖动事件接受函数。在拖动事件中，可以通过pSlider->getValue())->getCString()来获取目前所在位置的值，运行效果如图3-19所示。

图3-19 CCControlSlider运行效果

2.颜色选择盘类CCControlColourPicker

颜色选择盘类CCControlColourPicker的定义和初始化如代码清单3-26所示。代码在tests项目中ControlExtensionTest\CCControl-ColourPickerTest目录下的CCControlColourPicker-Test.cpp文件中。

代码清单3-26 CCControlColourPicker类的定义和初始化

bool CCControlColourPickerTest::init()
{
    if (CCControlScene::init())
    {
        CCSize screenSize=CCDirector::sharedDirector()->getWinSize();
        CCNode *layer=CCNode::create();
        layer->setPosition(ccp (screenSize.width/2,screenSize.height/2));
        addChild(layer,1);
        double layer_width=0;
        //定义并初始化颜色选择盘
        CCControlColourPicker *colourPicker=CCControlColourPicker::create();
        colourPicker->setColor(ccc3(37,46,252));
        colourPicker->setPosition(ccp (colourPicker->getContentSize().width/2,0));
        //添加到层次中
        layer->addChild(colourPicker);
        //注册事件
        colourPicker->addTargetWithActionForControlEvents(this,cccontrol_selector(
    CCControlColourPickerTest::colourValueChanged),CCControlEventValueChanged);
        //以下定义其他控件的代码省略
        ...
        return true;
    }
    return false;
}
void CCControlColourPickerTest::colourValueChanged(CCObject *sender,
CCControlEvent controlEvent)
{
   CCControlColourPicker* pPicker=(CCControlColourPicker*)sender;
   m_pColorLabel->setString(CCString::createWithFormat("#%02X%02X%02X",pPicker-
       >getColorValue().r,pPicker->getColorValue().g,pPicker->getColorValue().
       b)->getCString());
}

首先定义CCControlColourPicker，直接调用create函数就可以。这里需要把tests\Resources\extensions目录下和CCControlColour-Picker相关的文件复制到Resources\extensions目录，然后定义初始颜色，加入父节点中，并注册回调函数。回调函数通过pPicker->getColorValue().g,pPicker->getColorValue().b)->getCString()获得相应的颜色值字符串。运行效果如图3-20所示。

图3-20 CCControlColourPicker运行效果

3.开关按钮类CCControlSwitch

开关按钮类CCControlSwitch的定义和初始化如代码清单3-27所示。代码在tests项目中的ControlExtensionTest\CCControlSwitchTest目录下的CCControlSwitchTest.cpp中。

代码清单3-27 CCControlSwitch的定义和初始化

bool CCControlSwitchTest::init()
{
    if (CCControlScene::init())
    {
        //定义其他控件，代码省略
       ...
        //定义开关控件
        CCControlSwitch *switchControl=CCControlSwitch::create
            (
                CCSprite::create("extensions/switch-mask.png"),
                CCSprite::create("extensions/switch-on.png"),
                CCSprite::create("extensions/switch-off.png"),
                CCSprite::create("extensions/switch-thumb.png"),
                CCLabelTTF::create("On","Arial-BoldMT",16),
                CCLabelTTF::create("Off","Arial-BoldMT",16)
            );
        switchControl->setPosition(ccp (layer_width+10+switchControl-
            >getContentSize().width/2,0));
        layer->addChild(switchControl);
        switchControl->addTargetWithActionForControlEvents(this,cccontrol_selec
            tor(CCControlSwitchTest::valueChanged),CCControlEventValueChanged);
        //定义其他控件，代码省略
        ...
        return true;
    }
    return false;
}

要定义开关对象，首先调用create函数，参数为图片路径和上面的文字标签。图片路径分别是背景图片路径、开状态背景图片路径、关状态背景图片路径和开关背景图片路径，文字标签是开文字标签、关文字标签。设置位置加入布景层后定义回调函数。运行效果如图3-21所示。

图3-21 CCControlSwitch运行效果

4.按钮类CCControlButton

按钮类CCControlButton的定义和初始化如代码清单3-28所示。代码是tests项目中ControlExtensionTest\CCControlButtonTest目录下CCControlButtonTest.cpp中的CCControlButtonTest_Event的init函数。

代码清单3-28 CCControlButton的定义和初始化

bool CCControlButtonTest_Event::init()
{
    if (CCControlScene::init())
    {
        //定义其他控件，代码省略
        ...
        //定义并初始化按钮
        CCControlButton *controlButton=CCControlButton::create(titleButton,
            backgroundButton);
        controlButton->setBackgroundSpriteForState(backgroundHighlightedButton,
            CCControlStateHighlighted);
        controlButton->setTitleColorForState(ccWHITE,CCControlStateHighlighted);
        controlButton->setAnchorPoint(ccp(0.5f,1));
        controlButton->setPosition(ccp(screenSize.width/2.0f,screenSize.
            height/2.0f));
        addChild(controlButton,1);
        //定义其他控件，代码省略
        ...
        //加入回调函数
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchDownAction),
            CCControlEventTouchDown);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchDragInsideAction),
            CCControlEventTouchDragInside);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchDragOutsideAction),CCControlEventTouchDragOutside);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchDragEnterAction),
            CCControlEventTouchDragEnter);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchDragExitAction),
            CCControlEventTouchDragExit);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchUpInsideAction),
            CCControlEventTouchUpInside);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchUpOutsideAction),
            CCControlEventTouchUpOutside);
        controlButton->addTargetWithActionForControlEvent(this,cccontrol_
            selector(CCControlButtonTest_Event::touchCancelAction),
            CCControlEventTouchCancel);
        return true;
    }
    return false;
}

要定义按钮对象，首先调用create函数。该函数传入的参数可以是图片的路径，也可以是精灵对象。两个参数代表的分别是按钮标题字和背景。之后可以设置按钮的参数，包括设置按钮位置和加入定义的回调函数等。这里的回调函数可以有多个，根据需要的操作定义，包括按下、拖动和抬起等。运行效果如图3-22所示。

图3-22 CCControlButton运行效果

本节介绍了Cocos2D-x的布景层类和它的子类，下节开始介绍精灵类及其子类。

上一章目录下一章