cocos2d-x二维TableView

原文请猛戳：
http://galoisplusplus.coding.me/blog/2014/09/20/gridview-in-cocos2d-x/

对于刚开始接触cocos2d-x的TableView的人来说，这个UI类看上去并非顾名思义的是个Table，而仅仅是个一维的List。
因为项目需要，我封装了一个TableView的子类来实现二维的功能。
具体代码和测试代码详见：
cocos2d-x-GridView

<!--
（有时间的话我会解释为何要设计成继承TableView和采用TableView实现2D效果的workaround为何不适合项目需求）
-->

GridView的使用与TableView基本相同，只不过多了两个接口：

• 固定行数：调用setRowNum

• 固定列数：调用setColNum

这还需要修改一下cocos2d-x的TableView类的声明，主要是声明一些member function为virtual：

class TableView : public ScrollView, public ScrollViewDelegate
{
public:
    
    enum class VerticalFillOrder
    {
        TOP_DOWN,
        BOTTOM_UP
    };
    
    /** Empty contructor of TableView */
    static TableView* create();
    
    /**
     * An intialized table view object
     *
     * @param dataSource data source
     * @param size view size
     * @return table view
     * @code
     * when this function bound to js or lua,the input params are changed
     * in js:var create(var jsObject,var size)
     * in lua:local create(var size)
     * in lua:
     * @endcode
     */
    static TableView* create(TableViewDataSource* dataSource, Size size);
    /**
     * An initialized table view object
     *
     * @param dataSource data source;
     * @param size view size
     * @param container parent object for cells
     * @return table view
     * @code
     * when this function bound to js or lua,the input params are changed
     * in js:var create(var jsObject,var size,var container)
     * in lua:local create(var size, var container)
     * in lua:
     * @endcode
     */
    static TableView* create(TableViewDataSource* dataSource, Size size, Node *container);
    /**
     * @js ctor
     */
    TableView();
    /**
     * @js NA
     * @lua NA
     */
    virtual ~TableView();

    virtual bool initWithViewSize(Size size, Node* container = NULL);

    /**
     * data source
     * @js NA
     * @lua NA
     */
    virtual TableViewDataSource* getDataSource() { return _dataSource; }
    /**
     * when this function bound to js or lua,the input params are changed
     * in js:var setDataSource(var jsSource)
     * in lua:local setDataSource()
     * @endcode
     */
    virtual void setDataSource(TableViewDataSource* source) { _dataSource = source; }
    /**
     * delegate
     * @js NA
     * @lua NA
     */
    virtual TableViewDelegate* getDelegate() { return _tableViewDelegate; }
    /**
     * @code
     * when this function bound to js or lua,the input params are changed
     * in js:var setDelegate(var jsDelegate)
     * in lua:local setDelegate()
     * @endcode
     */
    virtual void setDelegate(TableViewDelegate* pDelegate) { _tableViewDelegate = pDelegate; }

    /**
     * determines how cell is ordered and filled in the view.
     */
    virtual void setVerticalFillOrder(VerticalFillOrder order);
    virtual VerticalFillOrder getVerticalFillOrder();

    /**
     * Updates the content of the cell at a given index.
     *
     * @param idx index to find a cell
     */
    virtual void updateCellAtIndex(ssize_t idx);
    /**
     * Inserts a new cell at a given index
     *
     * @param idx location to insert
     */
    virtual void insertCellAtIndex(ssize_t idx);
    /**
     * Removes a cell at a given index
     *
     * @param idx index to find a cell
     */
    virtual void removeCellAtIndex(ssize_t idx);
    /**
     * reloads data from data source.  the view will be refreshed.
     */
    virtual void reloadData();
    /**
     * Dequeues a free cell if available. nil if not.
     *
     * @return free cell
     */
    virtual TableViewCell *dequeueCell();

    /**
     * Returns an existing cell at a given index. Returns nil if a cell is nonexistent at the moment of query.
     *
     * @param idx index
     * @return a cell at a given index
     */
    virtual TableViewCell *cellAtIndex(ssize_t idx);

    // Overrides
    virtual void scrollViewDidScroll(ScrollView* view) override;
    virtual void scrollViewDidZoom(ScrollView* view)  override {}
    virtual bool onTouchBegan(Touch *pTouch, Event *pEvent) override;
    virtual void onTouchMoved(Touch *pTouch, Event *pEvent) override;
    virtual void onTouchEnded(Touch *pTouch, Event *pEvent) override;
    virtual void onTouchCancelled(Touch *pTouch, Event *pEvent) override;

protected:
    virtual long __indexFromOffset(Vec2 offset);
    virtual long _indexFromOffset(Vec2 offset);
    virtual Vec2 __offsetFromIndex(ssize_t index);
    virtual Vec2 _offsetFromIndex(ssize_t index);

    virtual void _moveCellOutOfSight(TableViewCell *cell);
    virtual void _setIndexForCell(ssize_t index, TableViewCell *cell);
    virtual void _addCellIfNecessary(TableViewCell * cell);

    virtual void _updateCellPositions();


    TableViewCell *_touchedCell;
    /**
     * vertical direction of cell filling
     */
    VerticalFillOrder _vordering;

    /**
     * index set to query the indexes of the cells used.
     */
    std::set<ssize_t>* _indices;

    /**
     * vector with all cell positions
     */
    std::vector<float> _vCellsPositions;
    //NSMutableIndexSet *indices_;
    /**
     * cells that are currently in the table
     */
    Vector<TableViewCell*> _cellsUsed;
    /**
     * free list of cells
     */
    Vector<TableViewCell*> _cellsFreed;
    /**
     * weak link to the data source object
     */
    TableViewDataSource* _dataSource;
    /**
     * weak link to the delegate object
     */
    TableViewDelegate* _tableViewDelegate;

    Direction _oldDirection;

    bool _isUsedCellsDirty;

public:
    virtual void _updateContentSize();

};

后记

虽然我当时折腾了一阵弄了GridView，但后来我还是倾向于直接用TableView实现二维列表的。比如在m行的TableView的一行里放n个按钮就是mxn的列表，而按钮的响应可以是个c++
lambda，有上下文信息，完全可以实现比较复杂的功能。