封装一个ListView

在cocos2dx中，如果你要使用列表，原生的listview起始用起来很生涩，lsitview其实是继承自scrollview的，我们可以继承实现自己的listview，先上代码，再来解释

-- region ListView.lua
-- Author : user
-- Date   : 2016/9/22
-- 此文件由[BabeLua]插件自动生成
local ListView = class("ListView", function(lv)
    return lv
end )

function ListView:ctor(lv, cell)
    cell:setVisible(false)
    self._cell = cell
    self._cell:removeFromParent()
    self._cell:retain()
    self._list = { }
    self._cellList = { }
    self._cellClass = nil
    self._rows = 1
    self._columns = 1
    self._rowDiv = 0
    self._columnDiv = 0
    self._arg = nil
    self._flagUpdatePs = false
    self._sc = scheduler.scheduleUpdateGlobal(handler(self, self.onUpdate))
end

function ListView:onExit()
    self._cell:release()
    scheduler.unscheduleGlobal(self._sc)
end

function ListView:setClass(class, arg)
    self._cellClass = class
    self._arg = arg
end

-- @tips
-- 设置行数，方向为水平时候有效
-- @parameter
-- :
function ListView:setRows(rows)
    self._rows = rows
end

-- @tips
-- 设置列数，方向为垂直时候有效
-- @parameter
-- :
function ListView:setColumns(columns)
    self._columns = columns
end

-- @tips
-- 行间距
-- @parameter
-- div:
function ListView:setRowDiv(div)
    self._rowDiv = div
end

-- @tips
-- 列间距
-- @parameter
-- div:
function ListView:setColumnDiv(div)
    self._columnDiv = div
end

-- @tips
-- 设置数据列表，外部调用
-- @parameter
-- list:根据此数据刷新
function ListView:setData(list)
    self._list = list
    self:hildCells()
    self._flagUpdatePs = false
end

function ListView:hildCells()
    for _, cell in ipairs(self._cellList) do
        cell:setVisible(false)
    end
end

function ListView:onUpdate(t)
    if #self._cellList ~= #self._list then
        self:updateCells()
    else
        -- cell增减到和数据条目一致，开始更新cell位置
        self:updatePosition()
    end
end

function ListView:updateCells()
    local ct = #self._cellList - #self._list
    if ct > 0 then
        self:deleteCells(math.abs(1))
    else
        self:createCells(math.abs(1))
    end
end

function ListView:updatePosition()
    if self._flagUpdatePs then
        return
    end
    self._flagUpdatePs = true
    if self:getDirection() == 1 then
        self:updatePsForVer()
    else
        self:updatePsForHir()
    end
end

function ListView:updatePsForVer()
    -- 垂直
    local cellWidth = self._cell:getContentSize().width
    local cellHeight = self._cell:getContentSize().height
    local count = #self._cellList
    self._rows = math.ceil(count / self._columns)
    local innerWidth = self._columns * cellWidth +(self._columns - 1) * self._columnDiv
    local innerHeight = self._rows * cellHeight +(self._rows - 1) * self._rowDiv
    innerHeight = math.max(innerHeight, self:getContentSize().height)
    self:setInnerContainerSize(cc.size(innerWidth, innerHeight))
    for i = 1, #self._cellList do
        local cell = self._cellList[i]
        cell:setData(self._list[i])
        local row = math.ceil(i / self._columns)
        local column = i -((row - 1) * self._columns)
        cell:setAnchorPoint(0, 1)
        local x =(column - 1) *(cellWidth + self._columnDiv)
        local y =(row - 1) *(cellHeight + self._rowDiv)
        y = innerHeight - y
        cell:setPosition(x, y)
        cell:setVisible(true)
        self:actionScale(cell)
    end
end

