Cocos2d-JS中CollectionView实现不同大小Cell同时显示的技巧（ListView中添加显示标签）

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了Cocos2d-JS中CollectionView实现不同大小Cell同时显示的技巧（ListView中添加显示标签），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最近界面要实现一个功能：在同一个ListView中根据是否装备来展示宝石的列表，即在区分开来的两组宝石中间添加显示元素“--------------已装备的宝石-----------”，如下图。这个功能打我第一眼看到就觉得有点坑，网上并没有找到有效的答案，估计大部分是因为对问题的描述有偏差。虽然最后实现出来的时候感觉并没有多么复杂，但对于我刚入手Cocos2d-JS的一个新人来说，过程是有点艰难，因为我是一点点试验出来的。最后总结出来的无非是一些小技巧，现在分享给大家。当然，也会有更方便、快捷的方法，希望感兴趣的读者不吝赐教。


/**
 * 背包
 * Created by xj on 2016/12/22.
 */
InventoryCell = cc.TableViewCell.extend({

    m_bagCell: null,m_inventory: null,m_level: null,m_image: null,m_Box: null,ctor: function () {
        this._super();
        this.init();
    },init: function () {
        if(this._super()){
            this.m_bagCell = ccs.csLoader.createNode(res.InventoryCell_Json);
            // this.m_bagCell.setAnchorPoint(0,0);
            this.addChild(this.m_bagCell);

            this.m_level = ccui.helper.seekWidgetByName(this.m_bagCell,"label_Level");
            this.m_image = ccui.helper.seekWidgetByName(this.m_bagCell,"image_Equipment");
            this.m_Box = ccui.helper.seekWidgetByName(this.m_bagCell,"ItemBox");
        }
        return true;
    },draw: function (ctx) {
        this._super(ctx);
    }
})

