Cocos2dx标签页(TabControl/TabView)的简单实现

最新推荐文章于 2023-01-31 12:08:04 发布
最新推荐文章于 2023-01-31 12:08:04 发布
阅读量2.2k 收藏
点赞数
分类专栏： cocos2d-x

标签页是经常用到的控件，但是cocos2d-x并没有提供实现，我在cocos2d-x extension GUI的基础上实现了一份。

约束条件：

 1. 整个TabControl的大小和背景的图片大小一样。

  2. 标签不考虑超过TabControl大小的叠加情况，目前只提供三个控制参数（marginLeft, marginTop, space）。

  3. Tab使用CCControlButton实现，点击后状态变为selected, 但是目前CCControlButton的selecte有点问题，所以稍微改了一下，后续会附上改动代码。

  4. 需要设置Tab控制的显示区域的大小和位置，默认大小为0，默认位置为(0,0), 通常情况只用设置大小就可以了。


CCTabControl.h 代码

/***********************************************************

 Write by wanghong.li

 Any question please contacted wanghong.li1029@163.com

************************************************************/


#ifndef __CCTABCONTROL_H__

#define __CCTABCONTROL_H__


#include "cocos2d.h"

#include "ExtensionMacros.h"

#include "CCControl.h"


NS_CC_EXT_BEGIN



class CCTabControl:public CCLayer

{

public:

    CCTabControl();

   virtual ~CCTabControl();

    

   static CCTabControl* create(constchar* tabNormalImageFile,

                               const char* tabSelectedImageFile,

                               const char* fontName,

                               int fontSize,

                               const char* bgImage);

   static CCTabControl* create(CCSpriteFrame*  tabNormalFrame,

                               CCSpriteFrame*  tabSelectedFrame,

                               const char* fontName,

                               int fontsize,

                               CCSpriteFrame*  bgFrame);

    

   bool  initWithImageFile(constchar* tabNormalImageFile,

                           const char* tabSelectedImageFile,

                           const char* fontName,

                           int fontsize,

                           const char* bgImage);

    

   bool  initWithSpriteFrame(CCSpriteFrame*  tabNormalFrame,

                             CCSpriteFrame*  tabSelectedFrame,

                             const char* fontName,

                             int fontsize,

                             CCSpriteFrame*  bgFrame);

    

   void  setTabMargin(float marginLeft,float marginTop);

    

   CCNode*  getContainer()

    {

        returnm_container;

    }

    

   CCSize getContainerContentSize()

    {

       return m_container->getContentSize();

    }

    

   void setContainerContentSize(constCCSize& size)

    {

       m_container->setContentSize(size);

    }

    

   CCPoint getContainerPosition()

    {

       return m_container->getPosition();

    }

    

   void setContainerPosition(constCCPoint& pos)

    {

       m_container->setPosition(pos);

    }

    

   unsigned int   getTabCount()

    {

       return m_tabs->count();

    }

  

   bool  addTab(constchar* label, CCNode* tabView);

   bool  switchToTab(int index);

    

    

public:

   CC_PROPERTY(float, m_marginLeft, MarginLeft);

   CC_PROPERTY(float, m_marginTop, MarginTop);

   CC_PROPERTY(float, m_tabSpace, TabSpace);

    

protected:

   void onTabControlEvent(CCObject* object,CCControlEvent event);

   void refreshTabX();

   void refreshTabY();

protected:

   CCArray*          m_tabs;

   CCLayer*          m_container;

   CCSprite*         m_bgSprite;

   CCSpriteFrame*    m_tabNormalFrame;

   CCSpriteFrame*    m_tabSelectedFrame;

   std::string       m_fontName;

   int               m_fontSize;

   int               m_currentTabIndex;

};


NS_CC_EXT_END


#endif /* __CCTABCONTROL_H__ */


CCTabControl.cpp代码

/***********************************************************

 Write by wanghong.li

 Any question please contacted wanghong.li1029@163.com

 ************************************************************/


#include "CCTabControl.h"

#include "CCControlButton.h"