function ListView:updatePsForHir()
    -- 水平
    local cellWidth = self._cell:getContentSize().width
    local cellHeight = self._cell:getContentSize().height
    local count = #self._cellList
    self._columns = math.ceil(count / self._rows)
    local innerWidth = self._columns * cellWidth +(self._columns - 1) * self._columnDiv
    local innerHeight = self._rows * cellHeight +(self._rows - 1) * self._rowDiv
    innerWidth = math.max(innerWidth, self:getContentSize().width)
    self:setInnerContainerSize(cc.size(innerWidth, innerHeight))
    for i = 1, #self._cellList do
        local cell = self._cellList[i]
        cell:setData(self._list[i])
        local column = math.ceil(i / self._rows)
        local row = i -((column - 1) * self._rows)
        cell:setAnchorPoint(0, 1)
        local x =(column - 1) *(cellWidth + self._columnDiv)
        local y =(row - 1) *(cellHeight + self._rowDiv)
        y = self:getContentSize().height - y
        cell:setPosition(x, y)
        cell:setVisible(true)
        self:actionScale(cell)
    end
end

function ListView:createCells(count)
    for i = 1, count do
        local cell = self._cellClass.new(self._cell:clone(), self._arg)
        table.insert(self._cellList, cell)
        self:addChild(cell)
    end
end

function ListView:deleteCells(count)
    for i = 1, count do
        local cell = table.remove(self._cellList)
        self:removeChild(cell)
    end
end

function ListView:actionScale(cell)
    cell:setAnchorPoint(0.5, 0.5)
    cell:setPositionX(cell:getPositionX() + cell:getContentSize().width / 2)
    cell:setPositionY(cell:getPositionY() - cell:getContentSize().height / 2)
    cell:setScale(0.10)
    cell:setOpacity(0)
    local scaleTo = cc.ScaleTo:create(0.1, 1.06)
    local scaleTo2 = cc.ScaleTo:create(0.05, 1.00)
    local fadeIn = cc.FadeIn:create(0.15)
    cell:runAction(cc.Spawn:create(cc.Sequence:create(scaleTo, scaleTo2), fadeIn));
end

return ListView
-- endregion

首先，使用这个类的话，你需要传入一个scrollview以及一个cell

ui.png

这个1就是一个cell了，
对于使用

--region File1.lua
--Author : user
--Date   : 2016/9/22
--此文件由[BabeLua]插件自动生成

local File1 = class("File1",cc.Scene)

function File1:ctor()
    local ListView = require("core.utils.ui.ListView")
    self:addChild(display.loadCocosUI("ui/test"))

    local lv = ListView.new(display.getUi(self,"ScrollView_1"),display.getUi(self,"Panel_1"))
    --lv:setColumns(3)
    local arg = function(cell) print(cell._data)  end
    lv:setClass(require("core.view.home.File2"),arg)
    lv:setRows(5)
    lv:setColumnDiv(10)
    lv:setRowDiv(10)
    local list = {}
    for i =1,60 do
        table.insert(list,i)
    end
    lv:setData(list)
end

return File1
--endregion

这里的scrollview是水平移动的，所以只需要设置行数，列数会依据数据不同而不同，同理，如果是垂直的话，只需要设置列数，行数是不固定的，然后设置好行间距和列间距，最后传入需要显示的数据list，当然了，对于每个cell，你可以再写一个类专门写cell的逻辑，然后在这个listview里面将对应的数据传进去。

--region File2.lua
--Author : user
--Date   : 2016/9/23
--此文件由[BabeLua]插件自动生成

local File2 = class("File2",function(layout)
    return layout
end)

function File2:ctor(layout,arg)
    self._arg = arg
    self:addClickEventListener(handler(self,self.onClick))
end

function File2:setData(data)
    self._data = data
    display.getUi(self,"Text_1"):setString(data)
end

function File2:onClick()
    self._arg(self)
end

return File2
--endregion
listview.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,491评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,856评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,745评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,196评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,073评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,112评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,531评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,215评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,485评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,215评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,583评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2赞 335

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,945评论 4赞 60
  • 安利给大家不容错过的高品质游戏
    游戏一直不缺乏高品质作品，这里为大家安利出10款相对质量比较高的游戏。让我们再次重温游戏市场带给我们的佳作。 《古...
    甜椒文化阅读 189评论 0赞 0
  • 生活的真实
    这一种沉重，就是此刻的我从远处那老很旧的曲调中咀嚼出来的。
    年少轻狂_b954阅读 137评论 0赞 1