js2dx--- 컨트롤
크기, 방향 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를cell에
//주의: 셀의 크기에 따라 레이어의 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
상속 및 ClassetDataSource(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에 놓습니다.레이어는 미끄러지거나 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를 초과하는 xcc입니다.p(0,-x)layer의 상연과 scroll의 상연 중합
1.size와pos를 통해 스크롤 상자의 크기와 위치를 확인한다
2. spriter의 위치를 설정하여layer의 첫 번째 UI의 위치를 확정하고 scroll의 상자에 맞게 조정합니다.
3. set Content Offset 설정을 통해 처음부터 spriter가 그 위에서 연구한 위치,
4. 이후 추가 UI 추가
5.layer에 추가 UI 왼쪽 아래 구석은 cc입니다.p(0,0)점
6. 버퍼 해제
table.setBounceable(false);
5. 업로드 및 드롭다운 새로 고침
1.tableview가 맨 밑에 왔습니다. 위로 조금만 당기면 위로 버퍼가 있습니다. 0시로 돌아갑니다.
2. 맨 위로 올라가면 아래로 내려가는 버퍼가 있습니다.
3. 중간 버퍼링, 테이블뷰 이동 속도에 따라 진행
참고 사항:
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
셀을 위에서 아래로 다시 불러오거나 채우거나 반대로 위치를 설정하면 처음부터 셀을 표시하지 않고 시작할 수 있습니다
reloadData(); 새 실행 테이블뷰의 에이전트와 계승하는 방법
setVertical FillOrder(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
인터페이스에서 셀을 표시할 수 있는 개수num을 얻으면 new 셀 () 개수=num+1, 앞으로 올라가거나 내려가거나tableview, 모두 대기열에서 셀을 꺼내고,
cellAtIndex(idx)cell에는 setIdx와 getIdx가 있습니다. 구체적으로는 그 cell tableCellAtIndex:function(table, idx)cell을 만들 때 기본 설정 idx
setDataSource(this)는 이 객체에서 구현된 DataSource 방법을 호출합니다.
setDelegate(this)에서 이 객체에서 구현된 Delegate 메서드를 호출하려면 반드시 설정해야 합니다.
maxContainerOffset
마지막 셀 표시 설정
업로드 리셋 코드
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;
}
});
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.