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(, , , );
     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/,winSize.height/));
     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",);
     titleStr->setColor(ccBLACK);
     titleStr->setPosition(ccp(m_size.width/, m_size.height*(1.0-(1.0/)/)));
     m_bgSprite->addChild(titleStr);
 }

 //设置弹出框的文本内容，1/2高度
 void PopLayer::setContent(const char * content)
 {
     CCLabelTTF * contentStr = CCLabelTTF::create(content,"Arial",);
     contentStr->setColor(ccBLACK);
     contentStr->setPosition(ccp(m_size.width/,m_size.height*(1.0-(1.0/)-(1.0/)/)));
     //设置文本域
     contentStr->setDimensions(CCSize(this->m_size.width-,this->m_size.height-));
     //设置水平对齐方式
     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/,m_size.height*(1.0-(1.0/)-(1.0/)-(1.0/)/)));

     CCPoint bgSpritePoint = m_bgSprite->getPosition();
     CCMenu * menu = CCMenu::create(itemConfirm,NULL);
     menu->setPosition(ccp(bgSpritePoint.x-m_size.width/,bgSpritePoint.y-m_size.height/));//菜单位置设置为弹出框左下
     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/),m_size.height*(1.0-(1.0/)-(1.0/)-(1.0/)/)));

     //取消
     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/),m_size.height*(1.0-(1.0/)-(1.0/)-(1.0/)/)));

     CCPoint bgSpritePoint = m_bgSprite->getPosition();
     CCMenu * menu = CCMenu::create(itemConfirm,itemCancel,NULL);
     menu->setPosition(ccp(bgSpritePoint.x-m_size.width/,bgSpritePoint.y-m_size.height/));//菜单位置设置为弹出框左下
     this->addChild(menu);
 }

 //执行上层对象的回调函数，关闭弹出框
 void PopLayer::buttonCallBackFunc(CCObject * pSender)
 {
     CCNode * node = dynamic_cast<CCNode *>(pSender);
     node->setTag();//设置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, -, 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());
 }

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

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