Cocos2d-x教程(31)-TableView的滚动条

原创 2014年08月15日 16:54:37

欢迎加入Cocos2d-x 交流群:193411763

转载时请注明原文出处 :http://blog.csdn.net/u012945598/article/details/38587659



在很多游戏中,我们会看到类似下图的功能:






在上图中,当我们滑动TableView时,下方的滚动条也会跟着滑动,当TableView滑动到两端时,滚动条将会横向缩小,随着TableView回弹滚动条也会回弹,下面我们将实现这个滚动条的功能。


首先,在项目中创建一个TableView,并实现其协议中的方法。其中我们需要用到的是

virtual void scrollViewDidScroll(CCScrollView* view);

改方法在滑动TableView时调用,我们需要在这个方法中判定TableView滑动的距离。


下面新建一个SliderBar的文件,SliderBar.h文件内容如下:

#ifndef __shaderTest__SliderBar__
#define __shaderTest__SliderBar__

#include 
#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;
class SliderBar:public CCNode{
  
public:
    
    /* 创建对象 参数:滑动条资源 背景资源 背景大小 滑动条大小比率 */
    static SliderBar * createSliderBar(const char * sliderFileName,const char * backgroundFileName,CCSize bgSize,float multiple);
    /* 初始化方法 */
    bool init(const char * sliderFileName,const char * backgroundFileName,CCSize bgSize,float multiple);
    SliderBar();   //构造函数
    ~SliderBar();  //析构函数
    /* 设置滚动条精灵在其背景精灵上位置的百分比 区间[0,1] 当超过这个范围时进行缩放 */
    void setValue(float value);
    
public:
    /* 创建成员变量及get、set方法 */
    CC_SYNTHESIZE(CCScale9Sprite *, m_sliderSprite, SliderSprite);
    CC_SYNTHESIZE(CCScale9Sprite *, m_backgroundSprite, BackgroundSprite);
    /* 滚动条精灵初始位置 */
    CCPoint _beginPos;
    /* 滚动条精灵最终位置 */
    CCPoint _endPos;
    /* 滚动条背景精灵大小 */
    CCSize _bgSize;
    /*  滚动条精灵大小   */
    CCSize _sdSize;
};
#endif /* defined(__shaderTest__SliderBar__) */


SliderBar.cpp文件内容如下:

#include "SliderBar.h"
SliderBar * SliderBar::createSliderBar(const char * sliderFileName,const char * backgroundFileName,CCSize bgSize,float multiple){
    SliderBar * pRet=new SliderBar();
    if (pRet && pRet->init(sliderFileName, backgroundFileName,bgSize,multiple)) {
        pRet->autorelease();
        return pRet;
    }
    else
        CC_SAFE_DELETE(pRet);
    
    return NULL;
}

SliderBar::SliderBar(){
}
SliderBar::~SliderBar(){
}
bool SliderBar::init(const char * sliderFileName,const char * backgroundFileName,CCSize bgSize,float multiple){
    
    /*  初始化变量  */
    _bgSize=bgSize;
    
    /* 一定要使用九宫格精灵 */
    m_backgroundSprite=CCScale9Sprite::create(backgroundFileName);
    m_backgroundSprite->setContentSize(CCSizeMake(bgSize.width, m_backgroundSprite->getContentSize().height));
    this->addChild(m_backgroundSprite);
    
    m_sliderSprite=CCScale9Sprite::create(sliderFileName);
    m_sliderSprite->setContentSize(bgSize/multiple);
    this->addChild(m_sliderSprite);
    
    _beginPos=ccp(-_bgSize.width/2 + m_sliderSprite->getContentSize().width/2,0);
    _endPos= ccp(_bgSize.width/2 - m_sliderSprite->getContentSize().width/2,0);
    m_sliderSprite->setPosition(_beginPos);

    _sdSize=m_sliderSprite->getContentSize();
    
    return true;
}

void SliderBar::setValue(float value){
   
    /*  正常区间范围活动 */
    if (value>=0 && value<=1) {
        /*  重新设置位置 */
        m_sliderSprite->setPosition(ccp(_beginPos.x+(_endPos.x-_beginPos.x) * value , 0));
    }
    /*  滑动到最左侧    */
    else if (value<0){
        /*  重新设置大小及位置  */
        m_sliderSprite->setContentSize(CCSize(_sdSize.width+value *_sdSize.width,_sdSize.height));
        m_sliderSprite->setPosition(ccp(_beginPos.x+value *_sdSize.width/2, 0));
    }
    /*  滑动到最右侧    */
    else if (value>1){
        /*  重新设置大小及位置  */
        m_sliderSprite->setContentSize(CCSize(_sdSize.width+(1-value) *_sdSize.width,_sdSize.height));
        m_sliderSprite->setPosition(ccp(_endPos.x-(1-value) *_sdSize.width/2, 0));
    }

}

之后,SliderBar还是需要结合TableView来使用,首先在HelloWorld的初始化方法中创建tableView 及 sliderBar的对象(tableView的协议及相关方法的实现不要忘记,这里省略)。



下面在tableView滚动回调方法中添加如下代码:



如此便可以看到上述效果图中效果。

cocos2d-js侧滑菜单SlidingMenu

效果: 代码: 可以自己添加标题与item var SlidingMenu = cc.LayerColor.extend({ MOVE_TIME: 0.5, ...

cocos2d-x给CCTableView加入下拉滚动条

在游戏中经常需要以列表方式显示UI,比如游戏的商城,需要上下滑动来浏览商品列表。CCTableView就可以来实现这个效果,为了更加人性化,我们为CCTableView加上一个滑动条。当滑动CCTab...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Lua中调用 Cocos2d-x 中的滑动条 ScrollView

ScrollView

cocos2d-x - 滚动列表(类似天天酷跑道具菜单)详解(CCScrollView的使用)

今天要写一个滚动列表功能,类似下面这样。(图片资源都是自己从天天酷跑里面抠的,仅用于学习方便) 首先,这样一个列表就和iOS里面的UITableView没什么两样,当然,Androi...

cocos2d-x 滚动条实现

CCSize screenSize = CCDirector::sharedDirector()->getWinSize(); CCControlSlider *slider = CCControlS...
  • OnInit
  • OnInit
  • 2013年04月25日 14:46
  • 3764

Cocos2D-x游戏开发之十:背景无限滚动

今天研究了一下Coco2D-x的背景无限滚动,其实是学习别人的demo,不过自己最终还是折腾出来了,其实还是比较简单了,就是背景不停地移动然后两张图片交替的贴上去。 其精髓之处就是不断地更新背景然后...

给cocos2dx的ui::ScrollView增加滚动条

本人现在的cocos2dx的版本是3.0

coco2d-iphone: 环境搭建

* Mac OS 操作系统. * XCode 作为 IDE, 目前本人使用的是 xcode6.2. * cocos2d-iphone 2.2.0版本. 选择这个版本是因为它支持苹果64位. 关于c...

coco2d-js demo程序之滚动的小球

最近有一个游戏叫围住神经猫,报道说是使用html5技术来做的。 html5的跨平台的优良特性很不错,对于人手不足,技术不足,选用html5技术实现跨平台的梦想真是不错。 最近在看coco2d-js这个...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Cocos2d-x教程(31)-TableView的滚动条
举报原因:
原因补充:

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