首页 > 代码库 > cocos2dx2.2.2弹出框的实现
cocos2dx2.2.2弹出框的实现
在上一篇文章中，我们利用CCEditBox实现了输入框功能，使我们在注册时可以输入用户名和密码。但是当用户名和密码的输入不符合规范时，我们应该怎样给与用户提示呢？下面我们就来介绍弹出框的实现方式。
我们的思路就是，创建一个模态层，将当前场景的内容盖住，然后在弹出层上给与用户相应的提示并提供一个关闭弹出层的按钮。首先，我们先来看一下效果。
这里的标题和具体提示信息需要是自定义的，才能满足不同场景的需要，而确定按钮只是用来关闭弹出层的，所以这个弹出框的主要元素并不多，实现起来也比较简单。
另外，还有一种弹出框，是用来确认是否执行某种操作的，效果如下：
这种弹出框需要两个按钮，取消按钮是终止操作，和前一个弹出框的确定按钮效果相同，都是直接关闭弹出层即可。而这里的确定按钮，是确定要执行操作，点击后，需要执行确认的操作，及执行调用弹出层的节点中的某个方法。这里的实现就比前一种弹出框复杂一些，需要有调用弹出层的对象和需要执行的函数。下面我们就来看一下具体的实现。
PopLayer.h文件
1 #ifndef __MyGame__PopLayer__ 2 #define __MyGame__PopLayer__ 3 4 #include <iostream> 5 #include "cocos2d.h" 6 #include "cocos-ext.h" 7 USING_NS_CC; 8 USING_NS_CC_EXT; 9 10 class PopLayer:public CCLayer{11 public: 12 //初始化13 virtual bool init();14 15 //创建16 CREATE_FUNC(PopLayer);17 18 //创建确定弹出框19 static PopLayer * create(const char * title,const char * content);20 21 //创建确定取消弹出框22 static PopLayer * create(const char * title,const char * content,CCObject * callbackListener,SEL_CallFuncN callfun);23 24 //设置弹出框的title25 void setTitle(const char * title);26 27 //设置弹出框的文本内容28 void setContent(const char * content);29 30 //设置确定按钮31 void setConfirmButton();32 33 //设置确定取消按钮,参数：调用层对象，调用层回调函数34 void setConfirmCancelButton(CCObject * callbackListener,SEL_CallFuncN callfun);35 36 private:37 //重写触摸注册函数，重新给定触摸级别38 void registerWithTouchDispatcher();39 40 //触摸函数ccTouchBegan，返回true41 bool ccTouchBegan(CCTouch * touch,CCEvent * pevent);42 43 //关闭弹出框44 void closePopLayer(CCObject * pSender);45 46 //执行上层对象的回调函数，关闭弹出框47 void buttonCallBackFunc(CCObject * pSender);48 49 //上层对象50 CCObject * m_callbackListener;51 52 //回调函数53 SEL_CallFuncN m_callfun;54 55 //对话框背景大小56 CCSize m_size;57 58 //对话框背景精灵59 CCSprite * m_bgSprite;60 };61 62 #endif /* defined(__MyGame__PopLayer__) */
PopLayer.cpp文件
1 #include "PopLayer.h" 2 USING_NS_CC; 3 4 //创建确定弹出框 5 PopLayer * PopLayer::create(const char * title,const char * content) 6 { 7 PopLayer * popLayer = PopLayer::create(); 8 9 //设置题目和文本内容 10 popLayer->setTitle(title); 11 popLayer->setContent(content); 12 13 //设置按钮 14 popLayer->setConfirmButton(); 15 16 return popLayer; 17 } 18 19 //创建确定取消弹出框 20 PopLayer * PopLayer::create(const char * title,const char * content,CCObject * callbackListener,SEL_CallFuncN callfun) 21 { 22 PopLayer * popLayer = PopLayer::create(); 23 24 //设置题目和文本内容 25 popLayer->setTitle(title); 26 popLayer->setContent(content); 27 28 //设置按钮 29 popLayer->setConfirmCancelButton(callbackListener,callfun); 30 31 return popLayer; 32 } 33 34 35 //初始化 36 bool PopLayer::init() 37 { 38 if ( !CCLayer::init() ){ 39 return false; 40 } 41 42 //精灵帧缓存 43 CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache(); 44 sfCache->addSpriteFramesWithFile("p_tips.plist"); 45 46 //添加模态背景 47 ccColor4B color = ccc4(112, 128, 144, 150); 48 CCLayerColor * colorLayer = CCLayerColor::create(color); 49 CCSize winSize = CCDirector::sharedDirector()->getWinSize(); 50 colorLayer->setPosition(CCPointZero); 51 colorLayer->setContentSize(winSize); 52 this->addChild(colorLayer); 53 54 //设置这个层的背景图片，并且设置其位置为屏幕中点 55 CCSpriteFrame * f_tips_box = sfCache->spriteFrameByName("tips_box.png"); 56 CCSprite * spriteBox = CCSprite::createWithSpriteFrame(f_tips_box); 57 m_bgSprite = spriteBox; 58 spriteBox->setPosition(ccp(winSize.width/2,winSize.height/2)); 59 this->addChild(spriteBox); 60 61 //获得背景图片的大小 62 CCSize contentSize = spriteBox->getContentSize(); 63 m_size = contentSize; 64 65 //开启触摸响应 66 this->setTouchEnabled(true); 67 68 return true; 69 } 70 71 72 //设置弹出框的title，1/4高度 73 void PopLayer::setTitle(const char * title) 74 { 75 CCLabelTTF * titleStr = CCLabelTTF::create(title,"Arial",24); 76 titleStr->setColor(ccBLACK); 77 titleStr->setPosition(ccp(m_size.width/2, m_size.height*(1.0-(1.0/4)/2))); 78 m_bgSprite->addChild(titleStr); 79 } 80 81 //设置弹出框的文本内容，1/2高度 82 void PopLayer::setContent(const char * content) 83 { 84 CCLabelTTF * contentStr = CCLabelTTF::create(content,"Arial",22); 85 contentStr->setColor(ccBLACK); 86 contentStr->setPosition(ccp(m_size.width/2,m_size.height*(1.0-(1.0/4)-(1.0/2)/2))); 87 //设置文本域 88 contentStr->setDimensions(CCSize(this->m_size.width-60,this->m_size.height-100)); 89 //设置水平对齐方式 90 contentStr->setHorizontalAlignment(kCCTextAlignmentLeft); 91 92 m_bgSprite->addChild(contentStr); 93 } 94 95 96 //设置确定按钮 97 void PopLayer::setConfirmButton() 98 { 99 CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();100 101 CCSpriteFrame * f_tips_btn_confirm_normal = sfCache->spriteFrameByName("btn_confirm_normal.png");102 CCSprite * sprite_tips_btn_confirm_normal = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_normal);103 104 CCSpriteFrame * f_tips_btn_confirm_select = sfCache->spriteFrameByName("btn_confirm_select.png");105 CCSprite * sprite_tips_btn_confirm_select = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_select);106 107 CCMenuItemSprite * itemConfirm = CCMenuItemSprite::create(sprite_tips_btn_confirm_normal, sprite_tips_btn_confirm_select, this, menu_selector(PopLayer::closePopLayer));108 109 itemConfirm->setPosition(ccp(m_size.width/2,m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));110 111 CCPoint bgSpritePoint = m_bgSprite->getPosition();112 CCMenu * menu = CCMenu::create(itemConfirm,NULL);113 menu->setPosition(ccp(bgSpritePoint.x-m_size.width/2,bgSpritePoint.y-m_size.height/2));//菜单位置设置为弹出框左下114 this->addChild(menu);115 }116 117 //设置确定取消按钮,参数：调用层对象，调用层回调函数118 void PopLayer::setConfirmCancelButton(CCObject * callbackListener,SEL_CallFuncN callfun)119 {120 m_callbackListener = callbackListener;121 m_callfun = callfun;122 123 CCSpriteFrameCache * sfCache = CCSpriteFrameCache::sharedSpriteFrameCache();124 125 //确定126 CCSpriteFrame * f_tips_btn_confirm_normal = sfCache->spriteFrameByName("btn_confirm_normal.png");127 CCSprite * sprite_tips_btn_confirm_normal = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_normal);128 129 CCSpriteFrame * f_tips_btn_confirm_select = sfCache->spriteFrameByName("btn_confirm_select.png");130 CCSprite * sprite_tips_btn_confirm_select = CCSprite::createWithSpriteFrame(f_tips_btn_confirm_select);131 132 CCMenuItemSprite * itemConfirm = CCMenuItemSprite::create(sprite_tips_btn_confirm_normal, sprite_tips_btn_confirm_select, this, menu_selector(PopLayer::buttonCallBackFunc));133 134 itemConfirm->setPosition(ccp(m_size.width*(1.0/3),m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));135 136 //取消137 CCSpriteFrame * f_tips_btn_cancel_normal = sfCache->spriteFrameByName("btn_cancel_normal.png");138 CCSprite * sprite_tips_btn_cancel_normal = CCSprite::createWithSpriteFrame(f_tips_btn_cancel_normal);139 140 CCSpriteFrame * f_tips_btn_cancel_select = sfCache->spriteFrameByName("btn_cancel_select.png");141 CCSprite * sprite_tips_btn_cancel_select = CCSprite::createWithSpriteFrame(f_tips_btn_cancel_select);142 143 CCMenuItemSprite * itemCancel = CCMenuItemSprite::create(sprite_tips_btn_cancel_normal, sprite_tips_btn_cancel_select, this, menu_selector(PopLayer::closePopLayer));144 145 itemCancel->setPosition(ccp(m_size.width*(2.0/3),m_size.height*(1.0-(1.0/4)-(1.0/2)-(1.0/4)/2)));146 147 CCPoint bgSpritePoint = m_bgSprite->getPosition();148 CCMenu * menu = CCMenu::create(itemConfirm,itemCancel,NULL);149 menu->setPosition(ccp(bgSpritePoint.x-m_size.width/2,bgSpritePoint.y-m_size.height/2));//菜单位置设置为弹出框左下150 this->addChild(menu);151 }152 153 154 //执行上层对象的回调函数，关闭弹出框155 void PopLayer::buttonCallBackFunc(CCObject * pSender)156 {157 CCNode * node = dynamic_cast<CCNode *>(pSender);158 node->setTag(555);//设置tag，在调用层可以获取到159 160 if (m_callfun && m_callbackListener)161 {162 //执行调用层回调函数，传递参数CCNode163 (m_callbackListener->*m_callfun)(node);164 }165 166 this->removeFromParentAndCleanup(true);167 }168 169 //关闭弹出框170 void PopLayer::closePopLayer(CCObject * pSender)171 {172 this->removeFromParentAndCleanup(true);173 }174 175 176 //重写触摸注册函数，重新给定触摸级别177 void PopLayer::registerWithTouchDispatcher()178 {179 //这里的触摸优先级设置为－128，与CCMenu同级，保证了屏蔽下方的触摸180 CCDirector::sharedDirector()->getTouchDispatcher()->addTargetedDelegate(this, -128, true);181 }182 183 //触摸函数ccTouchBegan，返回true184 bool PopLayer::ccTouchBegan( CCTouch *pTouch, CCEvent *pEvent )185 {186 return true;187 }
我们的两个create函数分别对应了两种弹出框的创建，这两种弹出框应该足够我们使用了。下面我们来看看调用的代码。
第一种弹出框的调用
1 CCLayer * popLayer = PopLayer::create("cocos2dx学习之旅","嗨！我是yangxq，我们一起来学习cocos2dx吧！");2 this->addChild(popLayer);
第二种弹出框的调用
1 CCLayer * popLayer = PopLayer::create("tips","嗨！我是yangxq，我们一起来学习cocos2dx吧！",this,callfuncN_selector(RegisterHandleLayer::callfunN));2 this->addChild(popLayer);
第二种弹出框触发的函数
1 void RegisterHandleLayer::callfunN(CCNode * node)2 {3 CCLog("Tag:%d",node->getTag());4 }
我们在第二种弹出框中点击“确定”后，可以看到效果如下：
我们可以看到输出的日志，说明关闭弹出框后成功触发了调用层的函数，至此我们实现了弹出框功能。
cocos2dx2.2.2弹出框的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。