InventoryUI = BaseUI.extend({

    m_listView: null,m_tableView: null,m_items: [],m_cellSize: null,m_label_Text: null,m_label_Capacity: null,m_label_filter: null,m_label_meltDown: null,m_btnFilter: null,m_btnCapacity: null,m_btnGemChoice: null,m_btnTabEquipment: null,m_btnTabPieces: null,m_btnTabOther: null,m_btnMeltDown: null,m_type: 1,//1-4：装备、**、宝石、**
    m_flag: null,m_gemsNoEquip: [],m_gemsEquiped: [],ctor: function () {
        BaseUI.prototype.ctor.call(this);
        this.init();
    },init: function () {
        if(!cc.Layer.prototype.init.call(this))
        {
            return false;
        }
        this.m_items = DataManager._Eqps.slice(0);

        var objView = ccs.csLoader.createNode(res.Inventory_Json);
        this.addChild(objView);
        this.m_cellSize = ccs.csLoader.createNode(res.InventoryCell_Json).getContentSize();
        this.m_label_Text = ccui.helper.seekWidgetByName(objView,"label_Text");
        this.m_label_Text.setString(Exceptions.TEXT_BAGCAPACITY);
        this.m_label_Capacity = ccui.helper.seekWidgetByName(objView,"label_Capacity");
        this.m_label_filter = ccui.helper.seekWidgetByName(objView,"label_Filter");
        this.m_label_meltDown = ccui.helper.seekWidgetByName(objView,"label_MeltDown");
        this.m_btnFilter = ccui.helper.seekWidgetByName(objView,"btnFilter");
        this.m_btnCapacity = ccui.helper.seekWidgetByName(objView,"btnCapacity");
        this.m_btnGemChoice = ccui.helper.seekWidgetByName(objView,"btnTabItems");
        this.m_btnTabEquipment = ccui.helper.seekWidgetByName(objView,"btnTabEquipment");
        this.m_btnTabPieces = ccui.helper.seekWidgetByName(objView,"btnTabPieces");
        this.m_btnTabOther = ccui.helper.seekWidgetByName(objView,"btnTabOther");
        this.m_btnMeltDown = ccui.helper.seekWidgetByName(objView,"btnMeltDown");

        this.m_btnFilter.addTouchEventListener(this.onButtonClick,this);
        this.m_btnCapacity.addTouchEventListener(this.onButtonClick,this);
        this.m_btnGemChoice.addTouchEventListener(this.onButtonClick,this);
        this.m_btnTabEquipment.addTouchEventListener(this.onButtonClick,this);
        this.m_btnTabPieces.addTouchEventListener(this.onButtonClick,this);
        this.m_btnTabOther.addTouchEventListener(this.onButtonClick,this);
        this.m_btnMeltDown.addTouchEventListener(this.onButtonClick,this);

        var listView = ccui.helper.seekWidgetByName(objView,"Tablelist");
        listView.setScrollBarEnabled(false);
        this.m_tableView = new cc.CollectionView(this,cc.size(listView.getContentSize().width,listView.getContentSize().height));
        this.m_tableView.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);
        this.m_tableView.x = listView.getPositionX();
        this.m_tableView.y = listView.getPositionY();
        this.m_tableView.setDelegate(this);
        this.addChild(this.m_tableView);

        DataManager.addObserver(this,this.updateData,cc.NOTIFICATION_LAYER_FILTER,null);
        return true;
    },bindData: function (data) {
        this.m_label_Capacity.setString(this.m_items.length + "/" + "100");
    },onButtonClick: function (sender,type) {
        switch (type){
          case ccui.Widget.TOUCH_ENDED:
              if(sender.getName() == "btnFilter")
              {
                  SceneManager.addLayer(cc.LAYER_EQUIPSELECTION);
              }
              else if(sender.getName() == "btnTabEquipment")
              {
                  this.changeItems(1);
              }
              else if(sender.getName() == "btnTabPieces")
              {
                  this.changeItems(2);
              }
              else if(sender.getName() == "btnTabItems")
              {
                  this.changeItems(3);
              }
              else if(sender.getName() == "btnTabOther")
              {
                  this.changeItems(4);
              }
              else if(sender.getName() == "btnCapacity")
              {
                  alert("额外格数");
              }
              else if(sender.getName() == "btnMeltDown")
              {
                  alert("meltDown");
              }
              break;
          default:
              break;
        }
    },updateData: function (sender) {
        var filters = sender.getUserData();
        this.m_items = DataManager._Eqps.slice(0);

        //根据filters[0,1]对m_items进行筛选
        //多选
        var filterItem = new Array();
        if(filters[5] != 1){    //filters[5] == 1 全选
            for(var i = 0; i < this.m_items.length; i++){
                for(var j = 0; j < 5; j++){
                    if(filters[j] == 1 && this.m_items[i].Quality == j+1){
                        filterItem.push(this.m_items[i]);
                        break;
                    }
                }
            }
            this.m_items = filterItem;
        }
        //单选
        //根据filters[0,1]对m_items进行筛选
        // var filter = 0;                                         //0-5：白绿蓝紫橙红
        // for(var i = 0; i < 6; i++){
        //     if(filters[i] == 1){
        //        filter = i;
        //        break;
        //     }
        // }
        // if(filter != 5){    //filter = 5 全选
        //     for(var i = 0; i < this.m_items.length; i++){
        //         if(this.m_items[i].Quality != filter+1){
        //             this.m_items.splice(i,1);
        //             i --;
        //         }
        //     }
        // }

        this.m_tableView.reloadData();

    },changeItems: function (type) {
        if(type == 1)
        {
            this.updateButtons(true);
            this.m_items = DataManager._Eqps.slice(0);
            this.m_flag = null;
        }
        else if(type == 2)
        {
            this.updateButtons(false);
            this.m_items = DataManager._Gems.slice(0);
        }
        else if(type == 3)
        {
            this.updateButtons(false);
            var gems = DataManager._Gems.slice(0);
            this.m_gemsNoEquip = [];
            this.m_gemsEquiped = [];

            for(var i = 0; i < gems.length; i++){
                if(gems[i].Amount > 0)
                {
                    this.m_gemsNoEquip.push(gems[i]);
                }
                if(gems[i].EqpAmount > 0)
                {
                    this.m_gemsEquiped.push(gems[i]);
                }
            }
            this.m_items = this.m_gemsNoEquip.concat(this.m_gemsEquiped);

            this.addNullCell(this.m_gemsNoEquip.length);
        }
        else if(type == 4)
        {
            this.updateButtons(false);
            this.m_items = DataManager._Gems.slice(0);
        }
        this.m_type = type;
        this.m_tableView.reloadData();
    },updateButtons: function (display) {
        this.m_label_filter.setVisible(display);
        this.m_label_meltDown.setVisible(display);
        this.m_label_Capacity.setVisible(display);
        this.m_label_Text.setVisible(display);
        this.m_btnFilter.setVisible(display);
        this.m_btnMeltDown.setVisible(display);
        this.m_btnCapacity.setVisible(display);
    },selectedItemEvent: function (sender,type) {
        switch (type){
            case ccui.ListView.EVENT_SELECTED_ITEM:
                alert(sender.getCurSelectedIndex());
                break;
            default:
                break;
        }
    },tableCellSizeForIndex: function (table,idx) {
        if(this.m_type == 3 && (idx > this.m_flag-5 && idx <= this.m_flag))
        {
            return cc.size(110,25);
        }
        return this.m_cellSize;
    },numberOfCellsInTableView: function () {
        if(!this.m_items){
            return 0;
        }
        return this.m_items.length;
    },cellSizeForTable: function (table) {
        return table.getContentSize();
        // return cc.size(580,130);
    },tableCellAtIndex: function (table,idx) {

        var itemAtt = this.m_items[idx];
        var cell = null;
        // var cell = table.dequeueCell();
        if(!cell){
            cell = new InventoryCell();
        }
        cell.m_inventory = itemAtt;

        if(itemAtt.Id != 0){
            var pic = "";
            if(this.m_type == 1)
            {
                cell.m_level.setString("Lv." + itemAtt.Level);
                pic = "res/pic/Equip/" + itemAtt.IconId + ".png";
            }
            else if(this.m_type == 2)
            {
                cell.m_level.setString(itemAtt.Amount);
                pic = "res/pic/Gems/" + itemAtt.IconId + ".png";
            }
            else if(this.m_type == 3)
            {
                if(idx < this.m_gemsNoEquip.length)
                {
                    cell.m_level.setString(itemAtt.Amount);
                }
                else
                {
                    cell.m_level.setString(itemAtt.EqpAmount);
                }
                pic = "res/pic/Gems/" + itemAtt.IconId + ".png";
            }
            else if(this.m_type == 4)
            {
                cell.m_level.setString(itemAtt.Amount);
                pic = "res/pic/Gems/" + itemAtt.IconId + ".png";
            }
        }
        else
        {
            if(idx == this.m_flag-4)
            {
                cell = new CombatCell();
                cell._Time.setVisible(false);
                cell._Info.setString("  ------已装备宝石------")
            }
            else
            {
                cell.m_level.setVisible(false);
                cell.m_image.setVisible(false);
                cell.m_Box.setVisible(false);
            }
            return cell;
        }
        this.changeNodeTexture2(pic,"image_Equipment",cell);
        return cell;
    },tableCellTouched: function (table,cell) {
        if(cell.m_inventory.Id != 0){
            if(this.m_type == 1)
            {
                // SceneManager.addLayer(cc.LAYER_EQUIPUI,cell.m_inventory);
                var ui = SceneManager.addLayer(cc.LAYER_EQUIPUI,null,true,cc.LAYER_ANI_NONE,true);
                if (ui)
                {
                    //替换装备与装备相关操作
                    ui.initEquipUI(null,cell.m_inventory);
                }
            }
            else if(this.m_type == 3)
            {
                SceneManager.addLayer(cc.LAYER_GEMINFO,cell.m_inventory);
            }
        }
    },addNullCell: function (index) {
        //添加空Cell
        var flag = index % 5 == 0 ? index+5 : 5 * (parseInt(index/5) + 2);
        var nullCell = new GemAtt();
        //从索引处开始添加空元素
        for(var i=index; i<flag; i++)
        {
            this.m_items.splice(i,nullCell);
            if(i == flag-1)
            {
                this.m_flag = i;
            }
        }
    }
});

