封装一个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