首页 > 代码库 > Cocos2d-X 使用CCTableView创建滚动视图

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

CCTableView和CCScrollView一样用于创建滚动视图,CCTableView的功能也比较多,创建比较麻烦


实例1:使用CCTableView创建滚动视图

首先创建一个TableView类

TableView.h中的代码

#ifndef __TableView_H__
#define __TableView_H__

#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;

class TableView : public CCLayer, public CCTableViewDataSource, public CCTableViewDelegate 
{
public:
    virtual bool init();  

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

    //创建一个数组
    CCArray* _arr;

    //返回格子的大小
    virtual CCSize tableCellSizeForIndex(CCTableView *table, unsigned int idx) 
    {
        return cellSizeForTable(table);
    };

    //每个格子的大小
    virtual CCSize cellSizeForTable(CCTableView *table) 
    {
        //返回窗口的大小
        return CCDirector::sharedDirector()->getWinSize();
    }
   
    //返回格子的编号
    virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx)
    {
        return (CCTableViewCell*)_arr->objectAtIndex(idx);
    }

    //返回滚动的大小(格子的个数)
    virtual unsigned int numberOfCellsInTableView(CCTableView *table)
    {
        return _arr->count();
    }
    
    virtual void tableCellTouched(CCTableView* table, CCTableViewCell* cell)
    {
        CCLog("clicked cell is %d", cell->getIdx());
    }
    
    virtual void scrollViewDidScroll(CCScrollView* view){};
    virtual void scrollViewDidZoom(CCScrollView* view){};
};

#endif // __TableView_H__


TableView.cpp中的代码

#include "TableView.h"

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

    scene->addChild(layer);

    return scene;
}

bool TableView::init()
{
    CCLayer::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

    //先创建好CCTableViewCell
    
    //创建一个数组
    _arr = CCArray::create();

    _arr->retain();

    for(int i = 0; i < 5; i++)
    {
        CCTableViewCell* cell = new CCTableViewCell();
        cell->autorelease();
        _arr->addObject(cell);

        CCSprite* sprite = CCSprite::create("HelloWorld.png");
        cell->addChild(sprite);
        sprite->setPosition(center);
    }

    //创建TableView
    CCTableView* tableView =  CCTableView::create(this, winSize);
    addChild(tableView);

    //设置TableView的滚动方向
    //kCCScrollViewDirectionHorizonta表示在水平方向上滚动
    tableView->setDirection(kCCScrollViewDirectionHorizontal);

    //加载数据
    tableView->reloadData();

    tableView->setDelegate(this);

    return true;
}

执行结果:



实例2:使用CCTableView创建一个小窗口的滚动视图(该功能常用于游戏中的选择道具)

首先创建一个TableViewSmall类

TableViewSmall.h中的代码

#ifndef __TableViewSmall_H__
#define __TableViewSmall_H__

#include "cocos2d.h"
#include "cocos-ext.h"
USING_NS_CC;
USING_NS_CC_EXT;

class TableViewSmall : public CCLayer, public CCTableViewDataSource, public CCTableViewDelegate 
{
public:
    virtual bool init();  

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

    //创建一个数组
    CCArray* _arr;

    //返回格子的大小
    virtual CCSize tableCellSizeForIndex(CCTableView *table, unsigned int idx) 
    {
        if(1 == idx)
        {
            return CCSizeMake(60, 40);
        }

        return cellSizeForTable(table);
    };

    //每个格子的大小
    virtual CCSize cellSizeForTable(CCTableView *table) 
    {
        //每个格子的大小
        return CCSizeMake(40, 40);
    }
   
    //返回格子的编号
    virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx)
    {
        return (CCTableViewCell*)_arr->objectAtIndex(idx);
    }

    //返回滚动的大小(格子的个数)
    virtual unsigned int numberOfCellsInTableView(CCTableView *table)
    {
        return _arr->count();
    }
    
    virtual void tableCellTouched(CCTableView* table, CCTableViewCell* cell)
    {
        CCLog("clicked cell is %d", cell->getIdx());
    }
    
    virtual void scrollViewDidScroll(CCScrollView* view){};
    virtual void scrollViewDidZoom(CCScrollView* view){};
};

#endif // __TableViewSmall_H__

TableViewSmall.cpp中的代码

#include "TableViewSmall.h"

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

    scene->addChild(layer);

    return scene;
}

bool TableViewSmall::init()
{
    CCLayer::init();

    CCSize winSize = CCDirector::sharedDirector()->getWinSize();
    CCPoint center = ccp(winSize.width / 2, winSize.height / 2);

    //先创建好CCTableViewCell
    
    //创建一个数组
    _arr = CCArray::create();

    _arr->retain();

    for(int i = 0; i < 5; i++)
    {
        CCTableViewCell* cell = new CCTableViewCell();
        cell->autorelease();
        _arr->addObject(cell);

        CCSprite* sprite = CCSprite::create("CloseNormal.png");
        cell->addChild(sprite);
        sprite->setPosition(ccp(20, 20));
    }

    //创建TableView
    CCTableView* tableView =  CCTableView::create(this, CCSizeMake(40 * 3, 40));
    addChild(tableView);

    //设置TableView的滚动方向
    //kCCScrollViewDirectionHorizonta表示在水平方向上滚动
    tableView->setDirection(kCCScrollViewDirectionHorizontal);

    //加载数据
    tableView->reloadData();

    tableView->setDelegate(this);

    tableView->setPosition(center);

    return true;
}


执行结果:



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