NS_CC_EXT_BEGIN


class CCTabControlItem:public CCObject

{

public:

    CCTabControlItem():

    m_tabButton(NULL),

    m_tabView(NULL)

    {

    }

    

   virtual ~CCTabControlItem()

    {

        CC_SAFE_RELEASE(m_tabButton);

        CC_SAFE_RELEASE(m_tabView);

    }

    

   static CCTabControlItem*  create(CCControlButton* tabButton,CCNode* tabView)

    {

        CCTabControlItem* item =new CCTabControlItem();

       if (item && item->init(tabButton, tabView))

        {

            item->autorelease();

           return item;

        }

        

       CC_SAFE_DELETE(item);

       return NULL;

    }

    

   bool init(CCControlButton* tabButton,CCNode* tabView)

    {

       setTabButton(tabButton);

       setTabView(tabView);

       return true;

    }

    

   CCControlButton*  getTabButton()

    {

        returnm_tabButton;

    }

    

   void setTabButton(CCControlButton* tabButton)

    {

        CC_SAFE_RELEASE_NULL(m_tabButton);

        

       m_tabButton = tabButton;

       m_tabButton->retain();

    }

    

   CCNode* getTabView()

    {

       return m_tabView;

    }

    

   void setTabView(CCNode* tabView)

    {

        CC_SAFE_RELEASE_NULL(m_tabView);

       m_tabView = tabView;

       m_tabView->retain();

    }

    

protected:

   CCControlButton*  m_tabButton;

   CCNode*           m_tabView;

};



CCTabControl*CCTabControl::create(constchar* tabNormalImageFile,

                                  const char* tabSelectedImageFile,

                                  const char* fontName,

                                  int fontSize,

                                  const char* bgImage)

{

    CCTabControl* tabControl =new CCTabControl();

   if (tabControl && tabControl->initWithImageFile(tabNormalImageFile,

                                                    tabSelectedImageFile,

                                                    fontName,

                                                    fontSize,

                                                    bgImage))

    {

        tabControl->autorelease();

       return tabControl;

    }

    

   CC_SAFE_RELEASE(tabControl);

    return NULL;

}


CCTabControl* CCTabControl::create(CCSpriteFrame*  tabNormalFrame,

                                  CCSpriteFrame*  tabSelectedFrame,

                                  const char* fontName,

                                  int fontsize,

                                  CCSpriteFrame*  bgFrame)

{

    CCTabControl* tabControl =new CCTabControl();

   if (tabControl && tabControl->initWithSpriteFrame(tabNormalFrame,

                                                      tabSelectedFrame,

                                                      fontName,

                                                      fontsize,

                                                      bgFrame))

    {

        tabControl->autorelease();

       return tabControl;

    }

    

   CC_SAFE_RELEASE(tabControl);

    return NULL;

}


CCTabControl::CCTabControl():

m_tabs(NULL),

m_container(NULL),

m_bgSprite(NULL),

m_tabNormalFrame(NULL),

m_tabSelectedFrame(NULL),

m_fontSize(0),

m_currentTabIndex(0),

m_marginLeft(16),

m_marginTop(16),

m_tabSpace(20)

{

}


CCTabControl::~CCTabControl()

{

    CC_SAFE_RELEASE(m_tabs);

    CC_SAFE_RELEASE(m_container);

    CC_SAFE_RELEASE(m_bgSprite);

    CC_SAFE_RELEASE(m_tabNormalFrame);

    CC_SAFE_RELEASE(m_tabSelectedFrame);

}


boolCCTabControl::initWithImageFile(constchar* tabNormalImageFile,

                                    const char* tabSelectedImageFile,

                                    const char* fontName,

                                    int fontsize,

                                    const char* bgImage)

