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-x给CCTableView加入下拉滚动条

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

Cocos2d-x 3.4 之 TableView

Cocos2d-x 3.4 之 TableView
  • lx417147512
  • lx417147512
  • 2015年03月25日 20:52
  • 5439

cocos2d-x ScrollView与tableView的使用范例

  • 2013年05月25日 18:52
  • 187KB
  • 下载

cocos2dx中滚动界面和小滚动条同步的实现

在游戏中,经常会遇到滚动界面,或者滚动列表,在滚动时,为了给用户一个更好的体验,我们会想到在滚动界面的旁边加上一个小小的滚动条,让这个滚动条和滚动界面的同步运动来告诉用户,这个滚动界面还有多少距离到底...
  • u011389577
  • u011389577
  • 2015年03月07日 11:00
  • 1953

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

Cocos2d-x CCTableView 滚动条的实现
  • u012945598
  • u012945598
  • 2014年08月15日 16:54
  • 3898

Lua中调用 cocos2d-x 的滑动条/滚动条 ScrollView

 ScrollView        我想玩儿过手机的朋友对滑动条都不陌生吧,(旁边: 这不是废话么???? )               那好吧,废话不多说直接开始ScrollView吧...
  • YANG_HR0209
  • YANG_HR0209
  • 2014年06月19日 11:18
  • 3919

如何一直显示tableview的滚动条(自定义方法)

百度了一下如何一直显示tableview滚动条,所有的结果都指向一个方法——重写scrollview的setAlpah方法,可是不知道为什么,当我使用这个方法时,滚动条是一直显示了,但页面中的部分im...
  • baidu_28217989
  • baidu_28217989
  • 2015年11月06日 16:42
  • 2729

【Cocos2d-X】TableView的使用

在Cocos2d-x使用TableView的过程如下: 首先用一个类继承CCTableViewDelegate(代理)和CCTableViewDataSource(数据源); 然后实现里面的有关tab...
  • zgljl2012
  • zgljl2012
  • 2015年04月28日 14:07
  • 1810

Cocos2d-x滚动列表详解(CCScrollView的使用)

今天要写一个滚动列表功能,类似下面这样。(图片资源都是自己从天天酷跑里面抠的,仅用于学习方便) 首先,这样一个列表就和iOS里面的UITableView没什么两样,当然,Android中肯定也存...
  • u013340181
  • u013340181
  • 2014年05月14日 11:08
  • 2337

Cocos2d-X 使用CCTableView创建滚动视图

CCTableView和CCScrollView一样用于创建滚动视图,CCTableView的功能也比较多,创建比较麻烦 实例1:使用CCTableView创建滚动视图 首先创建一个Tab...
  • u010105970
  • u010105970
  • 2014年10月21日 21:59
  • 1649
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Cocos2d-x教程(31)-TableView的滚动条
举报原因:
原因补充:

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