Lab

Cocos2d-x:テーブルの作成

 Tag :  Published : 2013-12-18

Pocket

CCTableView、CCTableViewCellを使用します。
テーブル(表組)を作成します。
> Ver3.x : 『テーブルの作成』はこちら

1.HelloWorldScene.h

HelloWorldSceneを使ってこのようなテーブルを作成してみます。
ちょっと見た目が悪いですが。。。

cocos2d-x テーブル

まずはHelloWorldScene.hから。

HelloWorldScene.h

// これ追加
#include "cocos-ext.h"
using namespace extension;

// CCTableViewDataSource、CCTableViewDelegateを継承
class HelloWorld : public cocos2d::CCLayer, public CCTableViewDataSource, public CCTableViewDelegate
{
public:
    virtual bool init();
    static cocos2d::CCScene* scene();
    CREATE_FUNC(HelloWorld);

    /***** テーブル用に以下を追加 *****/
    // CCTableViewDelegateがCCScrollViewDelegateを継承している事情で必要
    virtual void scrollViewDidScroll(CCScrollView* view){}
    virtual void scrollViewDidZoom(CCScrollView* view){}

    // セルのサイズを設定
    virtual CCSize cellSizeForTable(CCTableView *table);

    // セルの内容を設定
    virtual CCTableViewCell* tableCellAtIndex(CCTableView *table, unsigned int idx);

    // セルの数を設定
    virtual unsigned int numberOfCellsInTableView(CCTableView *table);

    // セルを選択したときの処理
    virtual void tableCellTouched(CCTableView* table, CCTableViewCell* cell);
};
    

2.HelloWorldScene.cpp

次はHelloWorldScene.cpp。

HelloWorldScene.cpp

bool HelloWorld::init()
{
    if ( !CCLayer::init() )
    {
        return false;
    }

    //テーブルのサイズ設定(画面いっぱい)
    CCSize s = CCDirector::sharedDirector()->getWinSize();
    CCTableView* tableView = CCTableView::create(this, CCSizeMake(s.width, s.height));
    
    //方向(縦)
    tableView->setDirection(kCCScrollViewDirectionVertical);
    
    //セルの表示順(上から下)
    tableView->setVerticalFillOrder(kCCTableViewFillTopDown);

    //表示
    tableView->setDelegate(this);
    addChild(tableView);
    tableView->reloadData();

    return true;
}

// セルのサイズを設定(横:画面いっぱい / 縦:ここでは画像サイズに合わせて100に設定)
CCSize HelloWorld::cellSizeForTable(CCTableView *table){
    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    return CCSizeMake(visibleSize.width, 100);
}

// セルの内容を設定
CCTableViewCell* HelloWorld::tableCellAtIndex(CCTableView *table, unsigned int idx){
    CCString *text = CCString::createWithFormat("Line %d", idx);
    CCString* fileName = CCString::createWithFormat("%d.png", idx);
    CCTableViewCell *cell = table->dequeueCell();

    cell = new CCTableViewCell();
    cell->autorelease();

    // 画像の部分
    CCSprite* sprite = CCSprite::create(fileName->getCString());
    sprite->setAnchorPoint(CCPointZero);
    cell->addChild(sprite);

    // テキストの部分(ccp(130, 35)->画像サイズに合わせて位置を調整してます)
    CCLabelTTF *label = CCLabelTTF::create(text->getCString(), "Arial", 20);
    label->setAnchorPoint(CCPointZero);
    label->setPosition(ccp(130, 35));
    cell->addChild(label);

    return cell;
}

// セルの数を設定。インデックスは0から始まるので、この場合は0〜4になります。
unsigned int HelloWorld::numberOfCellsInTableView(CCTableView *table){
    return 5;
}

// セルを選択したときの処理。ログが出るようにしています。
void HelloWorld::tableCellTouched(CCTableView* table, CCTableViewCell* cell){
    CCLOG("%i番目が選択されました", cell->getIdx());
}
    

setDirection(方向)
縦:kCCScrollViewDirectionVertical
横:kCCScrollViewDirectionHorizontal

setVerticalFillOrder(セルの表示順)
上から下:kCCTableViewFillTopDown
下から上:kCCTableViewFillBottomUp

pageTop