cocos2dx2.2.2弹出框的实现

      在上一篇文章中，我们利用CCEditBox实现了输入框功能，使我们在注册时可以输入用户名和密码。但是当用户名和密码的输入不符合规范时，我们应该怎样给与用户提示呢？下面我们就来介绍弹出框的实现方式。

      我们的思路就是，创建一个模态层，将当前场景的内容盖住，然后在弹出层上给与用户相应的提示并提供一个关闭弹出层的按钮。首先，我们先来看一下效果。

      这里的标题和具体提示信息需要是自定义的，才能满足不同场景的需要，而确定按钮只是用来关闭弹出层的，所以这个弹出框的主要元素并不多，实现起来也比较简单。

      另外，还有一种弹出框，是用来确认是否执行某种操作的，效果如下：

      这种弹出框需要两个按钮，取消按钮是终止操作，和前一个弹出框的确定按钮效果相同，都是直接关闭弹出层即可。而这里的确定按钮，是确定要执行操作，点击后，需要执行确认的操作，及执行调用弹出层的节点中的某个方法。这里的实现就比前一种弹出框复杂一些，需要有调用弹出层的对象和需要执行的函数。下面我们就来看一下具体的实现。

PopLayer.h文件

#ifndef __MyGame__PopLayer__
#define __MyGame__PopLayer__

#include <iostream>
#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;

class PopLayer:public CCLayer{
public:   
    //初始化
    virtual bool init();
    
    //创建
    CREATE_FUNC(PopLayer);
    
    //创建确定弹出框
    static PopLayer * create(const char * title,const char * content);
    
    //创建确定取消弹出框
    static PopLayer * create(const char * title,const char * content,CCObject * callbackListener,SEL_CallFuncN callfun);
    
    //设置弹出框的title
    void setTitle(const char * title);
    
    //设置弹出框的文本内容
    void setContent(const char * content);
    
    //设置确定按钮
    void setConfirmButton();
    
    //设置确定取消按钮,参数：调用层对象，调用层回调函数
    void setConfirmCancelButton(CCObject * callbackListener,SEL_CallFuncN callfun);

private:
    //重写触摸注册函数，重新给定触摸级别
    void registerWithTouchDispatcher();
    
    //触摸函数ccTouchBegan，返回true
    bool ccTouchBegan(CCTouch * touch,CCEvent * pevent);
    
    //关闭弹出框
    void closePopLayer(CCObject * pSender);
    
    //执行上层对象的回调函数，关闭弹出框
    void buttonCallBackFunc(CCObject * pSender);
        
    //上层对象
    CCObject * m_callbackListener;
    
    //回调函数
    SEL_CallFuncN m_callfun;
    
    //对话框背景大小
    CCSize m_size;
    
    //对话框背景精灵
    CCSprite * m_bgSprite;
};

#endif /* defined(__MyGame__PopLayer__) */

PopLayer.cpp文件

#include "PopLayer.h"
USING_NS_CC;

//创建确定弹出框
PopLayer * PopLayer::create(const char * title,const char * content)
{
    PopLayer * popLayer = PopLayer::create();
    
    //设置题目和文本内容
    popLayer->setTitle(title);
    popLayer->setContent(content);
    
    //设置按钮
    popLayer->setConfirmButton();
    
    return popLayer;
}

//创建确定取消弹出框
PopLayer * PopLayer::create(const char * title,const char * content,CCObject * callbackListener,SEL_CallFuncN callfun)
{
    PopLayer * popLayer = PopLayer::create();
    
    //设置题目和文本内容
    popLayer->setTitle(title);
    popLayer->setContent(content);
    
    //设置按钮
    popLayer->setConfirmCancelButton(callbackListener,callfun);
    
    return popLayer;
}


//初始化
bool PopLayer::init()
{
    if ( !CCLayer::init() ){
        return false;
    }
    
    //精灵帧缓存
    CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
    sfCache->addSpriteFramesWithFile("p_tips.plist");
    
    //添加模态背景
    ccColor4B color = ccc4(112, 128, 144, 150);
    CCLayerColor * colorLayer = CCLayerColor::create(color);
    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    colorLayer->setPosition(CCPointZero);
    colorLayer->setContentSize(winSize);
    this->addChild(colorLayer);
    
    //设置这个层的背景图片，并且设置其位置为屏幕中点
    CCSpriteFrame * f_tips_box = sfCache->spriteFrameByName("tips_box.png");
    CCSprite * spriteBox = CCSprite::createWithSpriteFrame(f_tips_box);
    m_bgSprite = spriteBox;
    spriteBox->setPosition(ccp(winSize.width/2,winSize.height/2));
    this->addChild(spriteBox);
     
    //获得背景图片的大小
    CCSize contentSize = spriteBox->getContentSize();
    m_size = contentSize;
    
    //开启触摸响应
    this->setTouchEnabled(true);
    
    return true;
}


//设置弹出框的title，1/4高度
void PopLayer::setTitle(const char * title)
{
    CCLabelTTF * titleStr = CCLabelTTF::create(title,"Arial",24);
    titleStr->setColor(ccBLACK);
    titleStr->setPosition(ccp(m_size.width/2, m_size.height*(1.0-(1.0/4)/2)));
    m_bgSprite->addChild(titleStr);
}
     
//设置弹出框的文本内容，1/2高度
void PopLayer::setContent(const char * content)
{
    CCLabelTTF * contentStr = CCLabelTTF::create(content,"Arial",22);
    contentStr->setColor(ccBLACK);
    contentStr->setPosition(ccp(m_size.width/2,m_size.height*(1.0-(1.0/4)-(1.0/2)/2)));
    //设置文本域
    contentStr->setDimensions(CCSize(this->m_size.width-60,this->m_size.height-100));
    //设置水平对齐方式
    contentStr->setHorizontalAlignment(kCCTextAlignmentLeft);
 
    m_bgSprite->addChild(contentStr);
}


