Cocos2d-x How to create a bottom tab bar - cocos2d-x

Question

Just starting out hope this isn’t too noob a question
For the game I’m working on I want to have different tabs, the effect of which would be similar to an iOS bottom tab controller as pictured:
Where I’m at a loss is how to create this? Should this all be on one Scene with different layers being turned on and off? Should I be using multiple Scenes?
Seems like keeping this in one scene wouldn’t really scale. How is this normally done, does cocos2d-x have some sort of concept of containers or something?

Answer 1

I would suggest that you have 2 layers:
The first layers will deal with the images. I guess you can use
ImageView. and position them with the size that you want.
The second part is a tab menu that can be implemented with a second
layer in which you will add the buttons and the background. for the
buttons use the Button class.
I hope that helps.

Answer 2

bool ScreenController::init(){
if(Layer::init())
{
footer = Footer::create();
footer->setDelegate(this);
this->addChild(footer,3);
auto homeLayer= HomeView::create(psize,this);
homeLayer->setPosition(Point(0,footer->getBoundingBox().getMaxY()));
// homeLayer->setAllApiFireTo(this);
auto rakeLayer = RakeView::create(psize);
rakeLayer->setPosition(Point(0,footer->getBoundingBox().getMaxY()));
rakeLayer->setDelegate(this);
Tablayers = LayerMultiplex::create();
Tablayers->addLayer(homeLayer);
Tablayers->addLayer(rakeLayer);
this->addChild(Tablayers);
}
}
void ScreenController::TabControllerAction(ViewDisplayType type) {
Tablayers -> switchTo(index);
}
bool Footer::init(){
if(Layer::init())
{
this->setContentSize(Size(constantDeviceSize.width,108*gamescaleY));
// auto btlayer = LayerColor::create(Color4B::RED,this->getContentSize().width,this->getContentSize().height);
//
// this->addChild(btlayer);
SubButton*sb1 = SubButton::create(Size(this->getContentSize().width/5,this->getContentSize().height),"Home.png","Home.png",CC_CALLBACK_2(Footer::callMenuItem, this) );
sb1->setAnchorPoint(Point(0,0));
sb1->setPosition(Point(0,0));
sb1->addTitleText("Home", SFUI_Regular.c_str());
sb1->colorEfact(true);
sb1->setColorbtn(Color3B::WHITE,colorSkyBlue3B);
this->addChild(sb1);
SubButton*sb2 = SubButton::create(Size(this->getContentSize().width/5,this->getContentSize().height),"Balance.png","Balance.png",CC_CALLBACK_2(Footer::callMenuItem, this));
sb2->setAnchorPoint(Point(0,0));
sb2->setPosition(Point(sb2->getBoundingBox().size.width,0));
sb2->addTitleText("Rake", "arial.ttf");
sb2->colorEfact(true);
sb2->setColorbtn(Color3B::WHITE,colorSkyBlue3B);
this->addChild(sb2);
sb1->setDisplayType(myHomeView);
sb2->setDisplayType(myRakeView);
}
void Footer::selectionByController(int tab)
{
auto tmpbar = dynamic_cast<SubButton *>(this -> getChildren().at(tab-1));
callMenuItem(tmpbar, TouchBegan);
}
void Footer::callMenuItem(Ref *sender, TouchEvent event)
{
if(event==TouchBegan)
{
auto sbitem = (SubButton*)sender;
if(event==TouchBegan)
{
sbitem->selected();
if(this->getDelegate())
{
this->getDelegate()->TabControllerAction(sbitem->getDisplayType());/*call to parant*/
}
CCLOG("CLICKED!->%d",sbitem->getTag());
}
for (int i = 0; i < this->getChildren().size(); i++)
{
auto tmpbar = dynamic_cast<SubButton *>(this -> getChildren().at(i));
if (tmpbar != NULL && tmpbar -> getTag() != sbitem -> getTag())
{
tmpbar ->unSelected();
}
}
}
}