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

在游戏中经常需要以列表方式显示UI，比如游戏的商城，需要上下滑动来浏览商品列表。CCTableView就可以来实现这个效果，为了更加人性化，我们为CCTableView加上一个滑动条。当滑动CCTableView的时候，滑动条会移动到相应位置。反之当移动滑动条移动的时候CCTableView会移动到相应位置。

滑动条使用CCControlSlider来实现，当触发滑动条回调函数时，修改CCTableView的偏移量为滑动条的值。当滑动CCTableView的时候，修改滑动条的值为CCTableView的偏移量。为了不出现死循环，我用两个布尔变量来控制它们的滑动，因为滑动任何一方时都会触发另外一方修改自己，自身被修改时又会去修改另一方，陷入死循环中导致程序崩溃。

 

具体实现：
HelloWorld.h

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"
#include "cocos-ext.h"

using namespace cocos2d;
using namespace cocos2d::extension;

class HelloWorld : public CCLayer, public CCTableViewDataSource, public CCTableViewDelegate
{
public:
    HelloWorld();
    ~HelloWorld();

    virtual bool init();  

    static CCScene* scene();
    
    CREATE_FUNC(HelloWorld);

    virtual void scrollViewDidScroll(CCScrollView *view);
    virtual void scrollViewDidZoom(CCScrollView *view) {}
    virtual void tableCellTouched(CCTableView *table, CCTableViewCell *cell){}
    virtual CCSize tableCellSizeForIndex(CCTableView *table, unsigned int idx);
    virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx);
    virtual unsigned int numberOfCellsInTableView(CCTableView *table);

private:
    void valueChanged( CCObject *sender, CCControlEvent controlEvent );

private:
    bool m_bTable;
    bool m_bSlider;
    CCSize winSize;
};

#endif // __HELLOWORLD_SCENE_H__

 

HelloWorld.cpp

#include "HelloWorldScene.h"

HelloWorld::HelloWorld()
{
    winSize = CCDirector::sharedDirector()->getWinSize();
}

HelloWorld::~HelloWorld()
{

}

CCScene* HelloWorld::scene()
{
    CCScene *scene = CCScene::create();
    
    HelloWorld *layer = HelloWorld::create();

    scene->addChild(layer);

    return scene;
}

bool HelloWorld::init()
{
    if ( !CCLayer::init() )
    {
        return false;
    }
 
    CCControlSlider *slider = CCControlSlider::create("sliderTrack.png","sliderTrack.png" ,"sliderThumb.png");
    slider->setAnchorPoint(ccp(0.5f, 1.0f));
    slider->setMinimumValue( -(60*20-250) );   // 单个cell的高度 × cell的总数 - CCTableView的高度
    slider->setMaximumValue(0);
    slider->setPosition(ccp(winSize.width/2+70, winSize.height/2));
    slider->setRotation(90);
    slider->setValue(-(60*20-250));            // 默认为0
    slider->setTag(1);
    addChild(slider);
    
    // 监听滑动条
    slider->addTargetWithActionForControlEvents(this, cccontrol_selector(HelloWorld::valueChanged), CCControlEventValueChanged);
    
    CCTableView *tableView = CCTableView::create(this, CCSizeMake(60, 250));
    tableView->setDirection(kCCScrollViewDirectionVertical);
    tableView->setPosition(ccp(winSize.width/2-30, winSize.height/2-120));
    tableView->setDelegate(this);
    tableView->setTag(0);
    addChild(tableView);

    tableView->setVerticalFillOrder(kCCTableViewFillTopDown);
    tableView->reloadData();

    return true;
}

// 滑动条回调
void HelloWorld::valueChanged( CCObject *sender, CCControlEvent controlEvent )
{
    m_bTable = false;
    if ( m_bSlider )
    {
        CCTableView *tableView = (CCTableView *)getChildByTag(0);
        CCControlSlider *slider = (CCControlSlider *)getChildByTag(1);
        tableView->setContentOffset(CCSizeMake(0, slider->getValue()));
    }
    m_bTable = true;
}

// 拖动CCTableView触发
void HelloWorld::scrollViewDidScroll(CCScrollView* view)
{
    m_bSlider = false;
    if ( m_bTable  )
    {
        CCTableView *tableView = (CCTableView *)getChildByTag(0);
        CCControlSlider *slider = (CCControlSlider *)getChildByTag(1);
        slider->setValue(tableView->getContentOffset().y);
    }
    m_bSlider = true;
}

CCSize HelloWorld::tableCellSizeForIndex(CCTableView *table, unsigned int idx)
{
     return CCSizeMake(60, 60);
}

CCTableViewCell* HelloWorld::tableCellAtIndex(CCTableView *table, unsigned int idx)
{
    CCString *string = CCString::createWithFormat("%d", idx);
    CCTableViewCell *cell = table->dequeueCell();
    if (!cell)
    {
        cell = new CCTableViewCell();
        cell->autorelease();
        CCSprite *sprite = CCSprite::create("Icon.png");
        sprite->setAnchorPoint(CCPointZero);
        sprite->setPosition(ccp(0, 0));
        cell->addChild(sprite);

        CCLabelTTF *label = CCLabelTTF::create(string->getCString(), "Helvetica", 20.0);
        label->setPosition(CCPointZero);
        label->setAnchorPoint(CCPointZero);
        label->setTag(123);
        cell->addChild(label);
    }
    else
    {
        CCLabelTTF *label = (CCLabelTTF*)cell->getChildByTag(123);
        label->setString(string->getCString());
    }
    return cell;
}

unsigned int HelloWorld::numberOfCellsInTableView(CCTableView *table)
{
    return 20;
}

示例代码：http://pan.baidu.com/s/1o6k9MEA