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

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

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

 

具体实现:
HelloWorld.h

cocos2d-x给CCTableView加入下拉滚动条_程序_02

#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__

cocos2d-x给CCTableView加入下拉滚动条_程序_02

 

HelloWorld.cpp

cocos2d-x给CCTableView加入下拉滚动条_程序_02

#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;
}

cocos2d-x给CCTableView加入下拉滚动条_程序_02