{

   CCTexture2D* texture = CCTextureCache::sharedTextureCache()->addImage(tabNormalImageFile);

   if (!texture)

    {

        return false;

    }

    

   CCSize textureSize = texture->getContentSize();

   CCRect textureRect(0,0, textureSize.width, textureSize.height);

    

   CCSpriteFrame* tabNormalFrame = CCSpriteFrame::create(tabNormalImageFile, textureRect);

    

   CCSpriteFrame* tabSelectedFrame = CCSpriteFrame::create(tabSelectedImageFile, textureRect);

    

   CCTexture2D* bgTexture = CCTextureCache::sharedTextureCache()->addImage(bgImage);

   if (!bgTexture)

    {

        return false;

    }

   CCSize bgSize = bgTexture->getContentSize();

   CCRect bgRect(0,0, bgSize.width, bgSize.height);


   CCSpriteFrame* bgFrame = CCSpriteFrame::create(bgImage, bgRect);

    

   return initWithSpriteFrame(tabNormalFrame,

                               tabSelectedFrame,

                               fontName,

                               fontsize,

                               bgFrame);

}


boolCCTabControl::initWithSpriteFrame(CCSpriteFrame*  tabNormalFrame,

                                      CCSpriteFrame*  tabSelectedFrame,

                                      const char* fontName,

                                      int fontsize,

                                      CCSpriteFrame*  bgFrame)

{

   m_tabNormalFrame = tabNormalFrame;

    if (!m_tabNormalFrame)

    {

        return false;

    }

    m_tabNormalFrame->retain();

    

   m_tabSelectedFrame = tabSelectedFrame;

    if (!m_tabSelectedFrame)

    {

        return false;

    }

    m_tabSelectedFrame->retain();

    

   m_fontName = fontName;

   m_fontSize = fontsize;

    

    m_bgSprite =CCSprite::createWithSpriteFrame(bgFrame);

    if (!m_bgSprite)

    {

        return false;

    }

    m_bgSprite->retain();

    

   CCSize bgSize = m_bgSprite->getContentSize();

    

    setContentSize(m_bgSprite->getContentSize());

    setAnchorPoint(CCPointZero);

   m_bgSprite->CCNode::setPosition(bgSize.width /2.0f, bgSize.height /2.0f);

    addChild(m_bgSprite);

    

    m_container = CCLayer::create();

    if (!m_container)

    {

        return false;

    }

    m_container->retain();

    m_container->setAnchorPoint(CCPointZero);

    addChild(m_container);

    

    m_tabs =CCArray::createWithCapacity(2);

   if (!m_tabs)

    {

        return false;

    }

   m_tabs->retain();

    

    return true;

}


voidCCTabControl::setTabMargin(float marginLeft,float marginTop)

{

   setMarginLeft(marginLeft);

   setMarginTop(marginTop);

}


boolCCTabControl::addTab(constchar* label, CCNode* tabView)

{

    CCScale9Sprite* normalSprite =CCScale9Sprite::createWithSpriteFrame(m_tabNormalFrame);

   if (!normalSprite)

    {

        return false;

    }

    CCLabelTTF* labelTTF =CCLabelTTF::create(label,m_fontName.c_str(),m_fontSize);

   CCControlButton* controlButton = CCControlButton::create(labelTTF, normalSprite);

   if (!controlButton)

    {

        return false;

    }

   CCRect ctrlBtnRect = m_tabNormalFrame->getRect();

    controlButton->setPreferredSize(ctrlBtnRect.size);

    

    CCScale9Sprite* selectedSprite =CCScale9Sprite::createWithSpriteFrame(m_tabSelectedFrame);

    controlButton->setBackgroundSpriteForState(selectedSprite,CCControlStateSelected);

    

    CCScale9Sprite* highLightedSprite =CCScale9Sprite::createWithSpriteFrame(m_tabSelectedFrame);

    controlButton->setBackgroundSpriteForState(highLightedSprite,CCControlStateHighlighted);

    

    controlButton->setZoomOnTouchDown(false);

    

   CCTabControlItem* controlItem = CCTabControlItem::create(controlButton, tabView);

   if (!controlItem)

    {

        return false;

    }


   int index = m_tabs->count();

    

   if (0 == index)

    {

        tabView->setVisible(true);

        controlButton->setSelected(true);

    }

   else

    {

        tabView->setVisible(false);

    }

   m_tabs->addObject(controlItem);

    controlButton->setTag(index);

    controlButton->addTargetWithActionForControlEvents(this,

                                                      cccontrol_selector(CCTabControl::onTabControlEvent),

                                                      CCControlEventTouchDown |

                                                      CCControlEventTouchUpOutside |

                                                      CCControlEventTouchUpInside);

    

   CCSize containerSize = m_container->getContentSize();

    tabView->setPosition(containerSize.width /2.0f, containerSize.height /2.0f);

    

   addChild(controlButton);

   m_container->addChild(tabView);

    

    refreshTabX();

    refreshTabY();

    return true;

}


