1cocos2dx扩展库UI控件，CCControlSlider，CCScale9Sprite（九妹图）,CCControlSwitch,CCControlButton



  1. UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需包含：

#include “cocos-ext.h”

USING_NS_CC_EXT;

  1. 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.

};

typedef
unsigned
int
CCControlEvent;
  1. 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;

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()

{

CCScene *
scene =
CCScene::create();

T12UI *
layer =
T12UI::create();

scene->addChild(layer);

return
scene;

}

//UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需要包含

bool
T12UI::init()

{

TBack::init();

//第一个参数表示slider滑动的轨道，即背景色。第二个参数表示滑动的进度。

//第三个参数表示拖动的按钮

CCControlSlider *slider
= CCControlSlider::create("sliderTrack.png","sliderProgress.png","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(T12UI::sliderCallBack),

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,‘.‘);

atlas->setAnchorPoint(ccp(0.5,0.5));

//设置字体的放大效果

atlas->setScale(2.0f);

atlas->setPosition(ccp(winSize.width
/ 2, winSize.height
/ 2 + 30));

addChild(atlas);

slider->setValue(1.3f);

addChild(slider);

return
true;

}

//设置slider的回调函数

//这里的sender表示发送的一者

void
T12UI::sliderCallBack(CCObject*
sender,
CCControlEvent
event)

{

CCControlSlider *
slider = (CCControlSlider
*)sender;

CCString *str
= CCString::createWithFormat("%.2g",
slider->getValue());

//因为成为了全局的了，所以能够访问的到

atlas->setString(str->getCString());

}

运行结果：

最大值

最小范围：

最大范围：

运行结果在0.3和1.2之间
  1. 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","Courier New",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”);

}

}

5 
CCControlSwitch案例说明


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();

//开关的回调函数

void
switchCallBack(CCObject*
sender,
CCControlEvent
event);

};

#endif

T12UI.cpp

#include
"T12UI.h"

#include
"AppMacros.h"

#include
"SimpleAudioEngine.h"

using
namespace
CocosDenshion;

CCScene *T12UI::scene()

{

CCScene *
scene =
CCScene::create();

T12UI *
layer =
T12UI::create();

scene->addChild(layer);

return
scene;

}

//UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需要包含

bool
T12UI::init()

{

TBack::init();

//通过SimpleAudioEngine的方式实现加载音乐

SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("audio/start.wav");

//创建开关、

//第一个参数为：掩底背景CCSprite

//第二个参数为开的CCSprite

//第三个参数为关的CCSprite

//第四个参数为手指滑到CCSprite

//第五个参数on的label

//第六个参数为off的label

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",
"Courier New", 20)

);

//设置开关的位置

sw->setPosition(ccp(winSize.width
/ 2,winSize.height
/ 2));

sw->addTargetWithActionForControlEvents(this,

cccontrol_selector(T12UI::switchCallBack),

CCControlEventValueChanged);

//设置开关默认是关闭的

sw->setOn(false);

//将开关添加到Layer中去

addChild(sw);

return
true;

}

//开关的回调函数

void
T12UI::switchCallBack(CCObject*
sender,
CCControlEvent
event)

