UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需包含：
#include “cocos-ext.h”
USING_NS_CC_EXT;
CCControlSlider
CCControlSlider * slider = CCControlSlider::create(“sliderTrack.png”,”sliderProgress.png”,”sliderThumb.png”);
第一个参数表示，slider滑动的轨道，即背景色。第二个参数表示滑动的进度。第三个参数表示拖动的按钮。
slider->setMaximumValue(2.0f);//设置滑动最大值
slider->setMinimumValue(0.0f);//设置滑动最小值
slider->setValue(0.5f);//设置默认值
slider->setMaximumAllowedValue(1.2f);//设置某一个范围内的最大值
slider->setMinimumAllowedValue(0.3f);//设置某一个范围内的最小值
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);
关于CCControlEvent
/** 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.
};
typedefunsignedintCCControlEvent;
slider案例说明：
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;
classT12UI:publicTBack
{
public:
staticCCScene*scene();
CREATE_FUNC(T12UI);
boolinit();
CCLabelAtlas*atlas;
//slider的回调函数
voidsliderCallBack(CCObject*sender,CCControlEventevent);
};
#endif
T12UI.cpp
#include"T12UI.h"
#include"AppMacros.h"
#include"SimpleAudioEngine.h"
usingnamespaceCocosDenshion;
CCScene*T12UI::scene()
{
scene=CCScene::create();
T12UI*layer=create();
scene->addChild(layer);
returnscene;
}
//UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需要包含
boolinit()
{
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);
returntrue;
}
//设置slider的回调函数
//这里的sender表示发送的一者
voidCCControlEventevent)
{
CCControlSlider*slider= (CCControlSlider*)sender;
getValue());
//因为成为了全局的了，所以能够访问的到
atlas->setString(str->getCString());
}
运行结果：
最大值
最小范围：
最大范围：
运行结果在0.3和1.2之间
CCControlSwitch
第一个参数，掩底背景图片，第二个参数为开的图片，第三个参数为关的图片，第四个参数为手指划到按钮，第五，六个参数分别为开和关显示的文字。
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)
如何在响应函数中获取选项
void T12UI::switchCallback(CCObject * sender,CCControlEvent event)
{
CCControlSwitch * sw = (CCControlSwitch *)sender;
If(sw->isOn())
{
CCLog(“On”);
} else {
CCLog(“off”);
}
}
5CCControlSwitch案例说明
T12UI.h
init();
//开关的回调函数
voidswitchCallBack(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);
returntrue;
}
//开关的回调函数
voidCCControlSwitch*sw= (CCControlSwitch*)sender;
if(sw->isOn())
{
CCLog("click On");
//通过playBackgroundMusic打开音乐
playBackgroundMusic("audio/start.wav");
}
else
{
//通过stopBackgroundMusic()关闭音乐
stopBackgroundMusic("audio/start.wav");
"click off");
}
}
运行结果：
CCScale9Sprite九妹图
CCScale9Sprite对象，是一种CCSprite对象的变形，它的用法和CCSprite类似，不同点是：CCScale9Sprite对象有个特性就是缩放贴图时可以尽量不失帧。比如QQ聊天内边框
原理：
CCScale9Sprite的实现非常巧妙，是通过1个CCSpriteBatchNode和9个CCSprite来实现的，原理很简单，通过将原纹理资源切割成9部分(PS:这也是叫九宫图的原因)。根据想要的尺寸，完成以下三个步骤：
保持4个角部分不变形
单向拉伸4条边(即在4个角两两之间的边，比如上边，只做横向拉伸)
双向拉伸中间部分(即九宫图的中间部分，横向，纵向同时拉伸，PS:拉伸比例不一定相同)
CCSpriteBatchNode的资源为整个的纹理，9个CCSprite对应于纹理的9
个部分(根据纹理不同，9部分所占比例会有所不同)，根据想要的尺寸，
将9部分拼装在一起!
需要包含的头文件
#include “cocos-ext.h”//包含cocos-ext.h
using namespace cocos2d::extension;//引用cocos2d::extension命名空间
使用说明：
CCScale9Sprite::create(const char* file,CCRect rect,CCRect,capInsets);
第一个参数为文件，第二个参数使用文件的大小，第三个参数如下，若未设置，或设置图分别如下：
我们知道CCSprite的拉伸方式是通过setScale();来实现的，而对于CCScale9Sprite则不同。它是通过setContentSize(constCCSize & size);来实现图片的拉伸。
测试代码：
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));
关于CCScale9Sprite::create()
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));
returntrue;
}
运行结果：
CControlButton
CCScale9Sprite * bgbutton = CCScale9Sprite::create("button.png");
//背景色图片
CCScale9Sprite * bgbuttonlighted =
CCScale9Sprite::create("buttonHighlighted.png");
//背景色高亮图片
CCLabelTTF * titlebutton = CCLabelTTF::create("Touch Me","Courier
New",30);
//按钮的文本
CCControlButton * button =
CCControlButton::create(titlebutton,bgbutton);
//创建按钮
button->setColor(ccc3(159,168,176));
//调色
button->setBackgroundSpriteForState(bgbuttonlighted,
CCControlStateHighlighted);
//按下后背景高亮
button->setTitleColorForState(ccWHITE,
CCControlStateHighlighted);
//按下后文本高亮
button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDown));
button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDown),CCControlEventTouchDown);
button->addTargetWithActionForControlEvents(this,cccontrol_selector(T12UI::buttonTouchDragInside),CCControlEventTouchDragInside);
响应的事件类型如下：
/** Kinds of possible events for the control objects. */
enum
{
};
typedefunsignedintCCControlEvent;
T12UI.h
init();
voidtouchDownCallBack(CCControlEventevent);
voidtouchDragInsideCallBack(scene;
}
boolinit();
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);
//为按钮添加监听事件，添加的是按钮Drag的事件
button->touchDragInsideCallBack),138); font-family:新宋体; font-size:9.5pt">CCControlEventTouchDragInside);
returntrue;
}
voidCCControlEventevent)
{
"touchDownCallBack");
}
void"touchDragInsideCallBack");
}
运行结果：
相关文章
总结
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
