js2dx--- 컨트롤

8401 단어
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를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;
    }

});

좋은 웹페이지 즐겨찾기