COCOS学习笔记--滑动条Slider及其控件属性
2016-04-04 14:31
639 查看
一.Slider介绍
Slider就是滑动条。游戏中我们经常会用到这一控件,我们可以通过滑动条这一控件来人为控制某些数值的范围变化,比如控制游戏的音量大小、界面的颜色亮度等。
Slider也和cocos提供的其他控件一样,我们可以在Cocos Studio中创建并设置相关属性,在代码工程中使用;也可以之间在代码工程中创建使用。Slider类提供了对滑动条的相关方法,其继承自Widget类:
接下来就通过实例来看下Slider滑动条具体是如何创建和使用的:
二.通过CocosStudio创建Slider控件
第一步:用Cocos引擎创建一个空的项目并用Cocos Studio打开;
第二步:创建一个Panel基础容器,这个基础容器用于放置我们的Slider控件;
第三步:我们想要创建一个CheckBox控件,让其父节点为刚刚创建的Panel基础容器;
以上的控件创建直接从左面的控件栏选择一个控件拖入到当前编辑的界面中即可。
我们可以在Slider控件的属性栏中设置其相关属性。比如背景样式和节点样式,以及默认滑动进度等:
第四步:在Cocos Studio中创建完Slider控件后,我们需要保存并发布项目,具体步骤在我之前的博客中有介绍。
之后用VS打开我们刚刚创建的项目并运行,就可以看到我们在Cocos Studio中场景上创建的Slider控件了:
三.通过代码直接创建Slider控件
除了使用Cocos Studio创建出来的Slider控件外,我们也可以通过create()方法直接在代码中创建Slider使用,并且可以设置其相关属性:
使用该类前别忘了添加命名空间:
using namespace cocos2d::ui;
接下来就可以创建Slider并且设置其相关属性了:
四.为Slider添加回调函数
Slider具有交互性,我们可以为其绑定回调函数:
1.首先要声明并实现回调函数:
其回调函数有一个Slider::EventType类型的参数,其值为ON_PERCENTAGE_CHANGED,也就是说当滑动条进度改变时会传来该事件类型。
2.通过Panel获得Slider并对其绑定回调函数:
//获得基础容器panel层
auto _panel = (Layout *)rootNode->getChildByName("Panel_1");
//通过panel获得slider
_slider = (Slider*)Helper::seekWidgetByName(_panel, "Slider_1");
//绑定回调函数
_slider->addEventListener(CC_CALLBACK_2(HelloWorld::sliderCallback, this));
运行程序,当我们拖动滑动条时便会看到滑动条进度改变的打印输出:
以上。
Slider就是滑动条。游戏中我们经常会用到这一控件,我们可以通过滑动条这一控件来人为控制某些数值的范围变化,比如控制游戏的音量大小、界面的颜色亮度等。
Slider也和cocos提供的其他控件一样,我们可以在Cocos Studio中创建并设置相关属性,在代码工程中使用;也可以之间在代码工程中创建使用。Slider类提供了对滑动条的相关方法,其继承自Widget类:
接下来就通过实例来看下Slider滑动条具体是如何创建和使用的:
二.通过CocosStudio创建Slider控件
第一步:用Cocos引擎创建一个空的项目并用Cocos Studio打开;
第二步:创建一个Panel基础容器,这个基础容器用于放置我们的Slider控件;
第三步:我们想要创建一个CheckBox控件,让其父节点为刚刚创建的Panel基础容器;
以上的控件创建直接从左面的控件栏选择一个控件拖入到当前编辑的界面中即可。
我们可以在Slider控件的属性栏中设置其相关属性。比如背景样式和节点样式,以及默认滑动进度等:
第四步:在Cocos Studio中创建完Slider控件后,我们需要保存并发布项目,具体步骤在我之前的博客中有介绍。
之后用VS打开我们刚刚创建的项目并运行,就可以看到我们在Cocos Studio中场景上创建的Slider控件了:
三.通过代码直接创建Slider控件
除了使用Cocos Studio创建出来的Slider控件外,我们也可以通过create()方法直接在代码中创建Slider使用,并且可以设置其相关属性:
使用该类前别忘了添加命名空间:
using namespace cocos2d::ui;
接下来就可以创建Slider并且设置其相关属性了:
//通过create()方法创建slider auto _newSlider = Slider::create(); //设置slider背景图片 _newSlider->loadBarTexture("Slider_Background.png"); //设置slider进度图片 _newSlider->loadProgressBarTexture("Slider_Progress.png"); //设置slider滑动按钮图片 //参数:1. 正常状态下的纹理贴图2.被选中状态下的纹理贴图3.禁用状态下的纹理贴图 _newSlider->loadSlidBallTextures("Slider_Ball_Normal.png","Slider_Ball_Pressed.png","Slider_Ball_Disabled.png"); //设置slider的进度(范围:0~100) _newSlider->setPercent(80); //获得slider的进度 int percent = _newSlider->getPercent(80); //设置slider的位置 _newSlider->setPosition(Vec2(200, 200)); addChild(_newSlider);
四.为Slider添加回调函数
Slider具有交互性,我们可以为其绑定回调函数:
1.首先要声明并实现回调函数:
//声明Slider回调函数 void sliderCallback(cocos2d::Ref * ref, cocos2d::ui::Slider::EventType type);
//实现Slider回调函数 void HelloWorld::sliderCallback(cocos2d::Ref * ref, Slider::EventType type) { switch (type) { case cocos2d::ui::Slider::EventType::ON_PERCENTAGE_CHANGED: { int percent = _slider->getPercent(); log("slider percent = %d", percent); } break; default: break; } }
其回调函数有一个Slider::EventType类型的参数,其值为ON_PERCENTAGE_CHANGED,也就是说当滑动条进度改变时会传来该事件类型。
2.通过Panel获得Slider并对其绑定回调函数:
//获得基础容器panel层
auto _panel = (Layout *)rootNode->getChildByName("Panel_1");
//通过panel获得slider
_slider = (Slider*)Helper::seekWidgetByName(_panel, "Slider_1");
//绑定回调函数
_slider->addEventListener(CC_CALLBACK_2(HelloWorld::sliderCallback, this));
运行程序,当我们拖动滑动条时便会看到滑动条进度改变的打印输出:
以上。
相关文章推荐
- flex 控件的重要属性
- Delphi控件ListView的属性及使用方法详解
- web下载的ActiveX控件自动更新
- WinForm实现按名称递归查找控件的方法
- C#中父窗口和子窗口之间控件互操作实例
- Android编程之Button控件用法实例分析
- Android控件之CheckBox、RadioButton用法实例分析
- 在Android开发中使用自定义组合控件的例子
- Cocos2d-x中背景音乐和音效使用实例
- Cocos2d-x学习笔记之CCScene、CCLayer、CCSprite的默认坐标和默认锚点实验
- Cocos2d-x UI开发之CCControlPotentiometer控件类使用实例
- MFC中动态创建控件以及事件响应实现方法
- Cocos2d-x UI开发之文本类使用实例
- Cocos2d-x保存用户游戏数据之XML文件是否存在问题判断方法
- Cocos2d-x UI开发之菜单类使用实例
- WinForm自定义函数FindControl实现按名称查找控件
- Cocos2d-x UI开发之CCControlButton控件类实例
- Cocos2d-x学习笔记之世界坐标系、本地坐标系、opengl坐标系、屏幕坐标系
- Android控件之ProgressBar用法实例分析
- WinForm拖拽控件生成副本的解决方法