TableView制作聊天界面

模拟聊天

local names = {'Tom','Jack','Messi','Kaka','Beckham'}local contents = {'An old gentleman whose eyesight was failing came to stay in a hotel room with a bottle of wine in each hand. On the wall there was a fly which he took for a nail. So the moment he hung them on, the bottles fell broken and the wine spilt all over the floor. When a waitress discovered what had happened, she showed deep sympathy for him and decided to do him a favour.',    'So the next morning when he was out taking a walk in the roof garden, she hammered a nail exactly where the fly had stayed.',    'Now the old man entered his room. The smell of the spilt wine reminded him of the accident. When he looked up at the wall, he found the fly was there again! He walked to it carefully adn slapped it with all his strength. On hearing a loud cry, the kind-hearted waitress rushed in. To her great surprise, the poor old man was there sitting on the floor, his teeth clenched and his right hand bleeding!',    'A patron in Montreal cafe turned on a tap in the washroom and got scalded. "This is an outrage," he complained. "The faucet marked C gave me boiling water."',    'Three competing store owners rented adjoining shops in a mall. Observers waited for mayhem to ensue.'}local chatPool = {}local size = 10local id = 0

chatPool暂存聊天数据，size为pool的长度，id可以记录共有多少条聊天，也是聊天的编号。

function MainScene:pushBackChat()    local i = math.random(1,5)    id = id + 1    local chat = {id=id,name=names[i],content=contents[i]}    if #chatPool < size then        table.insert(chatPool,chat)    else        table.remove(chatPool,1)        table.insert(chatPool,chat)    endendfunction MainScene:getLastChat()    if #chatPool > 0 then        return chatPool[#chatPool]    else        return {id=0,name='system',content='welcome'}    endendfunction MainScene:beginListener()    local function listener()        local chat = self:getLastChat()        local id = chat['id']        if self.lastId ~= id then  -- 有新的聊天            self.tv:reloadData()             if self.tv:cellAtIndex(0) then                local cell = self.tv:cellAtIndex(0)                 if cell:getPositionY() > 120 then                    self.tv:setContentOffset(cc.p(0,0),false)                 end            end            self.lastId = id        end    end    local seq = cc.Sequence:create(cc.CallFunc:create(listener),cc.DelayTime:create(1.1))    self:runAction(cc.RepeatForever:create(seq))end

pushBackChat方法是往chatPool中压入一条数据，左上角放置一个按钮，点击之后会压入一条数据。getLastChat得到最后一条数据。beginListener方法中每隔1.1秒，检查有没有新的聊天。

以下是完整的代码：

