Cocos2dx 3.0 TableViewを使ってみる

raharu(仮名)(プログラマー)
これがダイバージェンス1%の先の世界か。。。

2.x系の記事はありますが、3.x系の記事が見当たらないので備忘録。
抽象クラスの型がv3から変更されています。定義には注意してください。

・40行分のテーブルを表示
・交互に背景色を変更
・スクロールさせる

結果はこちら

f:id:raharu0425:20140514173749p:plain

Overview.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//
//  Overview.h
//  Abyss
//
//  Created by raharu on 2014/05/10.
//
//

#ifndef __Abyss__Overview__
#define __Abyss__Overview__

#include <iostream>
#include "cocos2d.h"
#include <extensions/cocos-ext.h>

USING_NS_CC;
using namespace extension;

class Overview : public Layer,
                 public TableViewDataSource,
                 public TableViewDelegate
{
    Size window_size;
public:
    static cocos2d::Scene* createScene();
    virtual bool init();

    //TableViewDataSourceの抽象メソッド
    virtual Size cellSizeForTable(TableView* table);
    virtual TableViewCell* tableCellAtIndex(TableView* table,ssize_t idx);
    virtual ssize_t numberOfCellsInTableView(TableView* table);

    //TableViewDelegateの抽象メソッド
    virtual void tableCellTouched(TableView* table,TableViewCell* cell);

    //TableViewDelegateが継承しているScrollViewの抽象メソッド
    virtual void scrollViewDidScroll(ScrollView* view){};
    virtual void scrollViewDidZoom(ScrollView* view){};

    CREATE_FUNC(Overview);

};
#endif /* defined(__Abyss__Overview__) */

Overview.cpp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//
//  Overview.cpp
//  Abyss
//
//  Created by raharu on 2014/05/10.
//
//

#include "Overview.h"

Scene* Overview::createScene()
{
    auto scene = Scene::create();
    auto layer = Overview::create();
    scene->addChild(layer);

    return scene;
}

// on "init" you need to initialize your instance
bool Overview::init()
{
    //初期化
    if ( !Layer::init() ) return false;

    //画面サイズサイズを取得
    window_size = Director::getInstance()->getWinSize();

    TableView* tableView = TableView::create(this, window_size);
    //展開方向
    tableView->setDirection(TableView::Direction::VERTICAL);
    //表示順序上からしたへ
    tableView->setVerticalFillOrder(TableView::VerticalFillOrder::TOP_DOWN);

    //追加
    tableView->setDelegate(this);
    addChild(tableView);
    tableView->reloadData();

    return true;
}

// セルの大きさを設定する
Size Overview::cellSizeForTable(TableView *table){
    return Size(window_size.width, 25);
}

// 1セルに表示させるValueをセット
TableViewCell* Overview::tableCellAtIndex(TableView *table, ssize_t idx){
    std::string id = StringUtils::format("%zd", idx);
    std::string text = StringUtils::format("Line %zd", idx);
    TableViewCell *cell = table->dequeueCell();

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

    // セルの背景は交互に色を変更する
    auto background_color = Color3B(255,255,255);
    if (idx%2) {
        background_color = Color3B(200,200,200);
    }

    Sprite* bg = Sprite::create();
    bg->setAnchorPoint(Point(0, 0));
    bg->setTextureRect(Rect(0, 0, window_size.width, 24));
    bg->setColor(background_color);
    bg->setTag(100);
    cell->addChild(bg);

    // ボーダーライン
    Sprite* line = Sprite::create();
    line->setAnchorPoint(Point(0, 0));
    line->setTextureRect(Rect(0, 0, window_size.width, 1));
    line->setColor(Color3B(0,0,0));
    cell->addChild(line);

    // ID部分
    auto *label_1 = LabelTTF::create(id.c_str(), "Arial", 20);
    label_1->setAnchorPoint(Point(0, 0));
    label_1->setPosition(Point(50, 0));
    label_1->setColor(Color3B(0,0,0));
    cell->addChild(label_1);

    // テキスト部分
    auto *label_2 = LabelTTF::create(text.c_str(), "Arial", 20);
    label_2->setAnchorPoint(Point(0, 0));
    label_2->setPosition(Point(100, 0));
    label_2->setColor(Color3B(0,0,0));
    cell->addChild(label_2);

    return cell;
}

// セル数
ssize_t Overview::numberOfCellsInTableView(TableView *table){
    return 40;
}

// セルがタッチされた時のcallback
void Overview::tableCellTouched(TableView* table, TableViewCell* cell){
    CCLOG("%ziのセルがタッチされました", cell->getIdx());
}