先看看这个组件的滚动效果：
组件效果
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中的TableView没有及时更新，以本文中的TableView为准
实际问题1 文字叠影
文字叠影
如果设置没有背景图片，纯Label的时候，我们的TableView后面会有文字叠影的情况，修复的方法目前就是cell再加一个背景底，这样渲染出来的文字就正常了
文字叠影的Item
把我们的Item的背景图片改成不透明：
不透明
添加背景图片，文字叠影问题解决
