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<this._num; i++){
this._array.push(i);
 }

if(this._table != null){
this._table.reloadData();
 }

 },


 onTouchesEnded:function (touches, event) {
this._isRefresh = true;
this._isAutoUp = true;
 },

 scrollViewDidScroll:function (view) {

this._nowY = view.getContentOffset().y //當前 y 軸位置
this._refreshLabel.setVisible(false);


if(this._isRefresh){//判斷是否夠上拉刷新
this._isRefresh = false;
if(view.getContentOffset().y > 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 < 650){
this._refreshLabel.setVisible(false);
 }

 },

 addLabel:function(string, pos, zOrder, type, fontSize, color, anchor){
var label = cc.LabelTTF.create(string, type, fontSize);
 label.setPosition(pos);
 label.setAnchorPoint(anchor);
 label.setColor(color);
this.addChild(label, zOrder);
return label;
 },

 init:function () {
if (!this._super()) {
returnfalse;
 }

this.appData();
this.setTouchEnabled(true);
this._refreshLabel = this.addLabel("上拉即可刷新", cc.p(640/2, 960/2), 5, "Helvetica", 25,
 cc.c3b(240,230,220), cc.p(0.5, 0.5));
this._refreshLabel.setVisible(false);

 tableView = cc.TableView.create(this, cc.size(60, 350));
 tableView.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);
 tableView.setPosition(cc.p(winSize.width - 150, winSize.height / 2 - 150));
 tableView.setDelegate(this);
this.addChild(tableView);
 tableView.reloadData();

this._table = tableView;
this._nowY = tableView.getContentOffset().y;

returntrue;
 },
 scrollViewDidZoom:function (view) {
 },
 tableCellTouched:function (table, cell) {
 },
 cellSizeForTable:function (table) {
return cc.size(60, 60);
 },

 tableCellAtIndex:function (table, idx) {

var strValue = idx.toFixed(0);
var cell = table.dequeueCell();
var label;
if (!cell) {
 cell = new CustomTableViewCell();
var sprite = cc.Sprite.create(s_image_icon);
 sprite.setAnchorPoint(cc.p(0,0));
 sprite.setPosition(cc.p(0, 0));
 cell.addChild(sprite);

 label = cc.LabelTTF.create(strValue, "Helvetica", 20.0);
 label.setPosition(cc.p(0,0));
 label.setAnchorPoint(cc.p(0,0));
 label.setTag(123);
 cell.addChild(label);
 } else {
 label = cell.getChildByTag(123);
 label.setString(strValue);
 }

return cell;
 },

 numberOfCellsInTableView:function (table) {
returnthis._array.length;
 }

});