| #include “cocos-ext.h” USING_NS_CC_EXT; |
- CCControlSlider
| CCControlSlider * slider = CCControlSlider::create(“sliderTrack.png”,”sliderProgress.png”,”sliderThumb.png”); |
@H_404_9@第一个参数表示，slider@H_404_9@滑动的轨道，即背景色。第二个参数表示滑动的进度。第三个参数表示拖动的按钮。
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@| slider->setMaximumValue(2.0f); //@H_404_9@设置滑动最大值 slider->setMinimumValue(0.0f); //@H_404_9@设置滑动最小值
slider->setValue(0.5f); //@H_404_9@设置默认值 slider->setMaximumAllowedValue(1.2f); //@H_404_9@设置某一个范围内的最大值 slider->setMinimumAllowedValue(0.3f); //@H_404_9@设置某一个范围内的最小值 |
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@
| slider->addTargetWithActionForControlEvents(this, cccontrol_selector(T12UI::controlCallback), CCControlEventValueChanged); |
| typedef unsigned int CCControlEvent; typedef void (CCObject::*SEL_CCControlHandler)(CCObject*,CCControlEvent); #define cccontrol_selector(_SELECTOR)(SEL_CCControlHandler)(&_SELECTOR); |
@H_404_9@关于CCControlEvent
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@| /** Kinds of possible events for the control objects. */ enum { CCControlEventTouchDown = 1 << 0, // A touch-down event in the control. CCControlEventTouchDragInside = 1 << 1, // An event where a finger is dragged inside the bounds of the control. CCControlEventTouchDragOutside = 1 << 2, // An event where a finger is dragged just outside the bounds of the control. CCControlEventTouchDragEnter = 1 << 3, // An event where a finger is dragged into the bounds of the control. CCControlEventTouchDragExit = 1 << 4, // An event where a finger is dragged from within a control to outside its bounds. CCControlEventTouchUpInside = 1 << 5, // A touch-up event in the control where the finger is inside the bounds of the control. CCControlEventTouchUpOutside = 1 << 6, // A touch-up event in the control where the finger is outside the bounds of the control. CCControlEventTouchCancel = 1 << 7, // A system event canceling the current touches for the control. CCControlEventValueChanged = 1 << 8 // A touch dragging or otherwise manipulating a control,causing it to emit a series of different values. }; typedef unsigned int CCControlEvent; |
- slider@H_404_9@案例说明：
| T12UI.h |
| #ifndef __T12UI_H__ #define __T12UI_H__
#include "cocos2d.h" #include "TBack.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT;
class T12UI :public TBack { public: static CCScene * scene(); CREATE_FUNC(T12UI); bool init();
CCLabelAtlas * atlas;
//slider的回调函数 void sliderCallBack(CCObject* sender,CCControlEvent event); };
#endif |
| T12UI.cpp |
| #include "T12UI.h" #include "AppMacros.h" #include "SimpleAudioEngine.h" using namespace CocosDenshion;
CCScene *T12UI::scene() { scene = CCScene::create(); T12UI * layer = create(); scene->addChild(layer); return scene; }
//UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需要包含 bool init() { TBack::init();
//第一个参数表示slider滑动的轨道，即背景色。第二个参数表示滑动的进度。 //第三个参数表示拖动的按钮 CCControlSlider *slider = CCControlSlider::create("sliderTrack.png","sliderProgress.png",21); font-family:新宋体; font-size:9.5pt">"sliderThumb.png");
//设置滑动最大值 slider->setMaximumValue(2.0f); //设置滑动的最小值 slider->setMinimumValue(0.0f);
//设置默认值 slider->setValue(0.5f); //设置某一范围内的最大值，当移动到了1.2之后移动不了了 slider->setMaximumAllowedValue(1.2f); //设置某一范围内的最小值，向左移动到0.3之后移动不了了 slider->setMinimumAllowedValue(0.3f); //设置slider的所在位置 slider->setPosition(ccp(winSize.width / 2,winSize.height/2 - 30));
slider->addTargetWithActionForControlEvents( this, cccontrol_selector(sliderCallBack),138); font-family:新宋体; font-size:9.5pt">CCControlEventValueChanged);
CCString *str = CCString::createWithFormat("%.2g",slider->getValue()); //第一个参数表示要显示的字符串 //第二个参数表示从哪张图片中取值 //第三个参数表示的是每个字的宽度width //第四个参数表示的是每个字的高度 //第五个参数表示的是起始的字符 /* creates the CCLabelAtlas with a string,a char map file(the atlas), the width and height of each element and the starting char of the atlas */ atlas = CCLabelAtlas::create( str->getCString(), "fonts/fps_images.png", 12,32,21); font-family:新宋体; font-size:9.5pt">'.'); atlas->setAnchorPoint(ccp(0.5,0.5)); //设置字体的放大效果 atlas->setScale(2.0f); atlas->winSize.height / 2 + 30)); addChild(atlas);
slider->setValue(1.3f);
addChild(slider);
return true; }
//设置slider的回调函数 //这里的sender表示发送的一者 void CCControlEvent event) { CCControlSlider * slider = (CCControlSlider *)sender;
getValue()); //因为成为了全局的了，所以能够访问的到 atlas->setString(str->getCString()); } |
| @H_404_9@运行结果： @H_404_9@最大值
@H_404_9@最小范围：
@H_404_9@最大范围： |
- CCControlSwitch
@H_404_9@第一个参数，掩底背景图片，第二个参数为开的图片，第三个参数为关的图片，第四个参数为手指划到按钮，第五，六个参数分别为开和关显示的文字。
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@| CCControlSwitch * sw = CCControlSwitch::create( CCSprite::create("switch-mask.png"), CCSprite::create("switch-on.png"), CCSprite::create("switch-off.png"), CCSprite::create("switch-thumb.png"), CCLabelTTF::create("ON","Courier New",20), CCLabelTTF::create("OFF",20) ); |
| sw->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::switchCallback), CCControlEventValueChanged) |
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@
| void T12UI::switchCallback(CCObject * sender,CCControlEvent event) { CCControlSwitch * sw = (CCControlSwitch *)sender; If(sw->isOn()) { CCLog(“On”); } else { CCLog(“off”); } } |
5 CCControlSwitch@H_404_9@案例说明
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@| T12UI.h |
| init();
//开关的回调函数 void switchCallBack(init();
//通过SimpleAudioEngine的方式实现加载音乐 SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("audio/start.wav"); //创建开关、 //第一个参数为：掩底背景CCSprite //第二个参数为开的CCSprite //第三个参数为关的CCSprite //第四个参数为手指滑到CCSprite //第五个参数on的label //第六个参数为off的label CCControlSwitch *sw = CCControlSwitch::create( CCSprite::"switch-mask.png"), "switch-on.png"),21); font-family:新宋体; font-size:9.5pt">"switch-off.png"),21); font-family:新宋体; font-size:9.5pt">"switch-thumb.png"),133); font-family:新宋体; font-size:9.5pt">CCLabelTTF::"ON",21); font-family:新宋体; font-size:9.5pt">"Courier New",21); font-family:新宋体; font-size:9.5pt">"OFF",20) ); //设置开关的位置 sw->winSize.height / 2)); sw->addTargetWithActionForControlEvents(this,0); font-family:新宋体; font-size:9.5pt">switchCallBack),138); font-family:新宋体; font-size:9.5pt">CCControlEventValueChanged);
//设置开关默认是关闭的 sw->setOn(false); //将开关添加到Layer中去 addChild(sw);
return true; }
//开关的回调函数 void CCControlSwitch * sw = (CCControlSwitch *)sender; if (sw->isOn()) { CCLog("click On"); //通过playBackgroundMusic打开音乐 playBackgroundMusic("audio/start.wav"); } else { //通过stopBackgroundMusic()关闭音乐 stopBackgroundMusic("audio/start.wav"); "click off"); } } |
| @H_404_9@运行结果：
|
- CCScale9Sprite@H_404_9@九妹图
CCScale9Sprite@H_404_9@对象，是一种CCSprite@H_404_9@对象的变形，它的用法和CCSprite@H_404_9@类似，不同点是：CCScale9Sprite@H_404_9@对象有个特性就是缩放贴图时可以尽量不失帧。比如QQ@H_404_9@聊天内边框
@H_404_9@原理：
CCScale9Sprite@H_404_9@的实现非常巧妙，是通过1@H_404_9@个CCSpriteBatchNode@H_404_9@和9@H_404_9@个CCSprite@H_404_9@来实现的，原理很简单，通过将原纹理资源切割成9@H_404_9@部分（PS:@H_404_9@这也是叫九宫图的原因）。根据想要的尺寸，完成以下三个步骤：
CCSpriteBatchNode@H_404_9@的资源为整个的纹理，9 @H_404_9@个CCSprite @H_404_9@对应于纹理的9
@H_404_9@个部分（根据纹理不同，9 @H_404_9@部分所占比例会有所不同），根据想要的尺寸，
#include “cocos-ext.h” //@H_404_9@包含cocos-ext.h@H_404_9@头文件
using namespace cocos2d::extension; //@H_404_9@引用cocos2d::extension @H_404_9@命名空间
@H_404_9@使用说明：
CCScale9Sprite::create(const char* file,CCRect rect,CCRect,capInsets);
@H_404_9@第一个参数为文件，第二个参数使用文件的大小，第三个参数如下，若未设置，或设置图分别如下：
@H_404_9@我们知道CCSprite@H_404_9@的拉伸方式是通过setScale();@H_404_9@来实现的，而对于CCScale9Sprite@H_404_9@则不同。它是通过setContentSize(constCCSize & size);@H_404_9@来实现图片的拉伸。
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@| CCScale9Sprite * spr = CCScale9Sprite::create("scale9.png",CCRectMake(0,116,102),CCRectMake(40,30,40)); spr->setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(spr); //spr->setScale(4.0f); spr->setPreferredSize(CCSizeMake(400,200)); |
@H_404_9@关于CCScale9Sprite::create()
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@
| T12UI.h |
| init(); };
#endif |
| CCScale9Sprite * s9spr = CCScale9Sprite::create( "scale9.png",138); font-family:新宋体; font-size:9.5pt">CCRectMake(0,138); font-family:新宋体; font-size:9.5pt">CCRectMake(30,40,56,20)); s9spr->winSize.height / 2)); addChild(s9spr); s9spr->setPreferredSize(CCSize(500,100)); return true; } |
| 运行结果：
|
- CControlButton
| CCScale9Sprite * bgbutton = CCScale9Sprite::create("button.png"); CCScale9Sprite * bgbuttonlighted = CCScale9Sprite::create("buttonHighlighted.png"); CCLabelTTF * titlebutton = CCLabelTTF::create("Touch Me","Courier New",30); //@H_404_9@按钮的文本 CCControlButton * button = CCControlButton::create(titlebutton,bgbutton); //@H_404_9@创建按钮 button->setColor(ccc3(159,168,176)); //@H_404_9@调色 button->setBackgroundSpriteForState(bgbuttonlighted, CCControlStateHighlighted); //@H_404_9@按下后背景高亮 button->setTitleColorForState(ccWHITE, CCControlStateHighlighted); //@H_404_9@按下后文本高亮 button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDown)); button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDown),CCControlEventTouchDown); button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDragInside),CCControlEventTouchDragInside); |
@H_404_9@响应的事件类型如下：
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@| /** Kinds of possible events for the control objects. */ enum {
}; typedef unsigned int CCControlEvent; |
@H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@ @H_404_9@
| T12UI.h |
| init();
void touchDownCallBack(CCControlEvent event); void touchDragInsideCallBack(scene; }
bool init(); CCScale9Sprite *bgButton = "button.png"); CCScale9Sprite *bgButtonLighted = "buttonHighlighted.png"); CCLabelTTF * text = "Touch Me",21); font-family:新宋体; font-size:9.5pt">"Couier New",50);
CCControlButton * button = CCControlButton::create(text,bgButton); //为按钮添加位置 button->winSize.height / 2)); button->setBackgroundSpriteForState(bgButtonLighted,138); font-family:新宋体; font-size:9.5pt">CCControlStateHighlighted); button->setTitleColorForState(ccRED,138); font-family:新宋体; font-size:9.5pt">CCControlStateHighlighted); addChild(button);
button->touchDownCallBack),138); font-family:新宋体; font-size:9.5pt">CCControlEventTouchDown); button->touchDragInsideCallBack),138); font-family:新宋体; font-size:9.5pt">CCControlEventTouchDragInside);
return true; }
void CCControlEvent event) { "touchDownCallBack"); }
void "touchDragInsideCallBack"); } |
| @H_404_9@运行结果：
|
