博客文章

cocos2d-x CCControlSlider CCControlSwitch CCScale9Sprite CCControlButton

作者: andy.      时间: 2016-12-03 22:51:20

这几个东西都是Cocos2d-x扩展库中的东西。

1、CCControlSlider。看效果:

blob.png

create方法,第一个参数底下那个条条,第二个参数上面那个条条,第三个参数那个圆圈圈。controlValueChangeCallback设置拖动的时候的回调函数,就是value change的时候的回调函数。下面代码中先设置的回调函数,再setValue的,此时setValue的值和初始值不同的时候,会调用回调函数。

bool UI::init(){
	CCLayer::init();

	CCControlSlider * slider = CCControlSlider::create("sliderTrack.png", "sliderProgress.png", "sliderThumb.png");
	slider->setValue(1.2f);
	slider->addTargetWithActionForControlEvents(this, cccontrol_selector(UI::controlValueChangeCallback), CCControlEventValueChanged);

	slider->setPosition(ccp(200, 200));

	slider->setMaximumValue(2.0f);
	slider->setMinimumValue(0.0f);
	slider->setMaximumAllowedValue(1.9f);
	slider->setMinimumAllowedValue(0.5f);

	slider->setValue(1.2f);

	addChild(slider);

	return true;
}

void UI::controlValueChangeCallback(CCObject* obj, CCControlEvent event){
	CCLog("%.2g", ((CCControlSlider *)obj)->getValue());
}

2、CCControlSwitch。效果:

blob.png

create方法,第一个参数为遮盖的图片,第二个为打开的时候显示的图片,第三个为关闭的时候显示的图片,第四个为那个圆圈圈。它还有一个重载,再在后面跟两个参数,都为CCLabelTTF,第一个为打开的时候显示的文字,第二个为关闭的时候显示的文字。

bool UI::init(){
	CCLayer::init();

	CCControlSwitch * cswitch = CCControlSwitch::create(CCSprite::create("switch-mask.png"), CCSprite::create("switch-on.png"), CCSprite::create("switch-off.png"), CCSprite::create("switch-thumb.png"));
	cswitch->addTargetWithActionForControlEvents(this, cccontrol_selector(UI::switchValueChangeCallback), CCControlEventValueChanged);
	cswitch->setPosition(ccp(200, 200));
	addChild(cswitch);

	return true;
}

void UI::switchValueChangeCallback(CCObject* obj, CCControlEvent event){
	CCControlSwitch * cswitch = (CCControlSwitch *)obj;
	if (cswitch->isOn())
		CCLog("on");
	else
		CCLog("off");
}

3、CCScale9Sprite。九宫格的精灵,作拉伸的时候使用可以不发生很大的失真,比如QQ聊天记录中的气泡,拉伸的时候只拉伸了中间相同的部分,而四个角是没有变化的。

CCScale9Sprite* CCScale9Sprite::create(const char* file, CCRect rect,  CCRect capInsets)

第一个参数为文件,第二个参数为文件的大小,第三个参数为中间作为拉伸的框框(这样子四个角落就不会被拉伸)。如图:

blob.png

如果不填的话,那么就是等分九块。

看代码:

bool UI::init(){
	CCLayer::init();
	CCSprite * sprite1 = CCSprite::create("scale9.png");
	sprite1->ignoreAnchorPointForPosition(true);
	sprite1->setPosition(ccp(10, 220));
	addChild(sprite1);
	CCScale9Sprite * sprite2 = CCScale9Sprite::create("scale9.png");
	sprite2->ignoreAnchorPointForPosition(true);
	sprite2->setPosition(ccp(10, 100));
	sprite2->setPreferredSize(CCSize(400, 110));
	addChild(sprite2);
	CCScale9Sprite * sprite3 = CCScale9Sprite::create("scale9.png", CCRect(0, 0, 116, 102), CCRect(50, 50, 16, 2));
	sprite3->ignoreAnchorPointForPosition(true);
	sprite3->setPosition(ccp(10, 10));
	sprite3->setPreferredSize(CCSize(400, 90));
	addChild(sprite3);
	return true;
}

效果如下:

blob.png

4、CCControlButton。这个东西的构成可以有很多的元素,相应的功能就很强大了。好不好看啊,可以拥有的事件啊什么的。

看代码:

bool UI::init(){
	CCLayer::init();

	CCScale9Sprite * bgbutton1 = CCScale9Sprite::create("button.png");
	CCScale9Sprite * bgbutton2 = CCScale9Sprite::create("buttonHighlighted.png");
	CCLabelTTF * label = CCLabelTTF::create("Touch Me", "Courier New", 30);//这个button显示的文字

	CCControlButton * button = CCControlButton::create(label, bgbutton1);//创建这个ControlButton
	button->setPosition(ccp(200, 200));
	button->setColor(ccc3(225, 225, 225));//btn 的文本的颜色
	button->setBackgroundSpriteForState(bgbutton2, CCControlStateHighlighted);//设置按下这个按钮的后面那个背景
	button->setTitleColorForState(ccRED, CCControlStateHighlighted);//设置按下这个按钮的颜色

	addChild(button);
	return true;
}

效果如下:

blob.png

这个按钮可以添加更多的相应事件,同样的通过addTargetWithActionForControlEvents。