cocos2dx2.2.2登录场景中Checkbox选择框的实现

在前两篇文章中，我们介绍了在注册场景中需要用到的输入框及弹出框的实现方式，这两篇文章中介绍的内容在登录场景同样会用到。而我们经常会在登录场景中见到的另一种元素就是自动登录或者记住密码的Checkbox选择框。那么，接下来就让我们看看这个选择框如何实现。

首先，我们先看一下效果

我们需要的就是一个Checkbox选择框，后面加上“自动登录”或者其他的文字。效果就是点击选择框或文字时，Checkbox的状态会进行切换；同时在程序中还要知道当前选择框的状态，只要我们能够实现这几点，这个功能就完成了。

界面问题比较简单，我们只需要根据自己的图片素材和要展示的文字来摆放各元素的位置就可以了，我们可以把Checkbox和文字放到一个父元素中，然后再整体调整其位置。

至于切换效果，我们可以将两种效果图叠放到一起，然后通过设置元素是否可见来实现。而当前状态也可以根据元素是否可见来确定。现在，上面的几个问题都解决了。下面然我们来看一看实现代码。

CCCheckbox.h文件

#ifndef __MyGame__CCCheckbox__
#define __MyGame__CCCheckbox__

#include "cocos2d.h"
using namespace cocos2d;

class CCCheckbox:public CCSprite{
public:
    //创建checkbox
    static CCSprite * create(const char * picNoSelect,const char * picSelect,const char * content  ,int status = 0);
    
    //点击操作
    int click();
    
private:
    //获取当前状态
    int getStatus();
};

#endif /* defined(__MyGame__CCCheckbox__) */

CCCheckbox.cpp文件

#include "CCCheckbox.h"
#include "cocos2d.h"

using namespace cocos2d;

//创建,参数：未选中图片名，选中图片名，文字，状态（0-未选中，1-选中）
CCSprite * CCCheckbox::create(const char * picNoSelect, const char * picSelect, const char * content, int status)
{
    CCSprite * sp = CCSprite::create();
    
    //checkbox
    CCSprite * sp_checkbox_select = CCSprite::create(picSelect);
    CCSprite * sp_checkbox_noSelect = CCSprite::create(picNoSelect);
    CCSize size_checkbox = sp_checkbox_noSelect->getContentSize();
    
    //文字
    CCLabelTTF * label_content = CCLabelTTF::create(content, "Arial", 20);
    label_content->setColor(ccBLACK);
    label_content->setHorizontalAlignment(kCCTextAlignmentLeft); //左对齐
    CCSize size_content = label_content->getContentSize();
    
    //缩放比例
    float scale_h = size_checkbox.height / size_content.height;
    
    //缩放文字
    label_content->cocos2d::CCNode::setScale(scale_h, scale_h);
    
    //最终大小
    CCSize size = CCSize(size_checkbox.width * 2 + size_content.width * scale_h , size_checkbox.height * 1.5);
    sp->setContentSize(size);
    
    //设置checkbox状态
    sp->addChild(sp_checkbox_noSelect);
    sp->addChild(sp_checkbox_select);
    sp_checkbox_noSelect->setPosition(CCPointMake(size_checkbox.width,size.height/2));
    sp_checkbox_select->setPosition(CCPointMake(size_checkbox.width,size.height/2));
    sp_checkbox_noSelect->setTag(0); //不选中tag＝0
    sp_checkbox_select->setTag(1); //选中tag＝1
    
    if (status == 0)
    {
        //设置未选中状态
        sp_checkbox_noSelect->setVisible(true);
        sp_checkbox_select->setVisible(false);
    }
    else
    {
        //设置选中状态
        sp_checkbox_noSelect->setVisible(false);
        sp_checkbox_select->setVisible(true);
    }
    
    //设置文字位置
    sp->addChild(label_content);
    label_content->setAnchorPoint(CCPoint(0,0.5));
    label_content->setPosition(CCPointMake(size_checkbox.width * 2, size.height/2));
    
    return sp;
}

//点击操作
int CCCheckbox::click()
{
    int status = getStatus();
    CCSprite * sp_checkbox_noSelect = (CCSprite *)(this->getChildByTag(0));
    CCSprite * sp_checkbox_select = (CCSprite *)(this->getChildByTag(1));
    
    if (status == 0)
    {
        status = 1;//状态设置为选中
        sp_checkbox_noSelect->setVisible(false);
        sp_checkbox_select->setVisible(true);
    }
    else
    {
        status = 0;//状态设置为未选中
        sp_checkbox_noSelect->setVisible(true);
        sp_checkbox_select->setVisible(false);
    }
    
    return status;
}

//获取当前状态,0-未选中，1-选中
int CCCheckbox::getStatus()
{
    CCSprite * sp_checkbox_noSelect = (CCSprite *)(this->getChildByTag(0));
    int status = 0; //未选中
    if (!sp_checkbox_noSelect->isVisible())
    {
        status = 1;//选中
    }
    
    return status;
}

下面是登录场景中使用Checkbox的代码

//自动登录
CCSprite * spriteAuto = CCCheckbox::create("checkbox_normal.png", "checkbox_select.png", "自动登录", 0);
CCMenuItemSprite * itemAuto = CCMenuItemSprite::create(spriteAuto, spriteAuto,this,menu_selector(LoginHandleLayer::clickCheckbox));

我们将Checkbox放到Menu中来触发其点击事件，相应的回调函数为

//点击checkbox
void LoginHandleLayer::clickCheckbox(CCObject * pSender)
{
    CCLog("clickCheckbox");
    
    CCMenuItemSprite * item = (CCMenuItemSprite *)pSender;
    CCCheckbox * checkbox = (CCCheckbox *)(item->getNormalImage());
    int status = checkbox->click();
    
    CCLog("status:%d",status);
}

现在我们点击切换Checkbox时，可以看到输出的日志，正确得到了Checkbox的当前选择状态。

现在，我们就成功实现了选择框的状态切换功能。