Lab

Cocos2d-x v3:テーブルの作成

 Tag :  Published : 2014-7-20

Pocket

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

1.HelloWorldScene.h

HelloWorldSceneを使ってこのようなテーブルを作成してみます

cocos2d-x テーブル

まずはHelloWorldScene.hから。

HelloWorldScene.h
// これ追加
#include "cocos-ext.h"
USING_NS_CC_EXT;

// TableViewDelegate、TableViewDataSourceを継承
class HelloWorld : public cocos2d::Layer, public TableViewDelegate, public TableViewDataSource
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();
    
    // TableViewDelegateがScrollViewDelegateを継承している事情で必要
    virtual void scrollViewDidScroll(ScrollView* view){};
    virtual void scrollViewDidZoom(ScrollView* view){};
    
    // セルのサイズを設定
    virtual Size cellSizeForTable(TableView* table);

    // セルの中身を設定
    virtual TableViewCell* tableCellAtIndex(TableView* table,ssize_t idx);
    
    // セルの数を設定
    virtual ssize_t numberOfCellsInTableView(TableView* table);
    
    // セルをタップしたときの処理
    virtual void tableCellTouched(TableView* table,TableViewCell* cell);

    CREATE_FUNC(HelloWorld);
};
    

2.初期設定

次はHelloWorldScene.cppのinitです。

HelloWorldScene.cpp
bool HelloWorld::init()
{
    if (!Layer::init())return false;

    // 画面いっぱいのサイズでテーブルを作成
    Size visibleSize = Director::getInstance()->getVisibleSize();
    TableView* tableView = TableView::create(this, visibleSize);
    
    // テーブルの方向(VERTICAL->縦方向)
    tableView->setDirection(TableView::Direction::VERTICAL);
    
    // セルの表示順(TOP_DOWN->上から下)
    tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);
    
    // 表示
    tableView->setDelegate(this);
    addChild(tableView);
    tableView->reloadData();
    
    return true;
}
    

TableView::Direction(テーブルの方向)
TableView::Direction::VERTICAL->縦方向
TableView::Direction::HORIZONTAL->横方向
TableView::Direction::BOTH->縦横両方
TableView::Direction::NONE->縦横両方(バウンスなし)

TableView::VerticalFillOrder(セルの表示順)
TableView::VerticalFillOrder::TOP_DOWN->上から下
TableView::VerticalFillOrder::BOTTOM_UP->下から上

3.セルのサイズを設定

cellSizeForTableで、セルのサイズを設定します。
今回は、幅は端末サイズ、高さは端末サイズの1/5にしてあります。

HelloWorldScene.cpp
Size HelloWorld::cellSizeForTable(TableView *table){
    Size visibleSize = Director::getInstance()->getVisibleSize();
    return Size(visibleSize.width, visibleSize.height*.2);
}
    

4.セルの中身を設定

tableCellAtIndexで、セルの中身を設定します。

HelloWorldScene.cpp
TableViewCell* HelloWorld::tableCellAtIndex(TableView *table, ssize_t idx){
    Size visibleSize = Director::getInstance()->getVisibleSize();

    TableViewCell *cell = table->dequeueCell();
    cell = new TableViewCell();
    cell->autorelease();
    
    // セルの背景
    auto bg = Sprite::create();
    bg->setAnchorPoint(Vec2(0, 0));
    bg->setTextureRect(Rect(0, 0, visibleSize.width, visibleSize.height*.2));
    bg->setColor(Color3B(230,230,230));
    cell->addChild(bg);
    
    // ボーダーライン
    auto line = Sprite::create();
    line->setAnchorPoint(Vec2(0, 0));
    line->setTextureRect(Rect(0, 0, visibleSize.width, 1));
    line->setColor(Color3B(100,100,100));
    cell->addChild(line);
    
    // テキスト
    auto text = StringUtils::format("Cell %zd", idx);
    auto label = Label::createWithSystemFont(text.c_str(), "Arial", 30);
    label->setAnchorPoint(Vec2(0, 0.5));
    label->setPosition(Vec2(50, visibleSize.height*.1));
    label->setColor(Color3B(100,100,100));
    cell->addChild(label);
    
    return cell;
}
    

4.セルの数を設定

numberOfCellsInTableViewで、セルの数を設定します。
インデックスは0から始まるので、この場合は0〜9になります。

HelloWorldScene.cpp
ssize_t HelloWorld::numberOfCellsInTableView(TableView *table){
    return 10;
}
    

5.セルを選択したときの処理

tableCellTouchedで、セルを選択したときの処理を設定します。
今回はログが出るようにしています。

HelloWorldScene.cpp
void HelloWorld::tableCellTouched(TableView* table, TableViewCell* cell){
    log("%zd番目がタップされました", cell->getIdx());
}
    

pageTop