cocos2d-x3.x 设计与实现弹出对话框

时间：2022-10-16 22:51:48

要定义一个类PopupLayer

代码PopupLayer.h

#ifndef __crossDT_PopupLayer__

#define __crossDT_PopupLayer__

#include "cocos2d.h"

#include "cocos-ext.h"

USING_NS_CC;

using namespace cocos2d::extension;

class PopupLayer :public Layer

{

public:

	PopupLayer();

	~PopupLayer();

	virtual bool init();

	CREATE_FUNC(PopupLayer);

	//virtual void registerWithTouchDispatcher(void);

	bool onTouchBegan(Touch *touch, Event *unused_event);

	static PopupLayer * create(const char* backgroundImage);

	void setTitle(const char* title ,int fontsize=20);

	void setContentText(const char* text ,int fontsize=20 ,int padding=50 ,int paddintTop=100);

	void setCallbackFunc(Object* target, SEL_CallFuncN callfun);

	bool addButton(const char* normalImage, const char* selectedImage, const char* title, int tag=0);

	virtual void onEnter();

	virtual void onExit();

private:

	void buttonCallback(CCObject* pSender);

    // 文字内容两边的空白区

    int m_contentPadding;

    int m_contentPaddingTop;

    CCObject* m_callbackListener;

    SEL_CallFuncN m_callback;

    CC_SYNTHESIZE_RETAIN(Menu*, m__pMenu, MenuButton);

    CC_SYNTHESIZE_RETAIN(Sprite*, m__sfBackGround, SpriteBackGround);

    CC_SYNTHESIZE_RETAIN(Scale9Sprite*, m__s9BackGround, Sprite9BackGround);

    CC_SYNTHESIZE_RETAIN(LabelTTF*, m__ltTitle, LabelTitle);

    CC_SYNTHESIZE_RETAIN(LabelTTF*, m__ltContentText, LabelContentText);

};

#endif

PopupLayer.cpp里面的代码

#include "PopupLayer.h"

PopupLayer::PopupLayer():

m__pMenu(NULL)

, m_contentPadding(0)

, m_contentPaddingTop(0)

, m_callbackListener(NULL)

, m_callback(NULL)

, m__sfBackGround(NULL)

, m__s9BackGround(NULL)

, m__ltContentText(NULL)

, m__ltTitle(NULL)

{

}

PopupLayer::~PopupLayer(){

    CC_SAFE_RELEASE(m__pMenu);

    CC_SAFE_RELEASE(m__sfBackGround);

    CC_SAFE_RELEASE(m__ltContentText);

    CC_SAFE_RELEASE(m__ltTitle);

    CC_SAFE_RELEASE(m__s9BackGround);

}

bool PopupLayer::init(){

	if(!Layer::init()){

		return false;

	}

		this->setContentSize(CCSizeZero);

        // 初始化须要的 Menu

        CCMenu* menu = CCMenu::create();

        menu->setPosition(CCPointZero);

        setMenuButton(menu);

        setTouchEnabled(true);

	return true;

}

bool PopupLayer::onTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent){

    //

    CCLog("PopupLayer touch");

    return true;

}

PopupLayer* PopupLayer::create(const char *backgroundImage){

    PopupLayer* ml = PopupLayer::create();

    ml->setSpriteBackGround(CCSprite::create(backgroundImage));

    ml->setSprite9BackGround(Scale9Sprite::create(backgroundImage));

    return ml;

}

void PopupLayer::setTitle(const char *title, int fontsize){

    CCLabelTTF* ltfTitle = CCLabelTTF::create(title, "", fontsize);

    setLabelTitle(ltfTitle);

}

void PopupLayer::setContentText(const char *text, int fontsize, int padding, int paddingTop){

    CCLabelTTF* ltf = CCLabelTTF::create(text, "", fontsize);

    setLabelContentText(ltf);

    m_contentPadding = padding;

    m_contentPaddingTop = paddingTop;

}

void PopupLayer::setCallbackFunc(cocos2d::CCObject *target, SEL_CallFuncN callfun){

    m_callbackListener = target;

    m_callback = callfun;

}

bool PopupLayer::addButton(const char *normalImage, const char *selectedImage, const char *title, int tag){

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    CCPoint pCenter = ccp(winSize.width / 2, winSize.height / 2);

    // 创建图片菜单按钮

    CCMenuItemImage* menuImage = CCMenuItemImage::create(normalImage, selectedImage, this, menu_selector(PopupLayer::buttonCallback));

    menuImage->setTag(tag);

    menuImage->setPosition(pCenter);

    // 加入文字说明并设置位置

    CCSize imenu = menuImage->getContentSize();

    CCLabelTTF* ttf = CCLabelTTF::create(title, "", 20);

    ttf->setColor(ccc3(0, 0, 0));

    ttf->setPosition(ccp(imenu.width / 2, imenu.height / 2));

    menuImage->addChild(ttf);

    getMenuButton()->addChild(menuImage);

    return true;

}

