creator 仿cocos2dx实现的的tableview组件

先看看这个组件的滚动效果：

组件效果

tip:最后那个button按钮是为了看当前有多少个示例TableCellNode。
当前一共是显示100个cell的TableView，最后打印的话是实际复用了8个cell。

TableView组件源码：

const { ccclass, property } = cc._decorator;

export interface IDataSource {
    tableCellSizeForIndex(table: TableView, idx: number): cc.Size;

    tableCellAtIndex(table: TableView, idx: number): TableCellNode;

    numberOfCellsInTableView(table: TableView): number;
}

export interface IDelegate {
    tableCellTouched(table: TableView, cell: TableCellNode, touch: cc.Touch)
}

export class TableCellNode extends cc.Node {
    idx: number;//复用的时候会更改IDX
    realIdx: number;//用于标记第一次创建的时候的IDX

    constructor() {
        super();

        this.idx = -1;
        this.realIdx = -1;
    }
}

/**
 * 目前只考虑支持垂直方向的TableView
 */
@ccclass
export default class TableView extends cc.Component {
    scrollView: cc.ScrollView = null;
    dataSource: IDataSource = null;
    delegate: IDelegate = null;

    mCurYList: number[] = [];
    mCurCell: TableCellNode[] = [];
    mIdleCell: TableCellNode[] = [];

    mLastShowBeginI: number = 0;
    mLastShowEndI: number = 0;
    mLastTouch: cc.Touch = null;

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        //由于我们的srcroolView是在onLoad的时候执行的，所以我们再onLoad之前都不能这样做
        this.scrollView = this.getComponent(cc.ScrollView);
        if (!this.scrollView)
            throw Error("need ScrollView Component");