boolCCTabControl::switchToTab(int index)

{

   if (index >= m_tabs->count())

    {

        return false;

    }

    

    CCTabControlItem* newItem =dynamic_cast<CCTabControlItem*>(m_tabs->objectAtIndex(index));

   if (!newItem)

    {

        return false;

    }

    

    if (m_currentTabIndex == index)

    {

       return true;

    }

    

    newItem->getTabView()->setVisible(true);

    

    CCTabControlItem* item =dynamic_cast<CCTabControlItem*>(m_tabs->objectAtIndex(m_currentTabIndex));

   if (!item)

    {

        return false;

    }

    item->getTabButton()->setSelected(false);

    item->getTabView()->setVisible(false);

    

    m_currentTabIndex = index;

    

    return true;

}


voidCCTabControl::onTabControlEvent(CCObject* object,CCControlEvent event)

{

    if (event ==CCControlEventTouchDown)

    {

       CCControlButton* controlButton = dynamic_cast<CCControlButton*>(object);

       int index = controlButton->getTag();

       switchToTab(index);

    }

    elseif (event ==CCControlEventTouchUpOutside ||

             event == CCControlEventTouchUpInside)

    {

       CCControlButton* controlButton = dynamic_cast<CCControlButton*>(object);

        controlButton->setSelected(true);

    }

}


floatCCTabControl::getMarginLeft()

{

    returnm_marginLeft;

}


voidCCTabControl::setMarginLeft(float marginLeft)

{

   m_marginLeft = marginLeft;

    refreshTabX();

}


floatCCTabControl::getMarginTop()

{

    returnm_marginTop;

}


voidCCTabControl::setMarginTop(float marginTop)

{

   m_marginTop = marginTop;

    refreshTabY();

}


floatCCTabControl::getTabSpace()

{

    returnm_tabSpace;

    refreshTabX();

}


voidCCTabControl::setTabSpace(float tabSpace)

{

   m_tabSpace = tabSpace;

}


voidCCTabControl::refreshTabX()

{

    CCSize frameSize =m_tabNormalFrame->getRect().size;

   for (int i =0; i < m_tabs->count(); i++)

    {

        CCTabControlItem* controlItem =dynamic_cast<CCTabControlItem*>(m_tabs->objectAtIndex(i));

       float xPosition = m_marginLeft + m_tabSpace * i + (i + 0.5f) * frameSize.width;

        controlItem->getTabButton()->setPositionX(xPosition);

    }

}


voidCCTabControl::refreshTabY()

{

   CCSize size = getContentSize();

    CCSize frameSize =m_tabNormalFrame->getRect().size;

   float  yPosition = size.height - frameSize.height /2 - m_marginTop;

   for (int i =0; i < m_tabs->count(); i++)

    {

        CCTabControlItem* controlItem =dynamic_cast<CCTabControlItem*>(m_tabs->objectAtIndex(i));

        controlItem->getTabButton()->setPositionY(yPosition);

    }

}


NS_CC_EXT_END




CCControlButton.cpp修改：

    

voidCCControlButton::setSelected(bool enabled)

{

    /* Add by wanghong.li to set seleceted state*/

   if (enabled == true)

    {

        m_eState =CCControlStateSelected;

    }

   else

    {

        m_eState =CCControlStateNormal;

    }

    

   CCControl::setSelected(enabled);

    needsLayout();

}