void PopupLayer::buttonCallback(cocos2d::CCObject *pSender){

    CCNode* node = dynamic_cast<CCNode*>(pSender);

    CCLog("touch tag: %d", node->getTag());

    if (m_callback && m_callbackListener){

        (m_callbackListener->*m_callback)(node);

    }

    this->removeFromParent();

}

void PopupLayer::onEnter(){

    CCLayer::onEnter();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();

    CCPoint pCenter = ccp(winSize.width / 2, winSize.height / 2);

    CCSize contentSize;

    // 设定好參数，在执行时载入

    if (getContentSize().equals(CCSizeZero)) {

        getSpriteBackGround()->setPosition(ccp(winSize.width / 2, winSize.height / 2));

        this->addChild(getSpriteBackGround(), 0, 0);

        contentSize = getSpriteBackGround()->getTexture()->getContentSize();

    } else {

        Scale9Sprite *background = getSprite9BackGround();

        background->setContentSize(getContentSize());

        background->setPosition(ccp(winSize.width / 2, winSize.height / 2));

        this->addChild(background, 0, 0);

        contentSize = getContentSize();

    }

    // 加入按钮。并设置其位置

    this->addChild(getMenuButton());

    float btnWidth = contentSize.width / (getMenuButton()->getChildrenCount() + 1);

	Vector<Node*> vecArray = getMenuButton()->getChildren();

    CCObject* pObj = NULL;

    int i = 0;

	for(auto& e : vecArray){

		CCNode* node = dynamic_cast<CCNode*>(e);

		node->setPosition(Point(winSize.width/2 - contentSize.width/2+btnWidth*(i+1),winSize.height/2-contentSize.height/3));

		i++;

	}

  /*  CCARRAY_FOREACH(array, pObj){

        CCNode* node = dynamic_cast<CCNode*>(pObj);

        node->setPosition(ccp( winSize.width / 2 - contentSize.width / 2 + btnWidth * (i + 1), winSize.height / 2 - contentSize.height / 3));

        i++;

    }*/

    // 显示对话框标题

    if (getLabelTitle()){

        getLabelTitle()->setPosition(ccpAdd(pCenter, ccp(0, contentSize.height / 2 - 35.0f)));

        this->addChild(getLabelTitle());

    }

    // 显示文本内容

    if (getLabelContentText()){

        CCLabelTTF* ltf = getLabelContentText();

        ltf->setPosition(ccp(winSize.width / 2, winSize.height / 2));

        ltf->setDimensions(CCSizeMake(contentSize.width - m_contentPadding * 2, contentSize.height - m_contentPaddingTop));

        ltf->setHorizontalAlignment(kCCTextAlignmentLeft);

        this->addChild(ltf);

    }

    // 弹出效果

    CCAction* popupLayer = CCSequence::create(CCScaleTo::create(0.0, 0.0),

                                              CCScaleTo::create(0.06, 1.05),

                                              CCScaleTo::create(0.08, 0.95),

                                              CCScaleTo::create(0.08, 1.0), NULL);

    this->runAction(popupLayer);

}

void PopupLayer::onExit(){

    CCLog("popup on exit.");

    CCLayer::onExit();

}

在要引用的代码里面加入

#include "HelloWorldScene.h"

#include "PopupLayer.h"

USING_NS_CC;

Scene* HelloWorld::createScene()

{

    // 'scene' is an autorelease object

    auto scene = Scene::create();

    // 'layer' is an autorelease object

    auto layer = HelloWorld::create();

    // add layer as a child to scene

    scene->addChild(layer);

    // return the scene

    return scene;

}

// on "init" you need to initialize your instance

bool HelloWorld::init()

{

    //////////////////////////////

    // 1. super init first

    if ( !Layer::init() )

    {

        return false;

    }

     CCSize winSize = CCDirector::sharedDirector()->getWinSize();

        CCPoint pointCenter = ccp(winSize.width / 2, winSize.height / 2);

        // 加入背景图片

      /*  CCSprite* background = CCSprite::create("HelloWorld.png");

        background->setPosition(pointCenter);

        background->setScale(1.5f);

        this->addChild(background);    */

        //popupLayer();

        // 加入菜单

        CCMenu* menu = CCMenu::create();

        CCMenuItemFont* menuItem = CCMenuItemFont::create("popup", this, menu_selector(HelloWorld::menuCallback));

		menuItem->setPosition(ccp(winSize.width/2, winSize.height/2));

        menuItem->setColor(ccc3(255, 0, 0));

        menu->addChild(menuItem);

        menu->setPosition(CCPointZero);

        this->addChild(menu);

    return true;

}