//设置确定按钮
void PopLayer::setConfirmButton()
{
    CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
    
    CCSpriteFrame * f_tips_btn_confirm_normal = sfCache->spriteFrameByName("btn_confirm_normal.png");
    CCSprite * sprite_tips_btn_confirm_normal = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_normal);
    
    CCSpriteFrame * f_tips_btn_confirm_select = sfCache->spriteFrameByName("btn_confirm_select.png");
    CCSprite * sprite_tips_btn_confirm_select = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_select);
    
    CCMenuItemSprite * itemConfirm = CCMenuItemSprite::create(sprite_tips_btn_confirm_normal, sprite_tips_btn_confirm_select, this, menu_selector(PopLayer::closePopLayer));
    
    itemConfirm->setPosition(ccp(m_size.width/2,m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));
    
    CCPoint bgSpritePoint = m_bgSprite->getPosition();
    CCMenu * menu = CCMenu::create(itemConfirm,NULL);
    menu->setPosition(ccp(bgSpritePoint.x-m_size.width/2,bgSpritePoint.y-m_size.height/2));//菜单位置设置为弹出框左下
    this->addChild(menu);
}

//设置确定取消按钮,参数：调用层对象，调用层回调函数
void PopLayer::setConfirmCancelButton(CCObject * callbackListener,SEL_CallFuncN callfun)
{
    m_callbackListener = callbackListener;
    m_callfun = callfun;
    
    CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();
    
    //确定
    CCSpriteFrame * f_tips_btn_confirm_normal = sfCache->spriteFrameByName("btn_confirm_normal.png");
    CCSprite * sprite_tips_btn_confirm_normal = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_normal);
    
    CCSpriteFrame * f_tips_btn_confirm_select = sfCache->spriteFrameByName("btn_confirm_select.png");
    CCSprite * sprite_tips_btn_confirm_select = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_select);
    
    CCMenuItemSprite * itemConfirm = CCMenuItemSprite::create(sprite_tips_btn_confirm_normal, sprite_tips_btn_confirm_select, this, menu_selector(PopLayer::buttonCallBackFunc));
    
    itemConfirm->setPosition(ccp(m_size.width*(1.0/3),m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));
    
    //取消
    CCSpriteFrame * f_tips_btn_cancel_normal = sfCache->spriteFrameByName("btn_cancel_normal.png");
    CCSprite * sprite_tips_btn_cancel_normal = CCSprite::createWithSpriteFrame(f_tips_btn_cancel_normal);
    
    CCSpriteFrame * f_tips_btn_cancel_select = sfCache->spriteFrameByName("btn_cancel_select.png");
    CCSprite * sprite_tips_btn_cancel_select = CCSprite::createWithSpriteFrame(f_tips_btn_cancel_select);
    
    CCMenuItemSprite * itemCancel = CCMenuItemSprite::create(sprite_tips_btn_cancel_normal, sprite_tips_btn_cancel_select, this, menu_selector(PopLayer::closePopLayer));
    
    itemCancel->setPosition(ccp(m_size.width*(2.0/3),m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));
    
    CCPoint bgSpritePoint = m_bgSprite->getPosition();
    CCMenu * menu = CCMenu::create(itemConfirm,itemCancel,NULL);
    menu->setPosition(ccp(bgSpritePoint.x-m_size.width/2,bgSpritePoint.y-m_size.height/2));//菜单位置设置为弹出框左下
    this->addChild(menu);
}


//执行上层对象的回调函数，关闭弹出框
void PopLayer::buttonCallBackFunc(CCObject * pSender)
{
    CCNode * node = dynamic_cast<CCNode *>(pSender);
    node->setTag(555);//设置tag，在调用层可以获取到
    
    if (m_callfun &&  m_callbackListener)
    {
        //执行调用层回调函数，传递参数CCNode
        (m_callbackListener->*m_callfun)(node);
    }
    
    this->removeFromParentAndCleanup(true);
}

//关闭弹出框
void PopLayer::closePopLayer(CCObject * pSender)
{
    this->removeFromParentAndCleanup(true);
}


//重写触摸注册函数，重新给定触摸级别
void PopLayer::registerWithTouchDispatcher()
{
    //这里的触摸优先级设置为－128，与CCMenu同级，保证了屏蔽下方的触摸
    CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -128, true);
}

//触摸函数ccTouchBegan，返回true
bool PopLayer::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent )
{
    return true;
}

我们的两个create函数分别对应了两种弹出框的创建，这两种弹出框应该足够我们使用了。下面我们来看看调用的代码。

第一种弹出框的调用

CCLayer * popLayer = PopLayer::create("cocos2dx学习之旅","嗨！我是yangxq，我们一起来学习cocos2dx吧！");
this->addChild(popLayer);

第二种弹出框的调用

CCLayer * popLayer = PopLayer::create("tips","嗨！我是yangxq，我们一起来学习cocos2dx吧！",this,callfuncN_selector(RegisterHandleLayer::callfunN));
this->addChild(popLayer);

第二种弹出框触发的函数

void RegisterHandleLayer::callfunN(CCNode * node)
{
    CCLog("Tag:%d",node->getTag());
}

我们在第二种弹出框中点击“确定”后，可以看到效果如下：

我们可以看到输出的日志，说明关闭弹出框后成功触发了调用层的函数，至此我们实现了弹出框功能。