Lab

Cocos2d-x v3:テーブルのセルがフォーカスされた時の処理

 Tag :  Published : 2014-7-20

Pocket

tableCellHighlight、tableCellUnhighlightを使用します。
テーブルのセルがフォーカスされた時、またはフォーカスが外れた時の処理を設定します。
> Ver2.x : 『テーブルのセルがフォーカスされた時の処理』はこちら

テーブルの作成

テーブルを作成します。
テーブルの基本的な作成に関してはこちらのページをどうぞ。

cocos2d-x テーブルを作成

各セルは、薄グレーの背景に濃いグレーの文字とボーダーで構成されています。
うち、背景にはタグを設定しています。

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));
    bg->setTag(100); //タグ設定
    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;
}
    

セルがフォーカスされた時(tableCellHighlight)

セルがタップされたとき、背景色が変わるようにします。
先ほど設定したタグを利用して背景のスプライトにアクセスし、色を変更します。

cocos2d-x セルがタップされた時
void HelloWorld::tableCellHighlight(TableView* table, TableViewCell* cell)
{
    //背景色の変更
    auto bg = (Sprite*)cell-> getChildByTag(100);
    bg->setColor(Color3B(180,180,180));
}
    

セルのフォーカスがはずれた時(tableCellUnhighlight)

これだけだと、色が変わったままになってしまうので、タップ後元に戻るようにします。

void HelloWorld::tableCellUnhighlight(TableView* table, TableViewCell* cell)
{
    //背景色を元に戻す
    auto bg = (Sprite*)cell-> getChildByTag(100);
    bg->setColor(Color3B(230,230,230));
}
    

pageTop