1.tableview 大
1.tableview
大小、方向x或y、位置、层次
var table = this.addtableview(cc.size(600, 60), cc.scrollview_direction_horizontal,cc.p(20, winsize.height / 2 - 150), 4)
addtableview:function(size, direction, pos, zorder){
var tableview = cc.tableview.create(this, size);
tableview.setdirection(direction);
tableview.setposition(pos);
tableview.setverticalfillorder(cc.tableview_fill_bottomup); //idx是从最小的开始还是从最大的开始
tableview.setdelegate(this);
this.addchild(tableview, zorder);
return tableview;
},
tablecellatindex:function (table, idx) {
var cell = table.dequeuecell();
if (!cell) {
cell = new tableviewcell();
}
//new 一个 layer ,把控件放到 layer 上,在把 layer 放到 cell 上
//注意: 安照 cell 的大小去摆放 layer 上的 ui 位置。
cell.addchild(layer);
if(cell.getchildbytag(tag)){
cell.removechildbytag(tag);
}
layer.settag(tag);
return cell;
},
numberofcellsintableview:function (table) { return 25;}
tablecelltouched:function (table, cell) {},
cellsizefortable:function (table) {return cc.size(60, 60);},
scrollviewdidscroll:function (view) {},
scrollviewdidzoom:function (view) {},
2.tableviewdelegate
继承scrollviewdelegate:有一个自己的方法 setdelegate(this)
tablecelltouched:function (table, cell) {}
屏蔽
ontouchesbegan:function (touches, event) {}
3.tableviewdatasource
继承与class setdatasource(this)
cellsizefortable:function (table) {return 0;},
tablecellatindex:function (table, idx) {return 0;},
numberofcellsintableview:function (table) {return 0;}
4.cell
继承node,cell上面添加 layer 等进行重写操作
5.scrollview
向scrollview放layer设置layer大小,之后ui放到这个layer上。layer就可以滑动了,也可以setdelegate
var layer = cc.layer.create();
layer.setcontentsize(cc.size(width , height ));
addscroll:function(size, layer, pos, direc, offset, target){
var scrollview = cc.scrollview.create(size, layer);
scrollview.setposition(pos);
scrollview.setdirection(direc);
scrollview.setcontentoffset(offset);
target.addchild(scrollview);
return scrollview;
},
var spriter = xxx.create();
layer.addchild(spriter);
setdelegate
scrollviewdidscroll:function (view) {},
scrollviewdidzoom:function (view) {},
设置layer大小,向layer上放 ui 是从layer的左下角cc.p(0, 0)开始的。
如果 layer == size offset 设置 cc.p(0, 0) layer和scroll将会重合,layer超过offset的y多少x cc.p(0, -x) layer的上研和scroll的上研重合
1.通过 size 和 pos 确定 scroll 框的大小和位置
2.通过设定 spriter 的位置确定layer上第一个 ui 的位置,调整到刚好在scroll的框上研。
3.通过 setcontentoffset 设置一开始 spriter 就在那个上研的位置,
4.之后在添加其他 ui
5.layer上添加其他 ui 左下角 是cc.p(0, 0)点
6.取消缓冲
table.setbounceable(false);
5.上拉刷新和下拉刷新
1.tableview 到最底下了,在向上拉一点会有一个向上的缓冲,在回到0 0点
2.同理到最上面了在向下拉也会有一个向下的缓冲
3.中间缓冲,根据你移动tableview的速度进行
注意事项:
1.触摸结束才能进行上拉刷新操作
2.tableview里的内容 heght 度大于某个值才能进行上拉刷新
3.上啦自动滚动进行处理起处理。
主要实现原理:
tableview有自己固定的大小,在tableview里面有一个view,当滚动tableview时滚动的只是里面得view,此时会调用scrollviewdidscroll:function (view) 。
以y1作为对齐点,开始的时候y2的坐标相对于y1是 负的,当滚动view时y2和y1重合此时y1坐标为 0, 0。在向上滚动y2坐标为 正 的。此时就可以根据 y2向上的坐标去上拉刷新了。
_isrefresh 是否触摸结束,_isautoup是否是自动向上滚动的,这里对自动向上滚动记录的还不是很好,应该记录一下触摸结束后,记录一下y1 坐标,在滚动的时候滚动时候 y2 坐标,
y1 与 y2相比,即可判断是否是自动滚动了,
常用方法
tableview
重新加载、填充cell是从上到下还是相反、设置位置可以一开始就显示哪行的cell而不是从头开始显示
reloaddata(); 从新执行tableview里的 一个代理里和一个继承里的方法
setverticalfillorder(cc.tableview_fill_bottomup) tablecellatindex:function (table,idx) idx是从最小的开始还是从最大的开始
setcontentoffset(cc.p(0,-contentoffset));
dequeuecell() tableview中cell的重用机制:根据每个cell的宽或高,在根据tableview的宽或高,得出整个界面能够显示几个cell,cell.height * num=tableview.height
得出界面能够显示 cell的个数 num, 就new cell()个数=num+1,以后没上啦 或 下啦tableview,都是从队列里取出cell,
cellatindex(idx) cell有setidx和getidx得到具体是那个cell tablecellatindex:function (table, idx) 创建cell时默认的设置idx
setdatasource(this) 调用本对象里实现的datasource方法 某人是本对象
setdelegate(this) 调用本对象里实现的delegate方法 必须设定
maxcontaineroffset 设置显示最后一个 cell
上拉刷新代码
var customtableviewcell = cc.tableviewcell.extend({ draw:function (ctx) { this._super(ctx); }});var tableviewtestlayer = cc.layer.extend({ _table:null, _num:0, _array:[], _isrefresh:false, _refreshlabel:null, _isautoup:false, _nowy:0, appdata:function(){ this._num += 10; for(var i=0; i 70 && view.getcontentsize().height > 350){ this.appdata(); } } if(view.getcontentoffset().y > 20){ this._refreshlabel.setstring(上拉即可刷新); this._refreshlabel.setvisible(true); } if(view.getcontentoffset().y > 70){ this._refreshlabel.setstring(松开即可刷新); } cc.log( : + view.getcontentoffset().y); if(this._isautoup){//松开后向上谈起 if(view.getcontentoffset().y > 5){ this._refreshlabel.setvisible(false); }else{ this._isautoup = false; } } if(view.getcontentsize().height