COCOS2DX - TableView的使用

今天想学习一下 cocos2dx的listview的使用，结果百度等搜索时发现结果非常少。。正纳闷呢，才发现在2.1.3之后ListView就被TableView代替了。
由于之前已经有了Android一年左右的经验，有时候会先入为主地认为那种效果就应该是ListView吧，包括ScorllView和PageView，我估计之后学习的时候也会有些不同吧。
好了废话不多说，一起来看一下cocos2dx里面的CCTableView吧。

可以看到CCTableView继承自CCScrollView，于是我猜想在使用这个控件的时候需要实现一些关于ScrollView的方法比如触摸、滑动等。
初始化一个CCTableView：

//初始化的时候第一个参数是CCTableViewDataSource，第二个参数代表tableview的大小
    CCTableView * table = CCTableView::create(this,CCSize(size.width/2,size.height/2));

    //设置delegate代理
    table->setDelegate(this);

    //设置tableview的滑动的方向
    //kCCScrollViewDirectionHorizontal 水平
    //kCCScrollViewDirectionVertical 竖直
    table->setDirection(kCCScrollViewDirectionVertical);

    //CCTableView默认是以左下角点设置坐标位置的，它继承自CCLayer，这一点不难理解
    //table->setAnchorPoint(ccp(0,0));
    table->setPosition(ccp(0,size.height/2));

    this->addChild(table);
    CCLOG("垂直list建立");

去掉注释和输出的话可以看到只需要5行代码。
但是我们还需要对一些方法进行实现。

//继承自以上的接口需要实现的方法如下
    //这个函数是从CCTableViewDelegate继承下来的，其他三个是从CCTableViewDataSource继承下来的
    void tableCellTouched(CCTableView * table,CCTableViewCell * cell);
    CCSize tableCellSizeForIndex(CCTableView * table,unsigned int index);
    CCTableViewCell * tableCellAtIndex(CCTableView * table,unsigned int index);
    unsigned int numberOfCellsInTableView(CCTableView * table);

    //以下俩个函数可以覆写，也可以不覆写，是从CCTableViewDelegate继承下来的
    void tableCellHighlight(CCTableView * table,CCTableViewCell * cell);
    void tableCellUnhighlight(CCTableView * table,CCTableViewCell * cell);

    //因为CCTableView继承自CCScrollView所以要实现这俩个方法，里边一般都不写东西
    void scrollViewDidScroll(CCScrollView *) {};
    void scrollViewDidZoom(CCScrollView *) {};

具体实现：

//这里设置cell被点击以后的回调函数
void ListViewDemo::tableCellTouched(CCTableView * table,CCTableViewCell * cell)
{
    CCLog("%d:touched!",cell->getIdx()+1);
}

//这个函数是用来获得cell的
CCTableViewCell * ListViewDemo::tableCellAtIndex(CCTableView * table,unsigned int index)
{
    CCString * string = CCString::createWithFormat("%d",index+1);

    //获得一个可用的cell，因为在我们滑动cell的时候有些cell是显示的，有些不是显示出来的，把没有渲染的cell拿过来
    //这样就不用重新new出一个cell了，这样的话可以减小内存的开销
    CCTableViewCell * cell = table->dequeueCell();
    if(!cell)
    {
        cell = new CCTableViewCell();
        cell->autorelease();

        //添加背景图片到cell中，便于区分边界
        CCSprite * background = CCSprite::create("cell.png");
        background->setAnchorPoint(ccp(0,0));
        background->setPosition(CCPointZero);
        cell->addChild(background,0);

        //添加文本信息到cell中
        CCLabelTTF * text = CCLabelTTF::create(string->getCString(),"",20);
        text->setPosition(ccp(25,25));
        text->setTag(1);
        text->setColor(ccc3(255,0,0));
        cell->addChild(text,1);

        //添加精灵到cell的中心位置
        CCSprite * sprite = CCSprite::create("icon.png");
        sprite->setPosition(ccp(50,60));
        cell->addChild(sprite,1);
    }
    //else中获得是没有渲染出来的cell，cell中原有的内容还存在
    else
    {
        //改变原来cell中的文本信息
        CCLabelTTF * text = (CCLabelTTF *)cell->getChildByTag(1);
        text->setString(string->getCString());
    }

    return cell;
}

//这里设置每个cell的大小
CCSize ListViewDemo::tableCellSizeForIndex(CCTableView * table,unsigned int index)
{
    return CCSize(100,50);
}

//这里设置一共有多少个cell
unsigned int ListViewDemo::numberOfCellsInTableView(CCTableView * table)
{
    return 20;
}

//如果某个cell被点击了，则会调用此函数
void ListViewDemo::tableCellHighlight(CCTableView * table,CCTableViewCell * cell)
{
    CCLog("highlight!");
}

//点击之后会调用这个函数，观察这几个函数的调用顺序，发现highlight首先调用
//unhighlight然后调用，最后是tableCellTouched
void ListViewDemo::tableCellUnhighlight(CCTableView * table,CCTableViewCell * cell)
{
    CCLog("unhighlight!");
}

经测试，关于点击cell的调用顺序如下：

COCOS2DX - TableView的使用

相关推荐