cocos2dx用CCLayerMultiplex实现Tab选项卡

转载 2013年12月25日 16:02:24

原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12940733


有时候,我们希望实现一个选项卡功能,就是切换tab选项,场景中的内容会跟着改变,但是tab选项卡不动。这是用切换场景的方式没办法做到的。

这里我们就可以使用CCLayerMultiplex来实现这个功能。


1.创建布景

这里创建3个布景来做示范。分别是Laye1,Layer2和Layer3。代码就不贴了,布景内容可以直接使用HelloWorld的代码。


2.创建主场景

主场景的初始化函数如下:

  1. bool CCMainScene::init()  
  2. {  
  3.     bool bRet=false;  
  4.     do   
  5.     {  
  6.         CC_BREAK_IF(!CCScene::init());  
  7.   
  8.         _layer1=CCLayer1::create();//创建3个层的实例  
  9.         _layer2=CCLayer2::create();  
  10.         _layer3=CCLayer3::create();  
  11.   
  12.         _layerMuticomplex=CCLayerMultiplex::create(_layer1,_layer2,_layer3,NULL);//创建多层布景层  
  13.         this->addChild(_layerMuticomplex);//添加到场景,默认显示第一个布景  
  14.   
  15.         CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();  
  16.         CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();  
  17.   
  18.         CCMenuItemImage *pCloseItem1 = CCMenuItemImage::create(//创建3个tab菜单,用于切换布景  
  19.             "w_b.png",  
  20.             "w_b.png",  
  21.             this,  
  22.             menu_selector(CCMainScene::menuCallback));  
  23.   
  24.         CCMenuItemImage *pCloseItem2 = CCMenuItemImage::create(  
  25.             "r_b.png",  
  26.             "r_b.png",  
  27.             this,  
  28.             menu_selector(CCMainScene::menuCallback));  
  29.   
  30.         CCMenuItemImage *pCloseItem3 = CCMenuItemImage::create(  
  31.             "g_b.png",  
  32.             "g_b.png",  
  33.             this,  
  34.             menu_selector(CCMainScene::menuCallback));  
  35.   
  36.         // create menu, it's an autorelease object  
  37.         pCloseItem1->setTag(0);//给tab按钮设置tag,方便回调函数中的获取  
  38.         pCloseItem2->setTag(1);  
  39.         pCloseItem3->setTag(2);  
  40.         CCMenu* pMenu = CCMenu::create(pCloseItem1, pCloseItem2, pCloseItem3, NULL);//创建菜单  
  41.         pMenu->alignItemsHorizontallyWithPadding(-1);//设置菜单项间隔  
  42.         pMenu->setPosition(visibleSize.width/2,25);  
  43.         this->addChild(pMenu, 1);//注意哦,菜单要在场景中添加而不是在布景中了!而且z轴要高于多层布景,保证可见。  
  44.         bRet=true;  
  45.     } while (0);  
  46.     return bRet;  
  47. }  

回调函数如下:

  1. void CCMainScene::menuCallback(CCObject* pSender)  
  2. {  
  3.     int item=((CCMenuItemImage*)pSender)->getTag();//获取选择项  
  4.     if (item!=curLayerPos)  
  5.     {  
  6.         _layerMuticomplex->switchTo(item);//切换布景,如果使用switchToAndReleaseMe会释放掉当前布景  
  7.         curLayerPos=item;  
  8.     }  
  9. }  

3.效果

为了让效果明显一点,我让3个布景稍微有点区别。当然菜单是可以做normal,pressed,disable三态的,这里略去。点击不同的选项卡就可以切换到不同的布景层。当然CCLayerMultiplex还可以嵌套使用。


          


4.源码下载地址

http://download.csdn.net/detail/jackyvincefu/6421801

【玩转cocos2d-x之十四】菜单选项卡的实现

有时候,我们希望实现一个选项卡功能,就是切换tab选项,场景中的内容会跟着改变,但是tab选项卡不动。这是用切换场景的方式没办法做到的。 这里我们就可以使用CCLayerMutiComplex来实现...
  • jackyvincefu
  • jackyvincefu
  • 2013年10月22日 08:15
  • 6470

使用js实现tab选项卡效果

这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构,元素如何摆放,此外通过这样的摆放,通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听,当进行选项卡切换时,我们可以对所...
  • qq_15096707
  • qq_15096707
  • 2016年01月29日 10:42
  • 2561

纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{...
  • Handsome_fan
  • Handsome_fan
  • 2017年04月22日 16:25
  • 1340

cocos2dx选项卡

  • 2014年01月13日 11:56
  • 603KB
  • 下载

Cocos2dx 学习笔记29 CCLayerMultiplex管理多个层

CCLayerMultiplex
  • huahua12300
  • huahua12300
  • 2014年11月11日 10:03
  • 521

cocos2d-x 游戏菜单选项卡的实现

  • 2013年10月19日 09:23
  • 209KB
  • 下载

微信小程序:使用swiper与scroll-view实现tab选项卡(2)

微信小程序:使用swiper与scroll-view实现tab选项卡(2)
  • HUSHILIN001
  • HUSHILIN001
  • 2017年12月08日 12:09
  • 664

【玩转cocos2d-x之十四】菜单选项卡的实现

有时候,我们希望实现一个选项卡功能,就是切换tab选项,场景中的内容会跟着改变,但是tab选项卡不动。这是用切换场景的方式没办法做到的。 这里我们就可以使用CCLayerMutiComplex来实现...
  • jackyvincefu
  • jackyvincefu
  • 2013年10月22日 08:15
  • 6470

[置顶]【玩转cocos2d-x之十四】菜单选项卡的实现

[置顶]【玩转cocos2d-x之十四】菜单选项卡的实现                分类:            cocos2d-x2013-10-22 08:15906人阅读评论(...
  • u011794223
  • u011794223
  • 2013年12月16日 15:49
  • 480

SourceInsight选项卡TAB插件V2

  • 2017年03月10日 10:58
  • 623KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2dx用CCLayerMultiplex实现Tab选项卡
举报原因:
原因补充:

(最多只允许输入30个字)