InventoryUI.create = function () {
    return new InventoryUI();
}


思路解析：

把整理好的没有装备的宝石和已经装备好的宝石数组放入同一数组中，使其前一部分全为没有装备的宝石，后一部分则为装备的宝石。根据分界线的索引，即没有装备宝石的数组的length属性，为整合好的数组添加没有实际意义的Cell，把它看作填空Cell，使得填空后的数组满足：当未装备的宝石数量不为每行所能含有Cell的个数的整数倍时，最后一行填充空的Cell。以让用户感觉后边没有元素了。比如：CollectView每行可容纳5个Cell，当未装备的宝石为8个时，需要在会后一行，填充两个空的Cell。此时做到可以把装备与否的宝石区分开来。在此基础上，再添加每行容纳Cell个数的空Cell，即可将要求中的提示信息“--------已装备宝石----------”留出空间来。最后处理留出空间的高度显示。

关键代码解析：

1、行数：196-212

            var gems = DataManager._Gems.slice(0);
            this.m_gemsNoEquip = [];
            this.m_gemsEquiped = [];

            for(var i = 0; i < gems.length; i++){
                if(gems[i].Amount > 0)
                {
                    this.m_gemsNoEquip.push(gems[i]);
                }
                if(gems[i].EqpAmount > 0)
                {
                    this.m_gemsEquiped.push(gems[i]);
                }
            }
            this.m_items = this.m_gemsNoEquip.concat(this.m_gemsEquiped);

            this.addNullCell(this.m_gemsNoEquip.length);

