js2dx --- 控件

来源：互联网发布：电磁炉品牌知乎编辑：程序博客网时间：2024/05/29 17:51

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()) {            return false;        }        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;        return true;    },    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) {        return this._array.length;    }});