{

CCControlSwitch *
sw = (CCControlSwitch
*)sender;

if (sw->isOn())

{

CCLog("click
On");

//通过playBackgroundMusic打开音乐

SimpleAudioEngine::sharedEngine()->playBackgroundMusic("audio/start.wav");

}

else

{

//通过stopBackgroundMusic()关闭音乐

SimpleAudioEngine::sharedEngine()->stopBackgroundMusic("audio/start.wav");

CCLog("click
off");

}

}

运行结果：
  1. CCScale9Sprite九妹图

CCScale9Sprite对象，是一种CCSprite对象的变形，它的用法和CCSprite类似，不同点是：CCScale9Sprite对象有个特性就是缩放贴图时可以尽量不失帧。比如QQ聊天内边框

原理：

CCScale9Sprite的实现非常巧妙，是通过1个CCSpriteBatchNode和9个CCSprite来实现的，原理很简单，通过将原纹理资源切割成9部分（PS:这也是叫九宫图的原因）。根据想要的尺寸，完成以下三个步骤：

  1. 保持4个角部分不变形
  2. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）
  3. 双向拉伸中间部分（即九宫图的中间部分，横向，纵向同时拉伸，PS:拉伸比例不一定相同）

CCSpriteBatchNode的资源为整个的纹理，9
个CCSprite
对应于纹理的9

个部分（根据纹理不同，9
部分所占比例会有所不同），根据想要的尺寸，

将9
部分拼装在一起!

  1. 需要包含的头文件

#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, 0, 116, 102), CCRectMake(40, 30, 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

#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();

};

#endif

T12UI.cpp

#include
"T12UI.h"

#include
"AppMacros.h"

#include
"SimpleAudioEngine.h"

using
namespace
CocosDenshion;

CCScene *T12UI::scene()

{

CCScene *
scene =
CCScene::create();

T12UI *
layer =
T12UI::create();

scene->addChild(layer);

return
scene;

}

//UI控件来自cocos2dx的扩展库，完善了UI方面的元素，使cocos2dx更加丰富多彩。使用扩展库需要包含

bool
T12UI::init()

{

TBack::init();

CCScale9Sprite *
s9spr =
CCScale9Sprite::create(

"scale9.png",

CCRectMake(0, 0, 116, 102),

CCRectMake(30, 40, 56, 20));

s9spr->setPosition(ccp(winSize.width
/ 2, winSize.height
/ 2));

addChild(s9spr);

s9spr->setPreferredSize(CCSize(500,100));

return
true;

}

运行结果：
  1. 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

{

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;

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();

void
touchDownCallBack(CCObject*
sender,
CCControlEvent
event);

void
touchDragInsideCallBack(CCObject*
sender,
CCControlEvent
event);

};

#endif

T12UI.cpp

#include
"T12UI.h"

#include
"AppMacros.h"

#include
"SimpleAudioEngine.h"

using
namespace
CocosDenshion;

CCScene *T12UI::scene()

{

CCScene *
scene =
CCScene::create();

T12UI *
layer =
T12UI::create();

scene->addChild(layer);

return
scene;

}

bool
T12UI::init()

{

TBack::init();

CCScale9Sprite *bgButton
= CCScale9Sprite::create("button.png");

CCScale9Sprite *bgButtonLighted
= CCScale9Sprite::create("buttonHighlighted.png");

CCLabelTTF *
text =
CCLabelTTF::create("Touch
Me",
"Couier New", 50);

CCControlButton *
button =
CCControlButton::create(text,
bgButton);

//为按钮添加位置

button->setPosition(ccp(winSize.width
/ 2, winSize.height
/ 2));

button->setBackgroundSpriteForState(bgButtonLighted,
CCControlStateHighlighted);

button->setTitleColorForState(ccRED,
CCControlStateHighlighted);

addChild(button);

//为按钮添加监听事件,添加的是按钮被点击的事件

button->addTargetWithActionForControlEvents(this,

cccontrol_selector(T12UI::touchDownCallBack),

CCControlEventTouchDown);

//为按钮添加监听事件，添加的是按钮Drag的事件

button->addTargetWithActionForControlEvents(this,

cccontrol_selector(T12UI::touchDragInsideCallBack),

CCControlEventTouchDragInside);

return
true;

}

void
T12UI::touchDownCallBack(CCObject*
sender,
CCControlEvent
event)

{

CCLog("touchDownCallBack");

}

void
T12UI::touchDragInsideCallBack(CCObject*
sender,
CCControlEvent
event)

{

CCLog("touchDragInsideCallBack");

}

运行结果：
时间： 2024-10-13 22:19:13

1cocos2dx扩展库UI控件，CCControlSlider，CCScale9Sprite（九妹图）,CCControlSwitch,CCControlButton的相关文章

andorid 控件 Bootstrap3.0风格的控件 精美UI控件库

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成.Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目.在逛github的时候,发现有位牛人做成 android版的 bo

AndroidUI开源组件库BottomView 第三方自定义UI控件

这里分享一个Android的非常经典实用而且简单方便的第三方UI控件库:BottomView(小米的米UI也用到了这个) 实现功能: 可以在底部弹出的View里自定义布局: 可以自定义是否可以触摸外部消失: 可以自定义事件: 可以自定义外围背景是否透明: 可以自定义动画: 如果需要的话,可以强制为顶部View显示 BottomView.jar库文件下载地址:http://download.csdn.net/detail/jay100500/7547055 BottomView的Demo下载地址:

Android UI开源组件库BottomView ，第三方自定义UI控件

这里分享一个Android的非常经典实用而且简单方便的第三方UI控件库:BottomView(小米的米UI也用到了这个) 实现功能: 可以在底部弹出的View里自定义布局: 可以自定义是否可以触摸外部消失: 可以自定义事件: 可以自定义外围背景是否透明: 可以自定义动画: 如果需要的话,可以强制为顶部View显示 BottomView.jar库文件下载地址:http://download.csdn.net/detail/jay100500/7547055 BottomView的Demo下载地址:

《深入理解Windows Phone 8.1 UI控件编程》

<深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的动画.掌握布局原理.列表虚拟化原理.高性能列表实现.图表编程.控件原理等. 目录如下: <深入理解Windows Phone 8 .1 UI控件编程>目录 第1章 深入解析程序界面 1.1 XAML的原理 1.1.1 XAML的概念 1.1.2 XAML页面的编译 1.1.3 动态加载XAML 1

C#学习之在辅助线程中修改UI控件----invoke方法

Invoke and BeginInvoke 转载地址:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html 在Invoke或者BeginInvoke的使用中无一例外地使用了委托Delegate,至于委托的本质请参考我的另一随笔:对.net事件的看法. 一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程序员众所周知的,我在此费点笔墨再次记录到自己

IOS开发UI篇--常用UI控件的基本使用

一. UIButton概述: UIKit框架提供了非常多的UI控件,其中有些控件天天使用,比如UIButton.UILabel.UIImageView.UITableView等. UIButton,俗称“按钮”,通常点击某个控件后,会做出相应反应的都是按钮.按钮的功能较多,既能显示图片又能显示汉字还能随时调整图片的文字和位置,如下面两个图 团购和音乐播放器的app: 下面本文通过一个实例总结一下它们的基本使用. 二. 按钮的基本设置 按钮既可以通过mainstoryboard创建也可以通过代码创

理解SynchronizationContext，如何在Winform里面跨线程访问UI控件

SynchronizationContext 类是一个基类,可提供不带同步的自由线程上下文. 此类实现的同步模型的目的是使公共语言运行库内部的异步/同步操作能够针对不同的异步模型采取正确的行为.此模型还简化了托管应用程序为在不同的同步环境下正常工作而必须遵循的一些要求.同步模型的提供程序可以扩展此类并为这些方法提供自己的实现.(来自MSDN)简而言之就是允许一个线程和另外一个线程进行通讯,SynchronizationContext在通讯中充当传输者的角色.另外这里有个地方需要清楚的,不是每个线

创建自注册的Swift UI 控件

原文链接 : Swift Programming 101: Creating Self-Registering Swift UI Controls 原文作者 : Kevin McNeish 译文出自 : 开发技术前线 www.devtf.cn 译者 : kmyhy 校对者:LastDay 状态:完成 对于自定义控件来说,在不破坏原有的消息机制的前提下,如何响应事件通知?在本文中,我将演示一个通知代理类,通过一个简单的例子,我们用该类向已有的iOS UI控件中增加了自己的新功能:为Text Vie

《深入理解Windows Phone 8.1 UI控件编程》基于最新的Runtime框架

<深入理解Windows Phone 8.1 UI控件编程>本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深入地论述了最酷的UI编程技术:实现复杂炫酷的动画.掌握布局原理.列表虚拟化原理.高性能列表实现.图表编程.控件原理等.  全书源代码免费下载: http://vdisk.weibo.com/s/zt_pyrfNHoezI 试读章节会在博客园持续更新: [WP8.1UI控件编程]Windows Phone XAML页面的编译 [WP8.1UI控件编程]W