local MainScene = class("MainScene", cc.load("mvc").ViewBase)local names = {'Tom','Jack','Messi','Kaka','Beckham'}local contents = {'An old gentleman whose eyesight was failing came to stay in a hotel room with a bottle of wine in each hand. On the wall there was a fly which he took for a nail. So the moment he hung them on, the bottles fell broken and the wine spilt all over the floor. When a waitress discovered what had happened, she showed deep sympathy for him and decided to do him a favour.',    'So the next morning when he was out taking a walk in the roof garden, she hammered a nail exactly where the fly had stayed.',    'Now the old man entered his room. The smell of the spilt wine reminded him of the accident. When he looked up at the wall, he found the fly was there again! He walked to it carefully adn slapped it with all his strength. On hearing a loud cry, the kind-hearted waitress rushed in. To her great surprise, the poor old man was there sitting on the floor, his teeth clenched and his right hand bleeding!',    'A patron in Montreal cafe turned on a tap in the washroom and got scalded. "This is an outrage," he complained. "The faucet marked C gave me boiling water."',    'Three competing store owners rented adjoining shops in a mall. Observers waited for mayhem to ensue.'}local chatPool = {}local size = 10local id = 0function MainScene:ctor()    self:enableNodeEvents()    self.lastId = 0endfunction MainScene:onEnter()    self:createUI()    self:beginListener()endfunction MainScene:pushBackChat()    local i = math.random(1,5)    id = id + 1    local chat = {id=id,name=names[i],content=contents[i]}    if #chatPool < size then        table.insert(chatPool,chat)    else        table.remove(chatPool,1)        table.insert(chatPool,chat)    endendfunction MainScene:getLastChat()    if #chatPool > 0 then        return chatPool[#chatPool]    else        return {id=0,name='system',content='welcome'}    endendfunction MainScene:createUI()    self.tv = cc.TableView:create(cc.size(600,370))    self:addChild(self.tv,1)    self.tv:setPosition(150,140)    self.tv:setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN)    self.tv:setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL)    local function cellSizeForTable(table,idx) -- 第一个返回的是高度    第二个返回的是宽度        local content = self.newTTFLabel({text = chatPool[idx+1]['content'],font = "fonts/DFYUANW7-GB2312.ttf",size = 23})        content:setDimensions(500,0)        return content:getContentSize().height+30,100    end    local function  tableCellAtIndex(table, idx)        local cell = table:dequeueCell()        local function initCell()            local name = self.newTTFLabel({text = chatPool[idx+1]['id']..'.'..chatPool[idx+1]['name']..':',font = "fonts/DFYUANW7-GB2312.ttf",size = 23})            name:setTextColor(cc.c3b(246,196,16))            local content = self.newTTFLabel({text = chatPool[idx+1]['content'],font = "fonts/DFYUANW7-GB2312.ttf",size = 23})            content:setDimensions(500,0)            content:setTextColor(cc.c3b(104,229,255))            content:setAnchorPoint(0,0)            content:setPosition(25+name:getContentSize().width,2)            content:setName('content')            cell:addChild(content)            name:setAnchorPoint(0,1)            name:setPosition(20,content:getContentSize().height+2)            name:setName('NAME')            cell:addChild(name)        end        if not cell then            cell = cc.TableViewCell:new()            local content = self.newTTFLabel({text = chatPool[idx+1]['content'],font = "fonts/DFYUANW7-GB2312.ttf",size = 23})            content:setDimensions(400,0)            cell:setContentSize(100,content:getContentSize().height)            cell:reset()        else            cell:removeAllChildren()        end        initCell()        return cell    end    local function numberOfCellsInTableView(table)        return #chatPool     end    self.tv:registerScriptHandler(numberOfCellsInTableView,cc.NUMBER_OF_CELLS_IN_TABLEVIEW)      self.tv:registerScriptHandler(cellSizeForTable,cc.TABLECELL_SIZE_FOR_INDEX)    self.tv:registerScriptHandler(tableCellAtIndex,cc.TABLECELL_SIZE_AT_INDEX)    self.tv:reloadData()    local btn = ccui.Button:create('res/DS07.png','res/DS08.png','res/DS09.png')    btn:setPosition(100,550)    self:addChild(btn)    btn:addTouchEventListener(function(sender,_type)        if _type == 2 then            self:pushBackChat()        end    end)endfunction MainScene:beginListener()    local function listener()        local chat = self:getLastChat()        local id = chat['id']        if self.lastId ~= id then  -- 有新的聊天            self.tv:reloadData()             if self.tv:cellAtIndex(0) then                local cell = self.tv:cellAtIndex(0)                 if cell:getPositionY() > 120 then                    self.tv:setContentOffset(cc.p(0,0),false)                 end            end            self.lastId = id        end    end    local seq = cc.Sequence:create(cc.CallFunc:create(listener),cc.DelayTime:create(1.1))    self:runAction(cc.RepeatForever:create(seq))endfunction MainScene.newTTFLabel(config)    local myLabel= nil    if config then        if config.font then            local mytext = ""            local color = cc.c3b(255, 255, 255)            local size = 22            local align = cc.TEXT_ALIGNMENT_CENTER            local vertical = cc.VERTICAL_TEXT_ALIGNMENT_CENTER            if config.text then                 mytext = config.text            end            if config.color then                 color = config.color            end            if config.size then                 size = config.size            end            if config.vertical then                vertical = config.vertical            end            myLabel= cc.Label:createWithTTF(mytext,config.font,size)        end    end    return myLabelendreturn MainScene

需要注意cellSizeForTable方法第一个返回的是高度，第二个返回的是宽度。
运行结果：