COCOS学习笔记--复选框CheckBox及其控件属性

Posted 2020-06-30 RapdoZoro

一.Button介绍

游戏开发中有时我们会用到CheckBox，CheckBox就是复选框，大家应该都见过复选框，它有两个状态，一个勾选态，一个非勾选态，我们可以通过CheckBox在这两个状态间的切换来实现一些特定的判断功能，比如是否游戏关闭音效等。

CheckBox也和cocos提供的其他控件一样，我们可以在Cocos Studio中创建并设置相关属性，在代码工程中使用；也可以之间在代码工程中创建使用。CheckBox类提供了对复选框的相关方法，其继承自Widget类：

 

接下来就通过实例来看下复选框CheckBox具体是如何创建和使用的：

二.通过CocosStudio创建CheckBox控件

首先用Cocos引擎创建一个空的项目并用Cocos Studio打开。我们想要创建一个CheckBox控件，直接从左面的空间栏选择一个复选框控件拖入到当前编辑的界面中即可。不过之前的博客中也提到过，使用这些控件时一般都是先创建一个Panel基础容器，然后再将控件添加到基础容器中，这样我们在代码中可先得到基础容器，然后通过Panel基础容器获得控件并对其进行操作，这样做是为了方便通过控制Panel来进行游戏适配。

 

我们可以在CheckBox控件的属性栏中设置其相关属性。比如背景样式的图片绑定，也就是复选框的样子；还有标识样式的图片绑定，这是指复选框上的那个“勾”的图片，另外也可设置复选框的默认勾选状态。

 

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

 

之后用VS打开我们刚刚创建的项目并运行，就可以看到我们在Cocos Studio中场景上创建的CheckBox了：

 

可以看到CheckBox有两个状态，默认显示的是勾选状态，再点击一下切换到非勾选状态：

 

三.通过代码直接创建CheckBox

除了使用Cocos Studio创建出来的CheckBox控件外，我们也可以通过create()方法直接在代码中创建CheckBox使用，并且可以设置其相关属性：

//通过create()方法创建checkBox 
//参数：1.复选框图片 2.对勾图片
auto _newCheckBox = CheckBox::create("CheckBox_Background.jpg","CheckBox_Cross.jpg");

//设置CheckBox的位置    
_newCheckBox->setPosition(Vec2(200, 200));

//设置CheckBox是否可点击  
_newCheckBox->setTouchEnabled(false);

//获取checkbox的选中状态
//selected 值为true 时 checkbox 为选中状态, 为false 则不会
auto bool selected  = _newCheckBox->getSelectedState()

addChild(_newCheckBox);

四.为CheckBox添加回调函数

CheckBox具有交互性，我们可以为其绑定回调函数：

1.首先要添加命名空间：

using namespace cocos2d::ui;

2.然后要声明并实现回调函数：

//声明CheckBox回调函数
void checkBoxCallback(cocos2d::Ref * ref, cocos2d::ui::CheckBox::EventType type);

//实现CheckBox回调函数
void HelloWorld::checkBoxCallback(cocos2d::Ref * ref, CheckBox::EventType type)
{
	switch (type)
	{
		case cocos2d::ui::CheckBox::EventType::SELECTED:
			log("SELECTED!");
			break;
		case cocos2d::ui::CheckBox::EventType::UNSELECTED:
			log("UNSELECTED!");
			break;
		default:
			break;
	}
}

可以看到，其回调函数有一个EventType类型的参数，当点击复选框时这个回调方法会被执行，同时传来这个参数，这个参数有2种类型SELECTED和UNSELECTED，分别表示复选框的选中和未选中，注意这两种类型为点击复选框后其所切换至的状态。

3.最后通过Panel获得CheckBox并对其绑定回调函数即可：

//获得基础容器panel层
auto _panel = (Layout *)rootNode->getChildByName("Panel_1");

//通过panel获得checkbox
auto _checkBox = (CheckBox*)Helper::seekWidgetByName(_panel,"CheckBox_1");

//绑定回调函数
_checkBox->addEventListener(CC_CALLBACK_2(HelloWorld::checkBoxCallback,this));

当复选框为勾选态，点击后切换成非勾选态，EventType==UNSELECTED，

打印输出如下：

 

当复选框为非勾选态，点击后切换成勾选态，EventType==SELECTED，

打印输出如下：

 

 

 

以上。