实例代码：

    CCLayer::init();

    CCTabControl* tabCtrl =CCTabControl::create("Resources/ccbResources/clubManager/tabNormal.png",

                                                 "Resources/ccbResources/clubManager/tabSelected.png",

                                                "Helvetica",

                                                12,

                                                "Resources/ccbResources/clubManager/tabBg.png");

    

   CCSize containerSize = CCSizeMake(480.0f, 240.0f);

    tabCtrl->setContainerContentSize(containerSize);

    tabCtrl->setContainerPosition(ccp(0.0f,20.0f));

    tabCtrl->setTabMargin(40.0f,8.0f);

    

    CCSprite* sprite1 =CCSprite::create("Resources/ccbResources/clubManager/tabNormal.png");

    CCSprite* sprite2 =CCSprite::create("Resources/ccbResources/clubManager/tabSelected.png");

    

    tabCtrl->addTab("Tab1", sprite1);

    tabCtrl->addTab("Tab2", sprite2);

   addChild(tabCtrl);


PS：加了Lua的PKG文件，有需要的可以联系
杨名天吓
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cocos2dx scrollview优化
09-07
cocos2dx scrollview优化
cocosStudio中使用PageView,ListView和ScrollView
weixin_30788619的博客
01-12 134
晚上吃东西好像吃坏肚子了，。但是技术还要继续研究。最近工作中要使用CocosStudio做界面，好吧，不管对他有什么偏见，学习一下吧。这里主要记录一下三个控件的使用和说明。就是ScrollView，ListView和PageView。 首先大致的介绍一下这三个控件吧，scrollView顾名思义，滑动容器可以上下滑动，也可以左右滑动。PageView可以这么理解，它就是scrollVie...
cocos2dx-标签：Label的使用
m0_47584501的博客
04-04 3521
一、setContentSize与setDimensions对于Label的作用 1、首先看看setContentSize的定义： /* * Set the untransformed size of the node. * 设置节点转换前的大小 * The contentSize remiains the same no matter the node is scaled or rotated. * 无论缩放还是旋转节点，它的contentSize始终保持不变 * All nodes has a s
如何从0到1制作一款 Cocos Creator 插件？超详细开发指南来了！
Cocos的博客
01-31 564
在开发过程中，总少不了用到各类插件。Cocos Store 上提供了许多插件资源，但有时也需要我们自己动手去制作一些插件。本次，开发者 muzzik（马赛克）将分享 v3.x 插件开发流程与经验，一起来做插件吧！Cocos Store 资源商店首先，为什么要开发插件呢？任何重复机械式的劳动都是无意义的，一切机械劳动皆可自动化，而插件能帮助我们实现自动化。插件能给我们带来什么？第一是时间。解决了自动...
TabControl控件和TabPage的使用
热门推荐
u011555996的博客
11-17 3万+
TabControl控件和TabPage                    TabControl控件搞了两天才弄会，发个简单教程  TabControl控件可以支持在一个控件里面放置多个选项卡，每个选项卡又可以放置多个控件 由于在控件属性窗口添加选项卡相对比较容易，下面说一下动态创建选项卡  首先从工具栏拖入一个TabControl控件tabC
H5游戏loading页面样式制作(cocoscreator版)
Mr_JiaTao的博客
04-22 2111
背景 前阵子，美术设计了一个H5游戏loading页面的UI。如图： 刚看到这张UI图的时候，没有很好的实现思路。(第一版UI图，美术少打了一个字母，哈哈哈。)当时，有两个想法： 1、找产品压缩需求，能不能制作一个loading动图放那里，下面的进度条不要。 2、新建一个资源加载场景，场景里面内容就如上图一样，至于最前面的引擎资源加载页面(cocos发布后自动生成的那个黑色资源加载页面)，我给它设置成全透明。因为，进游戏后，先进入资源加载场景，场景资源很少，所以可以很快的进入资源加载页面，然后在资源加载页
Yii Framework 开发教程(17) UI 组件 TabView示例
mapdigit
12-25 120
CTabView 用来显示分页标签，使用TabView的基本方法是配置tabs属性，每个Tab可以配置如下属性 title:标签标题. content: 标签显示内容. view: 标签显示View的名称，如果同时制定Content，则显示Content内容。 url: 点击该标签时页面重定向到指定URL. data: 当指定View属性时传给该View的属性数组. 本例显示三个标签页，分别使...
Cocos2d-x 基本操作+事件监听+调试技巧+常见问题
HYY的博客
05-03 6204
本节将分享一些 1. Cocos2dx开发中VS（通用）基本操作 2. 常见问题的Debug操作（非断点调试） Cocos2d-x 版本：3.17.2 目录 一. 基本操作 1. 快速查看对应的函数声明（Ctrl+点击） 2. 快速查找/替换（Ctrl+F） 3. 查看所有引用（Fn+Shift+F12） 4. 格式化输出 5. 监听事件 点击按钮触发 鼠标点击事件 键盘事件 二. 常见问题 1. Debug常规操作 编译时出错 运行时出错 控制变量+日志输出 ..
cocos2dx 4.0入门之泡泡龙项目的分解（三）
qq_23345187的博客
01-10 868
目录导读一、cocos2dx概念1、cocos2dx加载图片资源的两种方式2、cocos2dx音效的概念3、cocos2dx粒子系统的概念二、认识道具师团队2.1 实现初始化2.2 显示加载百分比2.3 资源加载界面替换为进入主界面2.4 实现一个菜单项 导读 上一章，我们讲解了cocos的基本概念。我们做一个场景基本的步骤是： 创建一个场景---->交给层类布置---->将层加入场景 本章要讲的是： 1.cocos2dx加载图片资源的两种方式 2.cocos2dx音效的使用 3.cocos2d
cocos2dx-3.10 C++实现滚动数字
12-16
本文实例为大家分享了cocos2dx-3.10 C++实现滚动数字的具体代码，供大家参考，具体内容如下 NumberScroller.h #ifndef _NUMBERSCROLLER_H_ #define _NUMBERSCROLLER_H_ #include "cocos2d.h" USING_NS_CC; /* 这是...
cocos2dx 3.17.2 升级最新的Spine
01-03
以cocos2dx 3.17.2自带的spine库不支持最新的spine版本导出的动画文件。本篇详细讲解如何升级 1.下载并解压 下载地址:https://download.csdn.net/download/zhang1461376499/12405347 下载完之后解压大概是这样 2....
cocos2dx实现刮奖效果
08-26
主要为大家详细介绍了cocos2dx实现刮奖效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
cocos2dx+lua实现橡皮擦功能
10-17
主要为大家详细介绍了cocos2dx+lua实现橡皮擦功能，类似刮刮乐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Java-GUI介绍和使用
最新发布
04-18
GUI API包含的类分为三个部分:组件类(component class) 容器类(container class),和辅助类(helper class) 1. 组件类是用来创建用户图形界面的,例如JButton,JLabel,JTextField. 2. 容器类是用来包含其他组件的,例如JFrame,JPanel 3. 辅助类是用来支持GUI组件的,例如Color,Font
汉诺塔c语言递归.zip
04-18
汉诺塔c语言递归
mybatis-plus-core-3.0.6.jar
04-18
mybatis-plus-core.jar 各个版本，免费下载， mybatis-plus-core.jar 是 MyBatis 的增强工具核心包。免费下载 。 MyBatis-Plus(简称 MP)，是一个 MyBatis 的增强工具包，只做增强不做改变，为简化开发工作、提高生产率而生。
mybatis-plus-generator-3.4.0.jar
04-18
mybatis-plus-generato.jar 包，各个版本，免费下载。 mybatis-plus 代码生成器生成代码框架。各个版本，免费下载。 下载不了，关注我，评论区联系我。
2023年纺织行业分析.pptx
04-18
行业研究
cocos2dx tabview
04-01
Cocos2d-x TabView is a user interface component that allows users to navigate through different pages or tabs within a single window. It is a container that holds multiple child nodes, with each child...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值