COCOS学习笔记--滑动条Slider及其控件属性

时间:2023-01-30 17:39:30

一.Slider介绍

Slider就是滑动条。游戏中我们经常会用到这一控件,我们可以通过滑动条这一控件来人为控制某些数值的范围变化,比如控制游戏的音量大小、界面的颜色亮度等。

Slider也和cocos提供的其他控件一样,我们可以在Cocos Studio中创建并设置相关属性,在代码工程中使用;也可以之间在代码工程中创建使用。Slider类提供了对滑动条的相关方法,其继承自Widget类:

 COCOS学习笔记--滑动条Slider及其控件属性

接下来就通过实例来看下Slider滑动条具体是如何创建和使用的:


二.通过CocosStudio创建Slider控件

第一步:用Cocos引擎创建一个空的项目并用Cocos Studio打开;

第二步:创建一个Panel基础容器,这个基础容器用于放置我们的Slider控件;

第三步:我们想要创建一个CheckBox控件,让其父节点为刚刚创建的Panel基础容器;

COCOS学习笔记--滑动条Slider及其控件属性

COCOS学习笔记--滑动条Slider及其控件属性

以上的控件创建直接从左面的控件栏选择一个控件拖入到当前编辑的界面中即可。

我们可以在Slider控件的属性栏中设置其相关属性。比如背景样式和节点样式,以及默认滑动进度等:

 COCOS学习笔记--滑动条Slider及其控件属性

第四步:在Cocos Studio中创建完Slider控件后,我们需要保存并发布项目,具体步骤在我之前的博客中有介绍。

之后用VS打开我们刚刚创建的项目并运行,就可以看到我们在Cocos Studio中场景上创建的Slider控件了:

 COCOS学习笔记--滑动条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));

运行程序,当我们拖动滑动条时便会看到滑动条进度改变的打印输出:

COCOS学习笔记--滑动条Slider及其控件属性



以上。