将拿到的宝石结构，分成没有装备和已经装备的两个数组，m_gemsNoEquip和m_gemsEquiped；并通过concat方法将两个数组合成一个新的数组，之后执行addNullCell()方法，为整合好的数组，添加空Cell个数；

2、行数：334-347

    addNullCell: function (index) {
        //添加空Cell
        var flag = index % 5 == 0 ? index+5 : 5 * (parseInt(index/5) + 2);
        var nullCell = new GemAtt();
        //从索引处开始添加空元素
        for(var i=index; i<flag; i++)
        {
            this.m_items.splice(i,nullCell);
            if(i == flag-1)
            {
                this.m_flag = i;
            }
        }
    }

此为addNullCell()的方法，此方法在为数组添加填充Cell的同时，在344行标记了最后一个空Cell元素的索引，这个索引将是一个关键；

3、行数：240-246

    tableCellSizeForIndex: function (table,
根据索引值，将整合的数组中整行为空的高度设置成需要的数值，如：正常Cell的高度是130，此处将空行设置为25；

4、行号：299-311

            if(idx == this.m_flag-4)
            {
                cell = new CombatCell();
                cell._Time.setVisible(false);
                cell._Info.setString("  ------已装备宝石------")
            }
            else
            {
                cell.m_level.setVisible(false);
                cell.m_image.setVisible(false);
                cell.m_Box.setVisible(false);
            }
            return cell;
在 tableCellAtIndex中，如果检测到是数组中的填充数据，那么可以把此处的cell替换成其他cell，此处用了一个高度较低，宽度较长的适合显示的Cell。至于为什么idx==this.m_flag-4，这个位置根据具体情况设置。从代码中可以看出其实填充Cell就是把普通Cell的控件设置成不可见。

实现效果：

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签