void HelloWorld::popupLayer(){

    // 定义一个弹出层，传入一张背景图

    PopupLayer* pl = PopupLayer::create("popuplayer/BackGround.png");

    // ContentSize 是可选的设置，可以不设置，假设设置把它当作 9 图缩放

    pl->setContentSize(CCSizeMake(400, 350));

    pl->setTitle("吾名一叶");

    pl->setContentText("娇兰傲梅世人赏，却少幽芬暗里藏。不看百花共争艳，独爱疏樱一枝香。

", 20, 60, 250);

    // 设置回调函数，回调传回一个 CCNode 以获取 tag 推断点击的按钮

    // 这仅仅是作为一种封装实现，假设使用 delegate 那就行更灵活的控制參数了

    pl->setCallbackFunc(this, callfuncN_selector(HelloWorld::buttonCallback));

    // 加入按钮。设置图片，文字，tag 信息

    pl->addButton("popuplayer/pop_button.png", "popuplayer/pop_button.png", "确定", 0);

    pl->addButton("popuplayer/pop_button.png", "popuplayer/pop_button.png", "取消", 1);

    // 加入到当前层

    this->addChild(pl);

}

void HelloWorld::menuCallback(cocos2d::Object *pSender){

    popupLayer();

}

void HelloWorld::buttonCallback(cocos2d::Node *pNode){

    CCLog("button call back. tag: %d", pNode->getTag());

}

以下是网上转载的代码，那个里面是cocos2d-x2.x里面的代码，有一些改动

我们时常须要这么些功能，弹出一个层，给与用户一些提示，这也是一种模态窗体，在没有对当前对话框进行确认的时候，不能继续往下操作。在设计如此功能之时，怎么设计比較合理 ~ 是这篇文章要讨论的问题。一叶 不倾向于提供给一个完整的解决方式。给一堆源代码。而会靠诉你怎样依据你自己的须要去完好它，授人以鱼不如授人以渔 ~

功能分析

我们设计一个对话框，对话框上有几个button（个数可定制），当然有个标题，会让别人一眼看出它之功用，里面可以有些具体的提示文字，须要是模态窗体，并且窗体的大小可变。这样可以更好的适应不同的屏幕的大小。当然另一个重要的功能，弹出效果 ~ 尽管从技术角度来说，实现起来并不难。或者说非常easy。但这会以一个非常好的用户体验展示给用户。

为了使用方面，我将接口设计的尽量简洁，便于使用。例如以下所看到的，至于内部的实现，那就任意了，接口函数是暴露在外面的，给别人使用，所以依据须要首先将它定义好，会让你的实现步骤思路清晰 (本文所用到的源码能够从  这里  获取)：

class PopupLayer: public CCLayer{

public:

    PopupLayer();

    ~PopupLayer();

    virtual bool init();

    CREATE_FUNC(PopupLayer);

    // 须要重写触摸注冊函数，又一次给定触摸级别

    virtual void registerWithTouchDispatcher(void);

    // 重写触摸函数，永远返回 true ，屏蔽其他层，达到 “模态” 效果

    bool ccTouchBegan(cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent);

    // 构架，并设置对话框背景图片

    static PopupLayer* create(const char* backgroundImage);

    // 它能够显示标题，而且设定显示文字大小

    void setTitle(const char* title, int fontsize = 20);

    // 文本内容。padding 为文字到对话框两边预留的距离，这是可控的，距上方的距离亦是如此

    void setContentText(const char* text, int fontsize = 20, int padding = 50, int paddintTop = 100);

    // 回调函数。当点击button后。我们关闭弹出层的同事，须要一个回调函数，以通知我们点击了哪个button（假设有多个）

    void setCallbackFunc(CCObject* target, SEL_CallFuncN callfun);

    // 为了加入button方面。封装了一个函数，传入些必要的參数

    bool addButton(const char* normalImage, const char* selectedImage, const char* title, int tag = 0);

    // 为了在显示层时之前的属性生效。选择在 onEnter 里动态展示

    virtual void onEnter();

    virtual void onExit();

};

从使用方面的角度来说。定义了以上函数，以供外部调用，完毕主要的功能需求。

当然还有些隐藏的函数，如 setContentSize。

由此開始我们的下一步设计 ~

onEnter 动态组建弹出层

前文提到过。须要的模态窗体大小是可变的，通过 ContentSize 来获取，假设没有设置 ContentSize 。那么採取的方案是。窗体大小与传入图片一样大。反之。将窗体设定为指定大小。

我们知道有非常多类似于这种属性设置改动等，对于完毕这样一个功能来说，有两种方式。

其一。 实时设置，实时刷新 ，比方在 static
PopupLayer* create(const char* gackgroundImage)  的实现里面，创建一个精灵。并设置好图片。加入到当前层，假设调用了  setContentSize  我们再在此方法获取精灵后去改动这个精灵的大小（非常显然在本文，并没有实现
setContentSize 方法。但并不影响讲解）。

其二。 保留属性。动态组建 。这样一种实现是在 static
PopupLayer* create(const char* gackgroundImage)  方法内部，仅仅保存图片的名称，而  setContentSize  也能够仅仅专注于自己的工作就可以。最后在一个适当的运行时期，依据以上两个參数。动态创建符合需求的精灵。而这个操作在
onEnter 里尤为合适。

再以一个当前用到的样例，来说明  实时刷新  与  动态组建  的差别。

看到定义中有一个  addButton  的方法，它是为了能够在当前对话框中加入一个或者几个button，而加入几个？当然并不确定，但确定的是，它们的位置会随着button个数的不同而不同，假设一个button，将居中显示（一分为二）。假设两个（三等份距离），假设是实时刷新。我们在每一次  addButton  方法里面创建一个新的button，还须要设置正确的位置。当然在设置新位置的时候，你须要去推断是否已经存在button。还须要改动q前面button的位置。能够预见，每加入一次，都须要去实时刷新之前设置过的值，假设代码逻辑简单还好。假设逻辑很复杂，依赖属性之多。那么那将不好控制。假设使用  动态组建 。在  addButton  方面里面我们仅仅须要用一个集合（类似机制）来保存全部的button信息。仅此而已，然后在
onEnter 中。读取这些信息，以实时加入button至界面之中。而在执行到这里之时。属性基本已经确定了（这里是button个数）。仅仅需计算一次各button的位置，这种逻辑处理就相当清晰了 ~

能够说动态组建就一定比实时刷新要好么？当然不是。

一个採用实时刷新的样例： 在 Cocos2d-x 的 CCControl 的框架中，使用了实时刷新的解决方式。能够在非常多地方看到类似  needsLayout()  这种操作，在设定一个控件的属性之后，须要依据属性更新控件的布局等。

对于 实时刷新 与 动态组建 这两种方式，须要依据实际情况来选择。以简化我们的开发，而在文本中，基本是以动态组建的方式设计，由于在弹出层执行之时。全部的属性就已经确定。它没有必要再去依据属性实时刷新。

弹出层的触摸优先级。操作与显示相一致

-128  是一个有意义的数字，它是 CCMenu 的默认触摸级别，假设我们不使用自带的菜单项，那么对于触摸级别的问题就非常优点理了，随便一个略微大一点的值，就可以。

可是你须要自己写button处理的实现。当然使用 CCMenu 也是有优点的，它封装了非常好用的点击操作。为了简化开发，这里就基于以 CCMenu 作为对话框button的操作实现。那么我们的 弹出层 触摸级别改设置为多少？

在我们设定触摸级别时。请记住一句话， 操作与显示相一致 。

此话何意？如今设想这样一种情况，我们为了屏蔽弹出层以外全部的层的操作，而将弹出层级别置为 -129 。这样便保证了它是模态的了（一般而言。除了 CCMenu 的级别，用户自己定义也无需这么大），可是假设当前弹出层上方还有其他的层（也能够是弹出层的父节点上方有其他层。如多层的 UI 设计）。而且其上也有 CCMenu button。那么就出现了显示在 弹出层上放层中的 CCMenu button不能点击，这不科学！

实际。在弹出层的
CCMenu 也不能点击，仅仅是我们能够通过将弹出层的触摸消息传递给层中的 CCMenu 解决。所以设置为一味的追求最大的触摸优先级。并不可取。它不能非常好的做到  操作与显示相一致 。而优先级小于 CCMenu 并不能屏蔽下方的其他 CCMenu 操作。所以对于弹出层本身，它设置为 -128 是合理的，对于相同级别的这些元素来说（弹出层和CCMenu），能够做到。显示在最上方的优先处理。假设在弹出层上方还有层，是能够点击的，为什么不呢！

而我们要做的是。通过逻辑控制，让弹出层节点。最后加入到场景的最上方。

对于  操作与显示相一致  的一个解决方式。能够參考一叶的另两篇文章， 多层 UI 触摸事件的轻量级设计 。和  CCScrollView 实现帮助界面、关卡选择 。当然那里并没实用到
CCMenu。而是独立创建了一套规则。

回调函数的实现方案

因为我们使用了 CCMenu 作为button，所以全然能够将 CCMenu 的回调函数，当作參数传入进来，这样处理确实非常easy，可是还有一个问题，我门须要在事件处理完之后。关闭当前层。那这就不能只如此了。须要进一步封装。将弹出层的button回调函数设置为内部实现，然后在 回调给它的上层，之后关闭对话框（关闭的操作由对话框层来完毕）。对于回调一般有两种方式。一种是  delegate  回调。这须要定义接口。由上层，继承实现接口，并把自己当作參数。传入弹出层，由弹出层调用
delegate 的接口方法实现，在 Cocos2d-x 里面非常多地方用到此方式。而还有一种则是 函数绑定，就像 CCMenu 那样的绑定函数。

在这里。一叶选择了后者，假设当前弹出层固定一个或者两个button，那么我将使用 delegate 来实现函数回调。它会使回调步骤更为清晰，可是，这里设计的是button个数可变。功能也不尽同样，使用回调函数，绑定 CCNode 參数，以其 tag 标示。点击的是哪个button，当然这里也并非说使用那种方式是绝对的好坏。

delegate 对參数传递来说，更为严谨。 void
setCallbackFunc(CCObject* target, SEL_CallFuncN callfun);  的定义是类似 CCMenu 的回调机制，一个 CCNode 作为參数，其 tag 用以标示当前点击的是哪个button。

弹出层的调用

void Popup::popupLayer(){

    // 定义一个弹出层，传入一张背景图

    PopupLayer* pl = PopupLayer::create("popuplayer/BackGround.png");

    // ContentSize 是可选的设置，可以不设置，假设设置把它当作 9 图缩放

    pl->setContentSize(CCSizeMake(400, 350));

    pl->setTitle("吾名一叶");

    pl->setContentText("娇兰傲梅世人赏，却少幽芬暗里藏。

不看百花共争艳。独爱疏樱一枝香。", 20, 60, 250);

    // 设置回调函数，回调传回一个 CCNode 以获取 tag 推断点击的按钮

    // 这仅仅是作为一种封装实现。假设使用 delegate 那就行更灵活的控制參数了

    pl->setCallbackFunc(this, callfuncN_selector(Popup::buttonCallback));

    // 加入按钮，设置图片，文字，tag 信息

    pl->addButton("popuplayer/pop_button.png", "popuplayer/pop_button.png", "确定", 0);

    pl->addButton("popuplayer/pop_button.png", "popuplayer/pop_button.png", "取消", 1);

    // 加入到当前层

    this->addChild(pl);

}

void Popup::buttonCallback(cocos2d::CCNode *pNode){

    // 打印 tag 0， 确定，1 ，取消

    CCLog("button call back. tag: %d", pNode->getTag());

}

// 弹出效果 关键代码，当前层直运行这个动作

CCAction* popupLayer = CCSequence::create(CCScaleTo::create(0.0, 0.0),

                                          CCScaleTo::create(0.06, 1.05),

                                          CCScaleTo::create(0.08, 0.95),

                                          CCScaleTo::create(0.08, 1.0), NULL);

这里一张截图，当中 popup button是个 CCMenu，弹出层中两个button也是 CCMenu。而层本身的触摸优先级别也是 -128 ，都是同级，那就依我所言，操作与显示相一致，唯一要注意的是逻辑的控制，什么时候弹出层。由哪个节点弹出层（一般由场景基层来负责）。以保证它显示在最上方。

cocos2d-x3.x 设计与实现弹出对话框

通过以上的讨论实践。完毕了对话框的基本模型，它实现了下面功能：

  • 一个能够弹出的对话框实现
  • 模态窗体的实现（须要逻辑的控制）
  • 多button的支持，位置自适应，提供回调函数
  • 提供标题和内容设置
  • 支持  九图  。控制适应弹出框大小

当然还有很多其他并没有照应到的功能，或者不完好的地方。这就须要用户自己扩展，定制了，如，这样一个层，至少应该是单例的。不论什么时候仅仅应该存在一个，能够用单例模式实现，对于弹出层的内容方面，这里仅仅有标题和内容。而且标题位置固定。button的位置还能够更灵活的设置等。

版权声明：本文博客原创文章，博客，未经同意，不得转载。

相关文章