选项卡控件在游戏和应用中很是常见，但是cocostudio里并没有实现好的选项卡控件，于是自己封装了 一个，效果如下：
代码：
TabUiControl.h
#pragma once //std
#include <string> //cocos
#include "cocos2d.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h" using namespace std; USING_NS_CC;
using namespace cocos2d::ui;
using namespace cocostudio;
using namespace cocostudio::timeline; typedef std::function<void(int)> OnTabActioveCallback; //tab控件数据
struct STabBtnData
{
STabBtnData()
{
_pTabBtn = nullptr;
_pBtnTxt = nullptr;
_pContentNode = nullptr;
}
ui::Button *_pTabBtn; //按钮
Text * _pBtnTxt; //按钮文字
Node *_pContentNode; //对应的内容node指针
}; //选项卡控件
class TabUiControl
{
public:
TabUiControl();
virtual ~TabUiControl();
//初始化tab
bool InitTab(Node *pRootNode, int tabCount, bool bHaveContenNode = true,const char *pTabBtnName = "tabBtn", const char *pTabTxtName = "btnTxt", const char *pContentName = "tabContent");
//tab单击事件
void OnTabClick(Ref *pSender);
//激活tab
void ActiveTab(int index);
//设置激活颜色
void SetActiveTxtColor(const Color4B &color){ _activeTxtColor = color; }
//设置未激活颜色
void SetUnActiveTxtColor(const Color4B &color){ _unActiveTxtColor = color; }
//设置选中回调
void SetActiveCallback(OnTabActioveCallback call){ _onActiveCallback = call; }
private:
//初始化静态数据
static void InitDefData();
protected:
static const int MaxTabCount=; //最大tab数量
static int TabValue[MaxTabCount]; //tab 值
int _tabCount; //tab数量
int _tabMaxZorder; //tabMaxZorder
STabBtnData *_pTabBtnData; //tab 数据
Color4B _activeTxtColor; //激活tabBtn文字颜色
Color4B _unActiveTxtColor; //未激活tabBtn文字颜色
OnTabActioveCallback _onActiveCallback; //tab被激活回调
bool _bHaveContenNode; //tab是否有对应的内容节点
private:
};
TabUiControl.cpp
#include "TabUiControl.h" int TabUiControl::TabValue[MaxTabCount]; TabUiControl::TabUiControl()
:_activeTxtColor(, , , ), _unActiveTxtColor(, , , )
{
InitDefData(); _tabMaxZorder = ;
_tabCount = ;
_pTabBtnData = nullptr;
_onActiveCallback = nullptr;
_bHaveContenNode = false; } TabUiControl::~TabUiControl()
{ CC_SAFE_DELETE_ARRAY(_pTabBtnData);
}
void TabUiControl::InitDefData()
{
static bool BInitOk = false;
if (!BInitOk)
{
for (int i = ; i < MaxTabCount; i++)
{
TabValue[i] = i;
} BInitOk = true;
} } bool TabUiControl::InitTab(Node *pRootNode, int tabCount, bool bHaveContenNode, const char *pTabBtnName, const char *pTabTxtName, const char *pContentName)
{
bool ret = false;
do
{
CC_BREAK_IF(!pTabBtnName || !pTabTxtName || !pRootNode || !pContentName);
CC_BREAK_IF(tabCount > MaxTabCount || tabCount <= ); //分配tab 数据
_pTabBtnData = new STabBtnData[tabCount];
_tabCount = tabCount;
_bHaveContenNode = bHaveContenNode; //临时变量
ui::Button *pTempBtn = nullptr;
Text *pTempTxt = nullptr;
Node *pNode = nullptr;
char tc[] = { };
int i = ;
Widget::ccWidgetClickCallback callback = CC_CALLBACK_1(TabUiControl::OnTabClick, this); for (i = ; i < tabCount; i++)
{
//内容节点指针
if (bHaveContenNode)
{
sprintf(tc, "%s%d", pContentName, i);
pNode = StudioUiBase::FindUiChildNode(pRootNode, tc);
CC_BREAK_IF(!pNode);
_pTabBtnData[i]._pContentNode = pNode;
} //tabBtn
sprintf(tc, "%s%d", pTabBtnName, i);
pNode = StudioUiBase::FindUiChildNode(pRootNode, tc);
pTempBtn = dynamic_cast<ui::Button*>(pNode);
CC_BREAK_IF(!pTempBtn);
//btnTxt
pNode = StudioUiBase::FindUiChildNode(pTempBtn, pTabTxtName);
pTempTxt = dynamic_cast<Text*>(pNode);
CC_BREAK_IF(!pTempTxt);
//tab 值
pTempBtn->setUserData(&(TabValue[i]));
//事件
pTempBtn->addClickEventListener(callback);
//保存
_pTabBtnData[i]._pTabBtn = pTempBtn;
_pTabBtnData[i]._pBtnTxt = pTempTxt; }
CC_BREAK_IF(i != tabCount); //获取最大的zorder-----------
int zoreder = ;
_tabMaxZorder = ;
for (i = ; i < tabCount; i++)
{
zoreder = _pTabBtnData[i]._pTabBtn->getLocalZOrder();
if (zoreder>_tabMaxZorder)
_tabMaxZorder = zoreder;
} ret = true;
} while (); return ret;
} void TabUiControl::ActiveTab(int index)
{
if (index >= && index < _tabCount)
{
int zorder = _tabMaxZorder; //选中设置
_pTabBtnData[index]._pTabBtn->setLocalZOrder(_tabMaxZorder);
_pTabBtnData[index]._pTabBtn->setBright(true);
_pTabBtnData[index]._pBtnTxt->setTextColor(_activeTxtColor); //内容可见性
if (_bHaveContenNode)
_pTabBtnData[index]._pContentNode->setVisible(true); //左边的tab
for (int i = index - ; i >= ; i--)
{
//未选中设置
zorder--;
_pTabBtnData[i]._pTabBtn->setLocalZOrder(zorder);
_pTabBtnData[i]._pTabBtn->setBright(false);
_pTabBtnData[i]._pBtnTxt->setTextColor(_unActiveTxtColor); //内容可见性
if (_bHaveContenNode)
_pTabBtnData[i]._pContentNode->setVisible(false);
} //右边的tab
for (int i = index + ; i < _tabCount; i++)
{
//未选中设置
zorder--;
_pTabBtnData[i]._pTabBtn->setLocalZOrder(zorder);
_pTabBtnData[i]._pTabBtn->setBright(false);
_pTabBtnData[i]._pBtnTxt->setTextColor(_unActiveTxtColor); //内容可见性
if (_bHaveContenNode)
_pTabBtnData[i]._pContentNode->setVisible(false);
} //回调
if (_onActiveCallback)
{
_onActiveCallback(index);
} }
} void TabUiControl::OnTabClick(Ref *pSender)
{
do
{
ui::Button *pBtn = dynamic_cast<ui::Button*>(pSender);
CC_BREAK_IF(!pBtn);
void *pUserData = pBtn->getUserData();
CC_BREAK_IF(!pUserData);
int *pValue = (int*)(pUserData);
//激活tab
ActiveTab(*pValue); } while ();
}
使用代码：
//初始化tab
_tabControl.InitTab(pTabNode, );
//默认显示0
_tabControl.ActiveTab();
InitTab函数简要说明：
//pRootNode:tab 和内容节点的父节点 tabCount:tab总数，bHaveContenNode:tab是否有对应的内容节点，pTabBtnName:tab控件名前缀
//pTabTxtName:tab文本名称,pContentName:内容节点控件名前缀
在InitTab中根据pRootNode节点分别找出所有的tab按钮和对应的内容节点，最大的zorder等数据，在tab按钮响应函数里设置激活时的相关属性