js2dx
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; i70 && 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
推荐阅读