        //用于记录点击的位置。 onScrollEvent的回调中并没有位置参数
        let event = new cc.Component.EventHandler();
        event.target = this.node;
        event.component = "TableView";
        event.handler = "onScrollEvent";
        this.scrollView.scrollEvents.push(event);
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
    }

    start() {
        console.log("TableView start");
        this.reload();
    }

    // update (dt) {}

    setDataSource(dataSource: IDataSource) {
        this.dataSource = dataSource;
        console.log("TableView setDataSource");
        this.reload();
    }

    setDelegate(delegate: IDelegate) {
        this.delegate = delegate;
    }

    dequeueCell(): TableCellNode {
        if (this.mIdleCell.length > 0)
            return this.mIdleCell.pop();
        return null;
    }

    reloadNoMove() {
        let oldY = this.scrollView.content.y;//记录之前的位置。
        console.log("oldy=" + oldY);
        this.reload();
        this.scrollView.content.y = oldY;
        this.onChangeContentPos();
    }

    reload() {
        if (!cc.isValid(this.scrollView))
            return;

        if (this.dataSource) {
            //测量tableCell的高度,计算需要显示几个cell

            //渲染之前把之前使用的cell推入空闲cell中
            while (this.mCurCell.length > 0) {
                let idle = this.mCurCell.pop();
                // idle.removeFromParent();
                idle.active = false;
                // console.log("recycle 0 cell idx=" + idle.idx);
                this.mIdleCell.push(idle);//把最下面的cell推入空闲中
            }
            this.scrollView.content.y = this.scrollView.node.height / 2;//回退到最上面

            let len = this.dataSource.numberOfCellsInTableView(this);
            let viewPortH = this.node.height;
            this.mCurYList = [];
            let curH = 0;
            this.mLastShowBeginI = 0;
            this.mLastShowEndI = 0;
            // console.log("len=" + len);

            let i = 0;
            for (; i < len; i++) {
                let curCellH = this.dataSource.tableCellSizeForIndex(this, i).height;
                // console.log("curCellH=" + curCellH + ",viewPortH=" + viewPortH);
                if (curH < viewPortH)
                    this.mLastShowEndI = i;
                this.mCurYList.push(-curH);
                curH += curCellH;
            }
            // console.log("this.mLastShowBeginI=" + this.mLastShowBeginI + ",this.mLastShowEndI=" + this.mLastShowEndI);

            this.scrollView.content.height = curH;

            for (let i = this.mLastShowBeginI; i <= this.mLastShowEndI; i++) {
                let cell = this.dataSource.tableCellAtIndex(this, i);
                cell.idx = i;
                if (!cell.parent) {
                    this.scrollView.content.addChild(cell);
                }
                if (cell.realIdx == -1)
                    cell.realIdx = cell.idx;

                this.mCurCell.push(cell);
                cell.active = true;
                cell.y = this.mCurYList[i];
            }

            //排序是为了方便做回收处理，从上往下排列
            this.mCurCell.sort(function (a, b): number {
                return b.y - a.y;//从大到小排列
            });
        }
    }

    onTouchStart(event: cc.Event.EventTouch) {
        console.log("onTouchStart event x=" + event.touch.getLocationX() + ",y=" + event.touch.getLocationY());
        // let point = this.node.convertToNodeSpaceAR(cc.v2(event.touch.getLocationX(), event.touch.getLocationY()));
        // console.log("onTouchStart point x=" + point.x + ",y=" + point.y);
        // this.mLastClickY = point.y - this.scrollView.content.y;
        // console.log("onTouchStart y(origin,offset)=" + (point.y - this.node.height / 2) + "," + this.mLastClickY + ",this.scrollView.content.y=" + this.scrollView.content.y);
        this.mLastTouch = event.touch;
    }

    mScrolling: boolean = false;

    /**
     * 上边缘继续往下拖拽: SCROLL_BEGAN->SCROLLING->SCROLL_TO_TOP->SCROLLING->TOUCH_UP【放手】
     *                   ->BOUNCE_TOP->SCROLLING->AUTOSCROLL_ENDED_WITH_THRESHOLD->SCROLLING->SCROLL_ENDED
     *
     * 中间拖拽：SCROLL_BEGAN->SCROLLING->TOUCH_UP【放手】->SCROLL_ENDED
     * 下边缘继续往上拖拽: SCROLL_BEGAN->SCROLLING->SCROLL_TO_BOTTOM->SCROLLING->TOUCH_UP【放手】
     *                   ->BOUNCE_BOTTOM->SCROLLING->AUTOSCROLL_ENDED_WITH_THRESHOLD->SCROLLING->SCROLL_ENDED
     *
     * 点击: TOUCH_UP
     * @param scrollView
     * @param eventType
     * @param customEventData
     */
    onScrollEvent(scrollView: cc.ScrollView, eventType: cc.ScrollView.EventType, customEventData: string) {
        // console.log("scrolling=" + cc.ScrollView.EventType.SCROLLING);
        // console.log("onScrollEvent scrollview=" + scrollView + ",eventType=" + eventType + ",customEventData=" + customEventData + ",this.mScrolling=" + this.mScrolling);
        if (eventType == cc.ScrollView.EventType.SCROLL_BEGAN) {
            this.mScrolling = true;
        } else if (eventType == cc.ScrollView.EventType.SCROLL_ENDED) {
            this.mScrolling = false;
        } else if (eventType == cc.ScrollView.EventType.SCROLLING) {
            if (!this.dataSource) {
                return;
            }
            this.onChangeContentPos();
        } else if (eventType == cc.ScrollView.EventType.TOUCH_UP) {
            // console.log("this.delegate = " + this.delegate);
            if (!this.mScrolling && this.delegate && this.mLastTouch) {
                for (let i = 0; i < this.mCurCell.length; i++) {
                    let child = this.mCurCell[i];
                    let rect = child.getBoundingBoxToWorld();
                    // console.log("[" + i + "] rect=" + rect + ",point=" + this.mLastTouch.getLocation() + ",result=" + rect.contains(this.mLastTouch.getLocation()));
                    if (rect.contains(this.mLastTouch.getLocation())) {
                        this.delegate.tableCellTouched(this, child, this.mLastTouch);
                        break;
                    }
                }
            }
        }
    }

    onChangeContentPos() {
        //滚动的时候需要计算显示哪几个cell
        // console.log(scrollView.content.y);
        let viewY1 = this.scrollView.content.y - this.scrollView.node.height / 2;
        let viewY2 = viewY1 + this.node.height;
        let curY = 0;
        let showBeginI = -1;
        let showEndI = -1;
        for (let i = 0; i < this.mCurYList.length; i++) {
            let curCellH = this.dataSource.tableCellSizeForIndex(this, i).height;
            if (curY + curCellH < viewY1) {//视口上面
            } else if (curY > viewY2) {//视口下面
                break
            } else {//视口里面
                if (showBeginI == -1)
                    showBeginI = i;
                showEndI = i;
            }
            curY += curCellH;
        }
        if (showBeginI == -1 || showEndI == -1)
            return;
        if (showBeginI >= this.mLastShowBeginI && showEndI <= this.mLastShowEndI) {
            return;//显示的cell区间不变
        }

        let showNewBeginI = showBeginI;
        let showNewEndI = showEndI;
        if (showBeginI < this.mLastShowBeginI) {//手指往下滑动，组件往下滑动，导致当前显示的顶端cell索引小于之前的
            if (showEndI < this.mLastShowEndI) {
                let curEnd = this.mLastShowEndI;
                while (curEnd > showEndI) {
                    if (this.mCurCell.length > 0) {
                        let idle = this.mCurCell.pop();
                        //之前采用remove的方法导致子cell中添加的TOUCH_START监听后面都无效了，现在改成置为active为false
                        //来取代从父节点移除操作。其实也没必要移除因为后续又要添加进来，这样算起来还是切换active更高效点
                        // idle.removeFromParent();
                        idle.active = false;
                        this.mIdleCell.push(idle);//把最下面的cell推入空闲中
                        // console.log("recycle 1 cell idx=" + idle.idx);
                    }
                    curEnd--;
                }
            }
            showNewEndI = this.mLastShowBeginI - 1;
        } else if (showEndI > this.mLastShowEndI) {//手指往上滑动，组件往上滑动,导致当前显示底段的cell索引大于之前的
            if (showBeginI > this.mLastShowBeginI) {
                let curBegin = this.mLastShowBeginI;
                while (curBegin < showBeginI) {
                    if (this.mCurCell.length > 0) {
                        let idle = this.mCurCell.shift();
                        // idle.removeFromParent();
                        idle.active = false;
                        this.mIdleCell.push(idle);//把最下面的cell推入空闲中
                        // console.log("recycle 2 cell idx=" + idle.idx);
                    }
                    curBegin++;
                }
            }
            showNewBeginI = this.mLastShowEndI + 1;
        }
        // console.log("showBeginI=" + this.mLastShowBeginI + "," + showBeginI + ",showEndI=" + this.mLastShowEndI + "," + showEndI + " | showNewBeginI=" + showNewBeginI + ",showNewEndI=" + showNewEndI);
        this.mLastShowBeginI = showBeginI;
        this.mLastShowEndI = showEndI;
        for (let i = showNewBeginI; i <= showNewEndI; i++) {
            let cell = this.dataSource.tableCellAtIndex(this, i);
            cell.idx = i;//更新IDX
            if (!cell.parent) {
                this.scrollView.content.addChild(cell);
            }
            if (cell.realIdx == -1) {
                // console.log("add new cell idx=" + cell.idx);
                cell.realIdx = cell.idx;
            }
            this.mCurCell.push(cell);
            cell.active = true;
            cell.y = this.mCurYList[i];
        }
        //排序是为了方便做回收处理，从上往下排列
        this.mCurCell.sort(function (a, b): number {
            return b.y - a.y;//从大到小排列
        });
    }
}

接口IDataSource 用来TableView的表现。
接口IDelegate 用来回调某个cell的点击。

Demo下载地址

@注意Demo中的TableView没有及时更新，以本文中的TableView为准

实际问题1 文字叠影

文字叠影

如果设置没有背景图片，纯Label的时候，我们的TableView后面会有文字叠影的情况，修复的方法目前就是cell再加一个背景底，这样渲染出来的文字就正常了

文字叠影的Item

把我们的Item的背景图片改成不透明：

不透明 添加背景图片，文字叠影问题解决